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. ''' |-…') |
Sandhya.np14 (Talk | contribs) |
||
| (10 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
{| Border=1 | {| Border=1 | ||
| − | | | + | | '''Time''' |
| − | + | |'''Narration''' | |
| − | | | + | |
| − | + | ||
|- | |- | ||
| − | | 00 | + | | 00:01 |
| − | | | + | |Hi everyone.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'''. |
|- | |- | ||
| − | |00 | + | |00:15 |
| − | |We assume that you | + | |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'''. |
|- | |- | ||
| − | | 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.''' |
| − | + | ||
|- | |- | ||
| − | |00 | + | |00:39 |
| − | |For this demonstration, I am using the Linux Operating System Ubuntu | + | |For this demonstration, I am using the '''Linux Operating System Ubuntu''' version '''11.04''' and '''Netbeans IDE''' version '''7.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:15 | |
| − | |01 | + | |* Create the application form |
| − | + | ||
| − | |Create the application form | + | |
| − | + | ||
| − | + | ||
|- | |- | ||
| − | + | |01:18 | |
| − | |01 | + | |* Add a '''package''' for the image |
| − | |Add a package for the image | + | |
| − | + | ||
|- | |- | ||
| − | + | | 01:20 | |
| − | | 01 | + | |* Display the image on the '''Label''' |
| − | + | ||
| − | |Display the image on the Label | + | |
| − | + | ||
|- | |- | ||
| − | + | |01:22 | |
| − | |01 | + | |* Create '''mouse-event'''s and '''pop-up'''s |
| − | + | ||
| − | |Create mouse- | + | |
|- | |- | ||
| − | + | |01:25 | |
| − | |01 | + | |* '''Build''' and '''run''' the application. |
| − | + | ||
| − | |Build and run the application | + | |
|- | |- | ||
| − | + | |01:28 | |
| − | |01 | + | |Now, let us switch to the '''IDE''' to create our sample application. |
| − | + | ||
| − | |Now let us switch to the '''IDE''' to create our sample application. | + | |
| − | + | ||
|- | |- | ||
| − | + | |01:33 | |
| − | |01 | + | |
| − | + | ||
|From the '''File''' menu, choose '''New Project. ''' | |From the '''File''' menu, choose '''New Project. ''' | ||
| − | |||
|- | |- | ||
| − | + | |01:37 | |
| − | |01 | + | |Under '''Categories ''', select '''Java'''; under '''Projects''' select '''Java Application''' and click '''Next. ''' |
| − | + | ||
| − | |Under '''Categories ''', select '''Java''' | + | |
|- | |- | ||
| − | + | |01:46 | |
| − | |01 | + | | In the '''Project Name''' field, type: '''ImageDisplayApp'''. |
| − | + | ||
| − | | In the '''Project Name''' field, type '''ImageDisplayApp | + | |
| − | + | ||
|- | |- | ||
| − | + | | 01:54 | |
| − | | 01 | + | |Clear the ''' Create Main Class''' check-box. |
| − | + | ||
| − | |Clear the ''' Create Main Class''' | + | |
| − | + | ||
|- | |- | ||
| − | + | | 01:58 | |
| − | | 01 | + | |Make sure that the '''Set as Main Project''' check-box is selected. |
| − | + | ||
| − | |Make sure that the '''Set as Main Project''' | + | |
|- | |- | ||
| − | | 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 | + | |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.''' |
|- | |- | ||
| − | |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. |
| − | + | ||
|- | |- | ||
| − | + | |03:06 | |
| − | |03 | + | |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. | + | |
| − | + | ||
|- | |- | ||
| − | + | |03:15 | |
| − | |03 | + | |
| − | + | ||
|On your local file system, a package corresponds with a folder. | |On your local file system, a package corresponds with a folder. | ||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 03:19 | |
| − | | 03 | + | |
| − | + | ||
|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.''' | ||
| − | |||
|- | |- | ||
| − | + | | 03:30 | |
| − | | 03 | + | |In the '''New Package Wizard,''' add '.resources' to 'org.me.myimageapp'. |
| − | + | ||
| − | |In the '''New Package Wizard,''' add | + | |
| − | + | ||
|- | |- | ||
| − | + | | 03:40 | |
| − | | 03 | + | |So, the new package is now called '''org.me.myimageapp.resources'''. |
| − | + | ||
| − | |So the new package is now called '''org.me.myimageapp.resources | + | |
| − | + | ||
|- | |- | ||
| − | + | | 03:47 | |
| − | | 03 | + | |
| − | + | ||
|Click '''Finish. ''' | |Click '''Finish. ''' | ||
| − | |||
|- | |- | ||
| − | + | | 03:49 | |
| − | | 03 | + | |
| − | + | ||
|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. | ||
| − | |||
|- | |- | ||
| − | + | | 03:59 | |
| − | | 03 | + | |
|In this application, the image will be embedded within a '''Jlabel''' component. | |In this application, the image will be embedded within a '''Jlabel''' component. | ||
| − | |||
| − | |||
|- | |- | ||
| − | | 04 | + | | 04:04 |
| − | | Let us now add the image to the label. | + | | Let us now add the image to the '''label'''. |
|- | |- | ||
| − | + | | 04:08 | |
| − | | 04 | + | |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. | + | |
| − | + | ||
| − | + | ||
| − | + | ||
|- | |- | ||
| − | + | | 04:14 | |
| − | | 04 | + | |In the '''Properties''' window, below the '''Palette''', on the right hand side of the window, scroll down to the '''icon''' property. |
| − | + | ||
| − | |In the '''Properties''' window, below the | + | |
| − | + | ||
|- | |- | ||
| − | + | | 04:23 | |
| − | | 04 | + | |
| − | + | ||
| Click the '''ellipsis (...)''' or the three dots on the right side. | | Click the '''ellipsis (...)''' or the three dots on the right side. | ||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 04:30 | |
| − | | 04 | + | |In the '''icon Property''' dialog-box, click '''Import to Project.''' |
| − | + | ||
| − | |In the ''' | + | |
|- | |- | ||
| − | | 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:42 | |
| − | | 04 | + | |
| − | + | ||
|Click '''Next. ''' | |Click '''Next. ''' | ||
|- | |- | ||
| − | | 04 | + | | 04:45 |
| − | |In the '''Select | + | |In the '''Select target folder''' page of the wizard, select the '''resources''' folder |
|- | |- | ||
| − | | 04 | + | | 04:49 |
| − | | | + | |and click '''Finish. ''' |
|- | |- | ||
| + | | 04:52 | ||
| + | |After you click '''Finish,''' the IDE copies the image to your project. | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 04:57 | |
| − | | 04 | + | |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. | + | |
| − | + | ||
|- | |- | ||
| − | + | | 05:07 | |
| − | | 05 | + | |
| − | + | ||
|Click '''OK''' here. | |Click '''OK''' here. | ||
|- | |- | ||
| + | | 05:11 | ||
| + | | And right-click on your project node and select ''' Clean and Build''' option. | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 05:18 | |
| − | | 05 | + | |You can now go to the '''Files''' menu and under the '''build''' folder, |
| − | + | ||
| − | |You can now go to the Files | + | |
|- | |- | ||
| − | + | | 05:29 | |
| − | | 05 | + | |
| − | + | ||
| under '''dist''' folder, you can see the '''jar''' file. | | under '''dist''' folder, you can see the '''jar''' file. | ||
|- | |- | ||
| − | + | | 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. | + | |
|- | |- | ||
| − | + | | 05:38 | |
| − | | 05 | + | |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'''. |
| − | + | ||
| − | + | ||
|- | |- | ||
| + | | 05:48 | ||
| + | |In the '''Properties''' window, select the '''Text''' property | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 05:56 | |
| − | | 05 | + | |
| − | + | ||
|and delete '''jLabel1.''' | |and delete '''jLabel1.''' | ||
| − | |||
|- | |- | ||
| − | + | | 06:04 | |
| − | | 06 | + | |
| − | + | ||
|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. | ||
|- | |- | ||
| − | + | | 06:10 | |
| − | | 06 | + | |
| − | + | ||
|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. | ||
| − | |||
|- | |- | ||
| − | + | | 06:15 | |
| − | | 06 | + | |So, this text is not needed. |
| − | + | ||
| − | |So this text is not needed. | + | |
| − | + | ||
|- | |- | ||
| − | + | | 06:18 | |
| − | | 06 | + | |Now, let us drag the '''label''' to center it on the '''form'''. |
| − | + | ||
| − | |Now let us drag the '''label''' to center it on the form. | + | |
|- | |- | ||
| − | + | | 06:26 | |
| − | | 06 | + | |
| − | + | ||
|In the '''GUI Designer,''' click the ''' Source''' tab. | |In the '''GUI Designer,''' click the ''' Source''' tab. | ||
| + | |- | ||
| + | | 06:30 | ||
| + | |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. | ||
| − | |||
|- | |- | ||
| − | + | | 06:49 | |
| − | | 06 | + | |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. | + | |
|- | |- | ||
| − | + | | 06:57 | |
| − | | 06 | + | |
| − | + | ||
|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. ''' | ||
|- | |- | ||
| − | + | | 07:10 | |
| − | | 07 | + | |
| − | + | ||
|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. | ||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 07:19 | |
| − | | 07 | + | |
| − | + | ||
|Click on '''Events > Mouse > mouseClicked.''' | |Click on '''Events > Mouse > mouseClicked.''' | ||
|- | |- | ||
| − | + | | 07:24 | |
| − | | 07 | + | |
| − | + | ||
|The view is switched to the '''Source''' mode. | |The view is switched to the '''Source''' mode. | ||
|- | |- | ||
| − | + | | 07:28 | |
| − | | 07 | + | |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. | + | |
|- | |- | ||
| − | + | | 07:33 | |
| − | | 07 | + | |
| − | + | ||
|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. | ||
| − | |||
|- | |- | ||
| − | + | | 08:00 | |
| − | | 08 | + | |
| − | + | ||
|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. | ||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 08:05 | |
| − | | 08 | + | |First, I have created a new ''' Jframe''' for the pop-up |
| − | + | ||
| − | |First I have created a new ''' Jframe''' for the pop-up | + | |
| − | + | ||
|- | |- | ||
| − | + | | 08:12 | |
| − | | 08 | + | |and I have set the '''defaultCloseOperation'''. |
| − | + | ||
| − | | | + | |
| − | + | ||
|- | |- | ||
| + | | 08:15 | ||
| + | |And finally, provided the text for the '''pop-up. ''' | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 08:24 | |
| − | | 08 | + | |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.*; ''' | ||
| − | |||
| − | |||
|- | |- | ||
| − | | 08 | + | | 08:45 |
|and ''' import java.awt.*; ''' | |and ''' import java.awt.*; ''' | ||
| + | |- | ||
| + | | 08:53 | ||
| + | |This will import the necessary '''package'''s required for this program. | ||
|- | |- | ||
| − | | 08 | + | | 08:59 |
| − | + | |Let us now '''build''' and '''run''' the '''application'''. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | |Let us now build and run the application. | + | |
|- | |- | ||
| − | + | | 09:02 | |
| − | | 09 | + | |
| − | + | ||
|We have generated the code for accessing and displaying the image. | |We have generated the code for accessing and displaying the image. | ||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 09:07 | |
| − | | 09 | + | |
| − | + | ||
|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. | ||
| − | |||
|- | |- | ||
| − | + | | 09:12 | |
| − | | 09 | + | |
| − | + | ||
|First, we need to set the project's ''' Main class.''' | |First, we need to set the project's ''' Main class.''' | ||
|- | |- | ||
| − | + | | 09:16 | |
| − | | 09 | + | |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. | + | |
|- | |- | ||
| + | | 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 | |
| − | | 09 | + | |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 | + | |
|- | |- | ||
| − | + | | 09:41 | |
| − | | 09 | + | |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. | + | |
|- | |- | ||
| − | + | | 09:47 | |
| − | | 09 | + | |
| − | + | ||
|Click the '''Browse''' button, that is next to the '''Main Class''' field. | |Click the '''Browse''' button, that is next to the '''Main Class''' field. | ||
|- | |- | ||
| − | + | | 09:51 | |
| − | | 09 | + | |
| − | + | ||
|Select ''' org.me.myimageapp.ImageDisplay''' and click on ''' Select Main Class''' | |Select ''' org.me.myimageapp.ImageDisplay''' and click on ''' Select Main Class''' | ||
|- | |- | ||
| − | + | | 10:01 | |
| − | | 10 | + | |Say '''OK''' here. |
| − | + | ||
| − | |Say OK here. | + | |
|- | |- | ||
| − | + | | 10:05 | |
| − | | 10 | + | |Now, right-click on the ''' Project node''' and select '''Clean & Build. ''' |
| − | + | ||
| − | |Now right-click on the ''' Project node | + | |
|- | |- | ||
| − | + | | 10:11 | |
| − | | 10 | + | |
| − | + | ||
|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. | ||
|- | |- | ||
| − | + | | 10:20 | |
| − | | 10 | + | |The '''Build''' folder contains the compiled '''class'''. |
| − | + | ||
| − | |The '''Build''' folder contains the compiled class. | + | |
|- | |- | ||
| − | + | | 10:23 | |
| − | | 10 | + | |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. | + | |
|- | |- | ||
| − | + | | 10:32 | |
| − | | 10 | + | |
| − | + | ||
|Now choose '''Run''' from the tool bar. | |Now choose '''Run''' from the tool bar. | ||
|- | |- | ||
| − | + | | 10:34 | |
| − | | 10 | + | |Our '''output''' window opens with the image. |
| − | + | ||
| − | |Our output window opens with the image. | + | |
|- | |- | ||
| − | + | | 10:39 | |
| − | | 10 | + | |
| − | + | ||
|I will click on this image now. | |I will click on this image now. | ||
|- | |- | ||
| − | + | | 10:42 | |
| − | | 10 | + | |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 | + | |
|- | |- | ||
| − | + | | 10:50 | |
| − | | 10 | + | |
| − | + | ||
|Now, time for the assignment! | |Now, time for the assignment! | ||
|- | |- | ||
| − | + | | 10:54 | |
| − | | 10 | + | |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 | + | |
|- | |- | ||
| − | + | | 11:01 | |
| − | | 11 | + | |For each of the images, specify different events such as '''keyboard event, mouse-motion event, mouse-click event, mouse-wheel event'''. |
| − | + | ||
| − | |For each of the | + | |
|- | |- | ||
| − | + | | 11:12 | |
| − | | 11 | + | |
| − | + | ||
|I have already created the assignment. | |I have already created the assignment. | ||
|- | |- | ||
| + | | 11:17 | ||
| + | |Let us '''run''' the assignment project. | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 11:20 | |
| − | | 11 | + | |Your assignment should look similar to this. |
| − | + | ||
| − | | Your assignment should look similar to this. | + | |
| − | + | ||
|- | |- | ||
| − | + | | 11:26 | |
| − | | 11 | + | |I have created keyboard-events and mouse-events for my assignment here. |
| − | + | ||
| − | |I have created keyboard-events and mouse events for my assignment here. | + | |
|- | |- | ||
| − | + | | 11:34 | |
| − | | 11 | + | |So, to summarize- |
| − | + | ||
| − | |So, to summarize | + | |
|- | |- | ||
| − | + | | 11:36 | |
| − | | 11 | + | |we have created a '''Jframe form''', |
| − | + | ||
| − | |we have | + | |
|- | |- | ||
| − | + | | 11:39 | |
| − | | 11 | + | |added a package for the image, |
| − | + | ||
| − | |added a package for the image | + | |
|- | |- | ||
| − | + | | 11:41 | |
| − | | 11 | + | |displayed the image on the label, |
| − | + | ||
| − | |displayed the image on the label | + | |
|- | |- | ||
| − | + | | 11:44 | |
| − | | 11 | + | |and also created mouse-events and pop-ups. |
| − | + | ||
| − | |and also created mouse events and pop-ups | + | |
| − | + | ||
|- | |- | ||
| − | + | | 11:49 | |
| − | | 11 | + | |Watch the video available at the '''link''' shown on the screen. |
| − | + | ||
| − | |Watch the video available at the link shown on the screen. | + | |
|- | |- | ||
| − | + | | 11:53 | |
| − | | 11 | + | |It summarizes the '''Spoken Tutorial''' project. |
| − | + | ||
| − | |It summarizes the Spoken Tutorial project. | + | |
|- | |- | ||
| − | + | | 11:56 | |
| − | | 11 | + | |
| − | + | ||
|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. | ||
|- | |- | ||
| − | + | | 12:02 | |
| − | | 12 | + | |The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials. |
| − | + | ||
| − | |The Spoken Tutorial project team | + | |
| − | + | ||
|- | |- | ||
| − | + | | 12:07 | |
| − | | 12 | + | |* Gives certificates to those who pass an online test. |
| − | + | ||
| − | |Gives certificates to those who pass an online test. | + | |
| − | + | ||
|- | |- | ||
| − | + | | 12:11 | |
| − | | 12 | + | |For more details, please write to:'''contact@spoken-tutorial.org''' |
| − | + | ||
| − | |For more details please write to contact@spoken-tutorial.org | + | |
| − | + | ||
|- | |- | ||
| − | + | | 12:19 | |
| − | | 12 | + | |'''Spoken Tutorial''' project is a part of the '''Talk to a Teacher''' project. |
| − | + | ||
| − | |Spoken Tutorial | + | |
|- | |- | ||
| − | + | | 12:23 | |
| − | | 12 | + | | It is supported by the National Mission on education through ICT, MHRD, Government of India. |
| − | + | ||
| − | | It is | + | |
|- | |- | ||
| − | + | | 12:30 | |
| − | | 12 | + | |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 | + | |
|- | |- | ||
| − | + | | 12:42 | |
| − | | 12 | + | |This tutorial has been contributed by '''IT for Change'''. |
| − | + | ||
| − | |This tutorial has been contributed by | + | |
| − | + | ||
|- | |- | ||
| − | + | | 12:46 | |
| − | | 12 | + | |
| − | + | ||
|Thank you for joining us. | |Thank you for joining us. | ||
Latest revision as of 10:57, 3 July 2017
| 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. |
