Difference between revisions of "Netbeans/C2/Handling-Images-in-a-Java-GUI-Application/English-timed"
From Script | Spoken-Tutorial
| Line 1: | Line 1: | ||
{| Border=1 | {| Border=1 | ||
| − | + | | '''Time''' | |
| − | + | |'''Narration''' | |
|- | |- | ||
| − | | 00 | + | | 00:01 |
|Hii everyone. | |Hii everyone. | ||
|- | |- | ||
| − | | 00 | + | | 00:02 |
| Welcome to this tutorial on '''Handling Images in a Java GUI Application using Netbeans IDE. ''' | | Welcome to this tutorial on '''Handling Images in a Java GUI Application using Netbeans IDE. ''' | ||
|- | |- | ||
| − | |00 | + | |00:10 |
|We assume that you have the basic working knowledge of Netbeans. | |We assume that you have the basic working knowledge of Netbeans. | ||
|- | |- | ||
| − | |00 | + | |00:15 |
|We also assume that you know to place '''text fields, buttons, menus,''' etc. on a '''JFrame form. ''' | |We also assume that you know to place '''text fields, buttons, menus,''' etc. on a '''JFrame form. ''' | ||
|- | |- | ||
| − | | 00 | + | | 00:22 |
| If not, then please visit the Spoken Tutorial website for relevant tutorials on Netbeans. | | If not, then please visit the Spoken Tutorial website for relevant tutorials on Netbeans. | ||
|- | |- | ||
| − | |00 | + | |00:29 |
|In this tutorial, we will learn in detail about handling images | |In this tutorial, we will learn in detail about handling images | ||
|- | |- | ||
| − | | 00 | + | | 00:34 |
|And perform actions on them, in a sample '''GUI''' application. | |And perform actions on them, in a sample '''GUI''' application. | ||
|- | |- | ||
| − | |00 | + | |00:39 |
|For this demonstration, I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.1.1 | |For this demonstration, I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.1.1 | ||
|- | |- | ||
| − | | 00 | + | | 00:52 |
|The standard way to handle and access images in a Java Application is by using the '''getResource()''' method. | |The standard way to handle and access images in a Java Application is by using the '''getResource()''' method. | ||
|- | |- | ||
| − | | 00 | + | | 00:59 |
| We will learn how to use the IDE's GUI Builder to generate the code to include images in your application, | | We will learn how to use the IDE's GUI Builder to generate the code to include images in your application, | ||
|- | |- | ||
| − | |01 | + | |01:07 |
|and create a simple Jframe with one Jlabel displaying an image. | |and create a simple Jframe with one Jlabel displaying an image. | ||
|- | |- | ||
| − | |01 | + | |01:13 |
|In this tutorial, we will - | |In this tutorial, we will - | ||
|- | |- | ||
| − | |01 | + | |01:15 |
|Create the application form | |Create the application form | ||
| Line 64: | Line 64: | ||
|- | |- | ||
| − | |01 | + | |01:18 |
|Add a package for the image | |Add a package for the image | ||
| Line 70: | Line 70: | ||
|- | |- | ||
| − | | 01 | + | | 01:20 |
|Display the image on the Label | |Display the image on the Label | ||
| Line 77: | Line 77: | ||
|- | |- | ||
| − | |01 | + | |01:22 |
|Create mouse-events and pop-ups | |Create mouse-events and pop-ups | ||
| Line 83: | Line 83: | ||
|- | |- | ||
| − | |01 | + | |01:25 |
|Build and run the application | |Build and run the application | ||
| Line 89: | Line 89: | ||
|- | |- | ||
| − | |01 | + | |01:28 |
|Now let us switch to the '''IDE''' to create our sample application. | |Now let us switch to the '''IDE''' to create our sample application. | ||
| Line 96: | Line 96: | ||
|- | |- | ||
| − | |01 | + | |01:33 |
|From the '''File''' menu, choose '''New Project. ''' | |From the '''File''' menu, choose '''New Project. ''' | ||
| Line 103: | Line 103: | ||
|- | |- | ||
| − | |01 | + | |01:37 |
|Under '''Categories ''', select '''Java''', under '''Projects''' select ''' Java Application''' and click '''Next. ''' | |Under '''Categories ''', select '''Java''', under '''Projects''' select ''' Java Application''' and click '''Next. ''' | ||
| Line 109: | Line 109: | ||
|- | |- | ||
| − | |01 | + | |01:46 |
| In the '''Project Name''' field, type '''ImageDisplayApp. ''' | | In the '''Project Name''' field, type '''ImageDisplayApp. ''' | ||
| Line 116: | Line 116: | ||
|- | |- | ||
| − | | 01 | + | | 01:54 |
|Clear the ''' Create Main Class''' checkbox. | |Clear the ''' Create Main Class''' checkbox. | ||
| Line 123: | Line 123: | ||
|- | |- | ||
| − | | 01 | + | | 01:58 |
|Make sure that the '''Set as Main Project''' checkbox is selected. | |Make sure that the '''Set as Main Project''' checkbox is selected. | ||
|- | |- | ||
| − | | 02 | + | | 02:03 |
|Click '''Finish.''' The project is created in your IDE. | |Click '''Finish.''' The project is created in your IDE. | ||
|- | |- | ||
| − | | 02 | + | | 02:08 |
|In this section, we will create the '''Jframe form''' and add a '''Jlabel''' to the form. | |In this section, we will create the '''Jframe form''' and add a '''Jlabel''' to the form. | ||
|- | |- | ||
| − | | 02 | + | | 02:14 |
|Let us first create the '''Jframe form. ''' | |Let us first create the '''Jframe form. ''' | ||
|- | |- | ||
| − | | 02 | + | | 02:17 |
|In the '''Projects''' window, expand the ''' ImageDisplayApp''' node. | |In the '''Projects''' window, expand the ''' ImageDisplayApp''' node. | ||
|- | |- | ||
| − | | 02 | + | | 02:23 |
|Right-click on the '''Source Packages''' node and choose ''' New''', '''Jframe form.''' | |Right-click on the '''Source Packages''' node and choose ''' New''', '''Jframe form.''' | ||
|- | |- | ||
| − | |02 | + | |02:30 |
|In the '''Class Name''' field, type '''ImageDisplay. ''' | |In the '''Class Name''' field, type '''ImageDisplay. ''' | ||
|- | |- | ||
| − | |02 | + | |02:37 |
| In the '''Package''' field, type '''org.me.myimageapp.''' | | In the '''Package''' field, type '''org.me.myimageapp.''' | ||
|- | |- | ||
| − | |02 | + | |02:45 |
| And Click '''Finish. ''' | | And Click '''Finish. ''' | ||
|- | |- | ||
| − | |02 | + | |02:48 |
|Now let us add the '''Jlabel. ''' | |Now let us add the '''Jlabel. ''' | ||
|- | |- | ||
| − | | 02 | + | | 02:52 |
|In the '''Palette,''' on the right hand side of the IDE, select the '''Label''' component and drag it to the '''Jframe.''' | |In the '''Palette,''' on the right hand side of the IDE, select the '''Label''' component and drag it to the '''Jframe.''' | ||
|- | |- | ||
| − | | 03 | + | | 03:01 |
|For now, your form should look something like this. | |For now, your form should look something like this. | ||
| Line 175: | Line 175: | ||
|- | |- | ||
| − | |03 | + | |03:06 |
|When you use images or other resources in an application, typically you create a separate Java package for the resource. | |When you use images or other resources in an application, typically you create a separate Java package for the resource. | ||
| Line 182: | Line 182: | ||
|- | |- | ||
| − | |03 | + | |03:15 |
|On your local file system, a package corresponds with a folder. | |On your local file system, a package corresponds with a folder. | ||
| Line 190: | Line 190: | ||
|- | |- | ||
| − | | 03 | + | | 03:19 |
|In the '''Projects''' window, right-click the '''org.me.myimageapp''' node and choose '''New > Java Package.''' | |In the '''Projects''' window, right-click the '''org.me.myimageapp''' node and choose '''New > Java Package.''' | ||
| Line 197: | Line 197: | ||
|- | |- | ||
| − | | 03 | + | | 03:30 |
|In the '''New Package Wizard,''' add '''.resources''' to '''org.me.myimageapp.''' | |In the '''New Package Wizard,''' add '''.resources''' to '''org.me.myimageapp.''' | ||
| Line 204: | Line 204: | ||
|- | |- | ||
| − | | 03 | + | | 03:40 |
|So the new package is now called '''org.me.myimageapp.resources.''' | |So the new package is now called '''org.me.myimageapp.resources.''' | ||
| Line 211: | Line 211: | ||
|- | |- | ||
| − | | 03 | + | | 03:47 |
|Click '''Finish. ''' | |Click '''Finish. ''' | ||
| Line 218: | Line 218: | ||
|- | |- | ||
| − | | 03 | + | | 03:49 |
|In the '''Projects''' window, you should see the image appear within the '''org.me.myimageapp.resources''' package, when you add the image. | |In the '''Projects''' window, you should see the image appear within the '''org.me.myimageapp.resources''' package, when you add the image. | ||
| Line 225: | Line 225: | ||
|- | |- | ||
| − | | 03 | + | | 03:59 |
|In this application, the image will be embedded within a '''Jlabel''' component. | |In this application, the image will be embedded within a '''Jlabel''' component. | ||
| Line 231: | Line 231: | ||
|- | |- | ||
| − | | 04 | + | | 04:04 |
| Let us now add the image to the label. | | Let us now add the image to the label. | ||
|- | |- | ||
| − | | 04 | + | | 04:08 |
|In the '''GUI designer''', select the label that you have added to your form. | |In the '''GUI designer''', select the label that you have added to your form. | ||
| Line 244: | Line 244: | ||
|- | |- | ||
| − | | 04 | + | | 04:14 |
|In the '''Properties''' window, below the palette, on the right hand side of the window, scroll to the '''Icon''' property. | |In the '''Properties''' window, below the palette, on the right hand side of the window, scroll to the '''Icon''' property. | ||
| Line 251: | Line 251: | ||
|- | |- | ||
| − | | 04 | + | | 04:23 |
| Click the '''ellipsis (...)''' or the three dots on the right side. | | Click the '''ellipsis (...)''' or the three dots on the right side. | ||
| Line 259: | Line 259: | ||
|- | |- | ||
| − | | 04 | + | | 04:30 |
|In the '''Icon Property''' dialog box, click '''Import to Project.''' | |In the '''Icon Property''' dialog box, click '''Import to Project.''' | ||
|- | |- | ||
| − | | 04 | + | | 04:34 |
|In the file chooser, navigate to the folder that contains your image that you want to use. | |In the file chooser, navigate to the folder that contains your image that you want to use. | ||
|- | |- | ||
| − | | 04 | + | | 04:42 |
|Click '''Next. ''' | |Click '''Next. ''' | ||
|- | |- | ||
| − | | 04 | + | | 04:45 |
|In the '''Select Target Folder''' page of the wizard, select the '''Resources''' folder. | |In the '''Select Target Folder''' page of the wizard, select the '''Resources''' folder. | ||
|- | |- | ||
| − | | 04 | + | | 04:49 |
|And click '''Finish. ''' | |And click '''Finish. ''' | ||
|- | |- | ||
| − | | 04 | + | | 04:52 |
|After you click '''Finish,''' the IDE copies the image to your project. | |After you click '''Finish,''' the IDE copies the image to your project. | ||
|- | |- | ||
| − | | 04 | + | | 04:57 |
|Therefore, when you build and run the application, the image is included in the distributable '''JAR''' file. | |Therefore, when you build and run the application, the image is included in the distributable '''JAR''' file. | ||
| Line 295: | Line 295: | ||
|- | |- | ||
| − | | 05 | + | | 05:07 |
|Click '''OK''' here. | |Click '''OK''' here. | ||
| Line 301: | Line 301: | ||
|- | |- | ||
| − | | 05 | + | | 05:11 |
| And right click on your project node and select ''' Clean and Build''' option. | | And right click on your project node and select ''' Clean and Build''' option. | ||
|- | |- | ||
| − | | 05 | + | | 05:18 |
|You can now go to the '''Files''' menu, and under the '''build''' folder, | |You can now go to the '''Files''' menu, and under the '''build''' folder, | ||
| Line 312: | Line 312: | ||
|- | |- | ||
| − | | 05 | + | | 05:29 |
| under '''dist''' folder, you can see the '''jar''' file. | | under '''dist''' folder, you can see the '''jar''' file. | ||
| Line 318: | Line 318: | ||
|- | |- | ||
| − | | | + | | 05:33 |
|It generates the code in the imagedisplay class to access the image. | |It generates the code in the imagedisplay class to access the image. | ||
| Line 324: | Line 324: | ||
|- | |- | ||
| − | | 05 | + | | 05:38 |
|It also displays your image on the label in the '''Design''' view of your form. | |It also displays your image on the label in the '''Design''' view of your form. | ||
|- | |- | ||
| − | | 05 | + | | 05:43 |
|At this point, you can do some simple things to improve the appearance of the form. | |At this point, you can do some simple things to improve the appearance of the form. | ||
| Line 336: | Line 336: | ||
|- | |- | ||
| − | | 05 | + | | 05:48 |
|In the '''Properties''' window, select the '''Text''' property | |In the '''Properties''' window, select the '''Text''' property | ||
|- | |- | ||
| − | | 05 | + | | 05:56 |
|and delete '''jLabel1.''' | |and delete '''jLabel1.''' | ||
| Line 348: | Line 348: | ||
|- | |- | ||
| − | | 06 | + | | 06:04 |
|That value was generated by the '''GUI Builder''' as display text for the label. | |That value was generated by the '''GUI Builder''' as display text for the label. | ||
| Line 354: | Line 354: | ||
|- | |- | ||
| − | | 06 | + | | 06:10 |
|However, you are using the label to display an image rather than text. | |However, you are using the label to display an image rather than text. | ||
| Line 361: | Line 361: | ||
|- | |- | ||
| − | | 06 | + | | 06:15 |
|So this text is not needed. | |So this text is not needed. | ||
| Line 368: | Line 368: | ||
|- | |- | ||
| − | | 06 | + | | 06:18 |
|Now let us drag the '''label''' to center it on the form. | |Now let us drag the '''label''' to center it on the form. | ||
| Line 374: | Line 374: | ||
|- | |- | ||
| − | | 06 | + | | 06:26 |
|In the '''GUI Designer,''' click the ''' Source''' tab. | |In the '''GUI Designer,''' click the ''' Source''' tab. | ||
| Line 380: | Line 380: | ||
|- | |- | ||
| − | | 06 | + | | 06:30 |
|Scroll down to the line that says ''' Generated Code.''' | |Scroll down to the line that says ''' Generated Code.''' | ||
|- | |- | ||
| − | | 06 | + | | 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. | | And click the plus sign (+) to the left of the ''' Generated Code''' line to display the code that the ''' GUI Designer''' has generated. | ||
|- | |- | ||
| − | | 06 | + | | 06:42 |
|Here, the keyline is this. | |Here, the keyline is this. | ||
| Line 395: | Line 395: | ||
|- | |- | ||
| − | | 06 | + | | 06:49 |
|Since you have used the ''' Property editor''' for ''' jLabel1'''s icon property, the '''IDE''' has generated the '''setIcon''' method. | |Since you have used the ''' Property editor''' for ''' jLabel1'''s icon property, the '''IDE''' has generated the '''setIcon''' method. | ||
| Line 401: | Line 401: | ||
|- | |- | ||
| − | | 06 | + | | 06:57 |
|The parameter of that method contains a call to the ''' getResource()''' method on an anonymous inner class of '''ImageIcon. ''' | |The parameter of that method contains a call to the ''' getResource()''' method on an anonymous inner class of '''ImageIcon. ''' | ||
| Line 407: | Line 407: | ||
|- | |- | ||
| − | | 07 | + | | 07:10 |
|Once your image has been added, in the ''' Design''' view right-click on the image. | |Once your image has been added, in the ''' Design''' view right-click on the image. | ||
| Line 415: | Line 415: | ||
|- | |- | ||
| − | | 07 | + | | 07:19 |
|Click on '''Events > Mouse > mouseClicked.''' | |Click on '''Events > Mouse > mouseClicked.''' | ||
| Line 421: | Line 421: | ||
|- | |- | ||
| − | | 07 | + | | 07:24 |
|The view is switched to the '''Source''' mode. | |The view is switched to the '''Source''' mode. | ||
| Line 427: | Line 427: | ||
|- | |- | ||
| − | | 07 | + | | 07:28 |
|Here you can add the code to customize your action on a mouse click. | |Here you can add the code to customize your action on a mouse click. | ||
| Line 433: | Line 433: | ||
|- | |- | ||
| − | | 07 | + | | 07:33 |
|Let me add a few lines of code to generate a '''pop-up''' when the image is clicked in the GUI. | |Let me add a few lines of code to generate a '''pop-up''' when the image is clicked in the GUI. | ||
| Line 440: | Line 440: | ||
|- | |- | ||
| − | | 08 | + | | 08:00 |
|I have now entered a few lines of code to generate the pop-up. | |I have now entered a few lines of code to generate the pop-up. | ||
| Line 448: | Line 448: | ||
|- | |- | ||
| − | | 08 | + | | 08:05 |
|First I have created a new ''' Jframe''' for the pop-up. | |First I have created a new ''' Jframe''' for the pop-up. | ||
| Line 455: | Line 455: | ||
|- | |- | ||
| − | | 08 | + | | 08:12 |
|And I have set the default close operation. | |And I have set the default close operation. | ||
| Line 462: | Line 462: | ||
|- | |- | ||
| − | | 08 | + | | 08:15 |
|And finally provided the text for the '''pop-up. ''' | |And finally provided the text for the '''pop-up. ''' | ||
|- | |- | ||
| − | | 08 | + | | 08:24 |
|After adding these lines of code, let us import the necessary packages by adding two statements at the beginning of the file. | |After adding these lines of code, let us import the necessary packages by adding two statements at the beginning of the file. | ||
|- | |- | ||
| − | | 08 | + | | 08:36 |
|Include: ''' import javax.swing.*; ''' | |Include: ''' import javax.swing.*; ''' | ||
| Line 478: | Line 478: | ||
|- | |- | ||
| − | | 08 | + | | 08:45 |
|and ''' import java.awt.*; ''' | |and ''' import java.awt.*; ''' | ||
|- | |- | ||
| − | | 08 | + | | 08:53 |
|This will import the necessary packages required for this program. | |This will import the necessary packages required for this program. | ||
|- | |- | ||
| − | | 08 | + | | 08:59 |
|Let us now build and run the application. | |Let us now build and run the application. | ||
| Line 493: | Line 493: | ||
|- | |- | ||
| − | | 09 | + | | 09:02 |
|We have generated the code for accessing and displaying the image. | |We have generated the code for accessing and displaying the image. | ||
| Line 501: | Line 501: | ||
|- | |- | ||
| − | | 09 | + | | 09:07 |
|Let us build and run the application to ensure that the image is accessed. | |Let us build and run the application to ensure that the image is accessed. | ||
| Line 508: | Line 508: | ||
|- | |- | ||
| − | | 09 | + | | 09:12 |
|First, we need to set the project's ''' Main class.''' | |First, we need to set the project's ''' Main class.''' | ||
| Line 514: | Line 514: | ||
|- | |- | ||
| − | | 09 | + | | 09:16 |
|When you set the ''' Main class''', the ''' IDE''' knows which class to run when you run the project. | |When you set the ''' Main class''', the ''' IDE''' knows which class to run when you run the project. | ||
| Line 520: | Line 520: | ||
|- | |- | ||
| − | | 09 | + | | 09:21 |
|In addition, this ensures that the '''Main class''' element in the application's '''JAR''' file is generated when you build the application. | |In addition, this ensures that the '''Main class''' element in the application's '''JAR''' file is generated when you build the application. | ||
|- | |- | ||
| − | | 09 | + | | 09:33 |
|Here right-click on the '''ImageDisplayApp''' project's '''Node''' in the Projects window, and choose '''Properties. ''' | |Here right-click on the '''ImageDisplayApp''' project's '''Node''' in the Projects window, and choose '''Properties. ''' | ||
| Line 531: | Line 531: | ||
|- | |- | ||
| − | | 09 | + | | 09:41 |
|In the '''Project Properties''' dialog box, select the '''Run''' category on the left side. | |In the '''Project Properties''' dialog box, select the '''Run''' category on the left side. | ||
| Line 537: | Line 537: | ||
|- | |- | ||
| − | | 09 | + | | 09:47 |
|Click the '''Browse''' button, that is next to the '''Main Class''' field. | |Click the '''Browse''' button, that is next to the '''Main Class''' field. | ||
| Line 543: | Line 543: | ||
|- | |- | ||
| − | | 09 | + | | 09:51 |
|Select ''' org.me.myimageapp.ImageDisplay''' and click on ''' Select Main Class''' | |Select ''' org.me.myimageapp.ImageDisplay''' and click on ''' Select Main Class''' | ||
| Line 549: | Line 549: | ||
|- | |- | ||
| − | | 10 | + | | 10:01 |
|Say OK here. | |Say OK here. | ||
| Line 555: | Line 555: | ||
|- | |- | ||
| − | | 10 | + | | 10:05 |
|Now right-click on the ''' Project node,''' and select '''Clean & Build. ''' | |Now right-click on the ''' Project node,''' and select '''Clean & Build. ''' | ||
| Line 561: | Line 561: | ||
|- | |- | ||
| − | | 10 | + | | 10:11 |
|You can view the '''Build ''' properties of the application in the ''' Files''' window. | |You can view the '''Build ''' properties of the application in the ''' Files''' window. | ||
| Line 567: | Line 567: | ||
|- | |- | ||
| − | | 10 | + | | 10:20 |
|The '''Build''' folder contains the compiled class. | |The '''Build''' folder contains the compiled class. | ||
| Line 573: | Line 573: | ||
|- | |- | ||
| − | | 10 | + | | 10:23 |
|The '''dist''' folder contains an executable JAR file that contains the compiled class and the image. | |The '''dist''' folder contains an executable JAR file that contains the compiled class and the image. | ||
| Line 579: | Line 579: | ||
|- | |- | ||
| − | | 10 | + | | 10:32 |
|Now choose '''Run''' from the tool bar. | |Now choose '''Run''' from the tool bar. | ||
| Line 585: | Line 585: | ||
|- | |- | ||
| − | | 10 | + | | 10:34 |
|Our output window opens with the image. | |Our output window opens with the image. | ||
| Line 591: | Line 591: | ||
|- | |- | ||
| − | | 10 | + | | 10:39 |
|I will click on this image now. | |I will click on this image now. | ||
| Line 597: | Line 597: | ||
|- | |- | ||
| − | | 10 | + | | 10:42 |
|And you can see the pop-up at the top, which shows the description of the image. | |And you can see the pop-up at the top, which shows the description of the image. | ||
| Line 603: | Line 603: | ||
|- | |- | ||
| − | | 10 | + | | 10:50 |
|Now, time for the assignment! | |Now, time for the assignment! | ||
| Line 609: | Line 609: | ||
|- | |- | ||
| − | | 10 | + | | 10:54 |
|Create another GUI with four images, similar to the demonstration shown in this tutorial, | |Create another GUI with four images, similar to the demonstration shown in this tutorial, | ||
| Line 615: | Line 615: | ||
|- | |- | ||
| − | | 11 | + | | 11:01 |
|For each of the image, specify different events such as '''keyboard event, mouse-motion event, mouse-click event, mouse-wheel event''' . | |For each of the image, specify different events such as '''keyboard event, mouse-motion event, mouse-click event, mouse-wheel event''' . | ||
| Line 621: | Line 621: | ||
|- | |- | ||
| − | | 11 | + | | 11:12 |
|I have already created the assignment. | |I have already created the assignment. | ||
| Line 627: | Line 627: | ||
|- | |- | ||
| − | | 11 | + | | 11:17 |
|Let us run the assignment project. | |Let us run the assignment project. | ||
|- | |- | ||
| − | | 11 | + | | 11:20 |
| Your assignment should look similar to this. | | Your assignment should look similar to this. | ||
| Line 639: | Line 639: | ||
|- | |- | ||
| − | | 11 | + | | 11:26 |
|I have created keyboard-events and mouse events for my assignment here. | |I have created keyboard-events and mouse events for my assignment here. | ||
| Line 645: | Line 645: | ||
|- | |- | ||
| − | | 11 | + | | 11:34 |
|So, to summarize, | |So, to summarize, | ||
| Line 651: | Line 651: | ||
|- | |- | ||
| − | | 11 | + | | 11:36 |
|we have, created a Jframe form | |we have, created a Jframe form | ||
| Line 657: | Line 657: | ||
|- | |- | ||
| − | | 11 | + | | 11:39 |
|added a package for the image | |added a package for the image | ||
| Line 663: | Line 663: | ||
|- | |- | ||
| − | | 11 | + | | 11:41 |
|displayed the image on the label | |displayed the image on the label | ||
| Line 669: | Line 669: | ||
|- | |- | ||
| − | | 11 | + | | 11:44 |
|and also created mouse events and pop-ups | |and also created mouse events and pop-ups | ||
| Line 676: | Line 676: | ||
|- | |- | ||
| − | | 11 | + | | 11:49 |
|Watch the video available at the link shown on the screen. | |Watch the video available at the link shown on the screen. | ||
| Line 682: | Line 682: | ||
|- | |- | ||
| − | | 11 | + | | 11:53 |
|It summarizes the Spoken Tutorial project. | |It summarizes the Spoken Tutorial project. | ||
| Line 688: | Line 688: | ||
|- | |- | ||
| − | | 11 | + | | 11:56 |
|If you do not have good bandwidth, you can download and watch it. | |If you do not have good bandwidth, you can download and watch it. | ||
| Line 694: | Line 694: | ||
|- | |- | ||
| − | | 12 | + | | 12:02 |
|The Spoken Tutorial project team conduct workshops using Spoken Tutorials. | |The Spoken Tutorial project team conduct workshops using Spoken Tutorials. | ||
| Line 701: | Line 701: | ||
|- | |- | ||
| − | | 12 | + | | 12:07 |
|Gives certificates to those who pass an online test. | |Gives certificates to those who pass an online test. | ||
| Line 708: | Line 708: | ||
|- | |- | ||
| − | | 12 | + | | 12:11 |
|For more details please write to contact@spoken-tutorial.org | |For more details please write to contact@spoken-tutorial.org | ||
| Line 715: | Line 715: | ||
|- | |- | ||
| − | | 12 | + | | 12:19 |
|Spoken Tutorial Project is a part of the Talk to a Teacher Project | |Spoken Tutorial Project is a part of the Talk to a Teacher Project | ||
| Line 721: | Line 721: | ||
|- | |- | ||
| − | | 12 | + | | 12:23 |
| It is Supported by the National Mission on education through ICT, MHRD, Government of India | | It is Supported by the National Mission on education through ICT, MHRD, Government of India | ||
| Line 727: | Line 727: | ||
|- | |- | ||
| − | | 12 | + | | 12:30 |
|More information on this mission is available at spoken-tutorial.org/NMEICT-Intro | |More information on this mission is available at spoken-tutorial.org/NMEICT-Intro | ||
| Line 733: | Line 733: | ||
|- | |- | ||
| − | | 12 | + | | 12:42 |
|This tutorial has been contributed by IT for Change | |This tutorial has been contributed by IT for Change | ||
| Line 740: | Line 740: | ||
|- | |- | ||
| − | | 12 | + | | 12:46 |
|Thank you for joining us. | |Thank you for joining us. | ||
Revision as of 12:20, 10 July 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. |
| 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 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. |
