Difference between revisions of "Netbeans/C2/Handling-Images-in-a-Java-GUI-Application/English-timed"
From Script | Spoken-Tutorial
PoojaMoolya (Talk | contribs) (Created page with '{| Border=1 || Time || Narration |- | 00.01 |Hii everyone. |- | 00.02 | Welcome to this tutorial on '''Handling Images in a Java GUI Application using Netbeans IDE. ''' |-…') |
PoojaMoolya (Talk | contribs) |
||
| Line 310: | Line 310: | ||
| 05.18 | | 05.18 | ||
| − | |You can now go to the Files | + | |You can now go to the '''Files''' menu, and under the '''build''' folder, |
|- | |- | ||
Revision as of 13:26, 9 April 2014
| Time | Narration
|
| 00.01 | Hii everyone. |
| 00.02 | Welcome to this tutorial on Handling Images in a Java GUI Application using Netbeans IDE. |
| 00.10 | We assume that you have the basic working knowledge of Netbeans. |
| 00.15 | We also assume that you know to place text fields, buttons, menus, etc. on a JFrame form. |
| 00.22 | If not, then please visit the Spoken Tutorial website for relevant tutorials on Netbeans. |
| 00.29 | In this tutorial, we will learn in detail about handling images |
| 00.34 | And perform actions on them, in a sample GUI application.
|
| 00.39 | For this demonstration, I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.1.1 |
| 00.52 | The standard way to handle and access images in a Java Application is by using the getResource() method. |
| 00.59 | We will learn how to use the IDE's GUI Builder to generate the code to include images in your application, |
| 01.07 | and create a simple Jframe with one Jlabel displaying an image.
|
| 01.13 | In this tutorial, we will - |
| 01.15 | Create the application form
|
| 01.18 | Add a package for the image
|
| 01.20 | Display the image on the Label
|
| 01.22 | Create mouse-events and pop-ups |
| 01.25 | Build and run the application |
| 01.28 | Now let us switch to the IDE to create our sample application.
|
| 01.33 | From the File menu, choose New Project.
|
| 01.37 | Under Categories , select Java, under Projects select Java Application and click Next. |
| 01.46 | In the Project Name field, type ImageDisplayApp.
|
| 01.54 | Clear the Create Main Class checkbox.
|
| 01.58 | Make sure that the Set as Main Project checkbox is selected. |
| 02.03 | Click Finish. The project is created in your IDE. |
| 02.08 | In this section, we will create the Jframe form and add a Jlabel to the form.
|
| 02.14 | Let us first create the Jframe form. |
| 02.17 | In the Projects window, expand the ImageDisplayApp node. |
| 02.23 | Right-click on the Source Packages node and choose New, Jframe form. |
| 02.30 | In the Class Name field, type ImageDisplay. |
| 02.37 | In the Package field, type org.me.myimageapp. |
| 02.45 | And Click Finish. |
| 02.48 | Now let us add the Jlabel. |
| 02.52 | In the Palette, on the right hand side of the IDE, select the Label component and drag it to the Jframe. |
| 03.01 | For now, your form should look something like this.
|
| 03.06 | When you use images or other resources in an application, typically you create a separate Java package for the resource.
|
| 03.15 | On your local file system, a package corresponds with a folder.
|
| 03.19 | In the Projects window, right-click the org.me.myimageapp node and choose New > Java Package.
|
| 03.30 | In the New Package Wizard, add .resources to org.me.myimageapp.
|
| 03.40 | So the new package is now called org.me.myimageapp.resources.
|
| 03.47 | Click Finish.
|
| 03.49 | In the Projects window, you should see the image appear within the org.me.myimageapp.resources package, when you add the image.
|
| 03.59 | In this application, the image will be embedded within a Jlabel component.
|
| 04.04 | Let us now add the image to the label. |
| 04.08 | In the GUI designer, select the label that you have added to your form.
|
| 04.14 | In the Properties window, below the palette, on the right hand side of the window, scroll to the Icon property.
|
| 04.23 | Click the ellipsis (...) or the three dots on the right side.
|
| 04.30 | In the Icon Property dialog box, click Import to Project. |
| 04.34 | In the file chooser, navigate to the folder that contains your image that you want to use. |
| 04.42 | Click Next. |
| 04.45 | In the Select Target Folder page of the wizard, select the Resources folder. |
| 04.49 | And click Finish. |
| 04.52 | After you click Finish, the IDE copies the image to your project. |
| 04.57 | Therefore, when you build and run the application, the image is included in the distributable JAR file.
|
| 05.07 | Click OK here. |
| 05.11 | And right click on your project node and select Clean and Build option. |
| 05.18 | You can now go to the Files menu, and under the build folder, |
| 05.29 | under dist folder, you can see the jar file. |
| 04.33 | It generates the code in the imagedisplay class to access the image. |
| 05.38 | It also displays your image on the label in the Design view of your form. |
| 05.43 | At this point, you can do some simple things to improve the appearance of the form.
|
| 05.48 | In the Properties window, select the Text property |
| 05.56 | and delete jLabel1.
|
| 06.04 | That value was generated by the GUI Builder as display text for the label. |
| 06.10 | However, you are using the label to display an image rather than text.
|
| 06.15 | So this text is not needed.
|
| 06.18 | Now let us drag the label to center it on the form. |
| 06.26 | In the GUI Designer, click the Source tab.
|
| 06.30 | Scroll down to the line that says Generated Code. |
| 06.33 | And click the plus sign (+) to the left of the Generated Code line to display the code that the GUI Designer has generated. |
| 06.42 | Here, the keyline is this.
|
| 06.49 | Since you have used the Property editor for jLabel1s icon property, the IDE has generated the setIcon method. |
| 06.57 | The parameter of that method contains a call to the getResource() method on an anonymous inner class of ImageIcon. |
| 07.10 | Once your image has been added, in the Design view right-click on the image.
|
| 07.19 | Click on Events > Mouse > mouseClicked. |
| 07.24 | The view is switched to the Source mode. |
| 07.28 | Here you can add the code to customize your action on a mouse click. |
| 07.33 | Let me add a few lines of code to generate a pop-up when the image is clicked in the GUI.
|
| 08.00 | I have now entered a few lines of code to generate the pop-up.
|
| 08.05 | First I have created a new Jframe for the pop-up.
|
| 08.12 | And I have set the default close operation.
|
| 08.15 | And finally provided the text for the pop-up. |
| 08.24 | After adding these lines of code, let us import the necessary packages by adding two statements at the beginning of the file. |
| 08.36 | Include: import javax.swing.*;
|
| 08.45 | and import java.awt.*;
|
| 08.53 | This will import the necessary packages required for this program. |
| 08.59 | Let us now build and run the application. |
| 09.02 | We have generated the code for accessing and displaying the image.
|
| 09.07 | Let us build and run the application to ensure that the image is accessed.
|
| 09.12 | First, we need to set the project's Main class. |
| 09.16 | When you set the Main class, the IDE knows which class to run when you run the project. |
| 09.21 | In addition, this ensures that the Main class element in the application's JAR file is generated when you build the application. |
| 09.33 | Here right-click on the ImageDisplayApp project's Node in the Projects window, and choose Properties. |
| 09.41 | In the Project Properties dialog box, select the Run category on the left side. |
| 09.47 | Click the Browse button, that is next to the Main Class field. |
| 09.51 | Select org.me.myimageapp.ImageDisplay and click on Select Main Class |
| 10.01 | Say OK here. |
| 10.05 | Now right-click on the Project node, and select Clean & Build. |
| 10.11 | You can view the Build properties of the application in the Files window. |
| 10.20 | The Build folder contains the compiled class. |
| 10.23 | The dist folder contains an executable JAR file that contains the compiled class and the image. |
| 10.32 | Now choose Run from the tool bar. |
| 10.34 | Our output window opens with the image. |
| 10.39 | I will click on this image now. |
| 10.42 | And you can see the pop-up at the top, which shows the description of the image. |
| 10.50 | Now, time for the assignment! |
| 10.54 | Create another GUI with four images, similar to the demonstration shown in this tutorial, |
| 11.01 | For each of the image, specify different events such as keyboard event, mouse-motion event, mouse-click event, mouse-wheel event . |
| 11.12 | I have already created the assignment. |
| 11.17 | Let us run the assignment project. |
| 11.20 | Your assignment should look similar to this.
|
| 11.26 | I have created keyboard-events and mouse events for my assignment here. |
| 11.34 | So, to summarize, |
| 11.36 | we have, created a Jframe form |
| 11.39 | added a package for the image |
| 11.41 | displayed the image on the label |
| 11.44 | and also created mouse events and pop-ups
|
| 11.49 | Watch the video available at the link shown on the screen. |
| 11.53 | It summarizes the Spoken Tutorial project. |
| 11.56 | If you do not have good bandwidth, you can download and watch it. |
| 12.02 | The Spoken Tutorial project team conduct workshops using Spoken Tutorials.
|
| 12.07 | Gives certificates to those who pass an online test.
|
| 12.11 | For more details please write to contact@spoken-tutorial.org
|
| 12.19 | Spoken Tutorial Project is a part of the Talk to a Teacher Project |
| 12.23 | It is Supported by the National Mission on education through ICT, MHRD, Government of India |
| 12.30 | More information on this mission is available at spoken-tutorial.org/NMEICT-Intro |
| 12.42 | This tutorial has been contributed by IT for Change
|
| 12.46 | Thank you for joining us. |
