Netbeans/C2/Handling-Images-in-a-Java-GUI-Application/English-timed
From Script | Spoken-Tutorial
| Time | Narration |
| 00:01 | Hi everyone.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 version 11.04 and Netbeans IDE version 7.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 check-box. |
| 01:58 | Make sure that the Set as Main Project check-box 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 down 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. |
| 05: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 defaultCloseOperation. |
| 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 images, 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: * conducts 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. |
