Difference between revisions of "Netbeans/C2/Handling-Images-in-a-Java-GUI-Application/English-timed"
From Script | Spoken-Tutorial
PoojaMoolya (Talk | contribs) |
Sandhya.np14 (Talk | contribs) |
||
Line 6: | Line 6: | ||
|- | |- | ||
| 00:01 | | 00:01 | ||
− | | | + | |Hi everyone. |
|- | |- | ||
| 00:02 | | 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:10 | |00:10 | ||
− | |We assume that you have the basic working knowledge of Netbeans. | + | |We assume that you have the basic working knowledge of '''Netbeans'''. |
|- | |- | ||
Line 22: | Line 22: | ||
|- | |- | ||
| 00:22 | | 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'''. |
|- | |- | ||
Line 30: | Line 30: | ||
|- | |- | ||
| 00:34 | | 00:34 | ||
− | | | + | |and perform actions on them, in a sample '''GUI application.''' |
|- | |- | ||
|00:39 | |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:52 | | 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:59 | | 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:07 | |01:07 | ||
− | |and create a simple Jframe with one Jlabel displaying an image. | + | |and create a simple '''Jframe''' with one '''Jlabel''' displaying an image. |
|- | |- | ||
Line 54: | Line 54: | ||
|- | |- | ||
|01:15 | |01:15 | ||
− | |Create the application form | + | |* Create the application form |
|- | |- | ||
|01:18 | |01:18 | ||
− | |Add a package for the image | + | |* Add a package for the image |
|- | |- | ||
| 01:20 | | 01:20 | ||
− | |Display the image on the Label | + | |* Display the image on the Label |
|- | |- | ||
|01:22 | |01:22 | ||
− | |Create mouse-events and pop-ups | + | |* Create mouse-events and pop-ups |
|- | |- | ||
|01:25 | |01:25 | ||
− | |Build and run the application | + | |* '''Build''' and '''run''' the application. |
|- | |- | ||
|01:28 | |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 82: | Line 82: | ||
|- | |- | ||
|01:37 | |01:37 | ||
− | |Under '''Categories ''', select '''Java''' | + | |Under '''Categories ''', select '''Java'''; under '''Projects''' select ''' Java Application''' and click '''Next. ''' |
|- | |- | ||
|01:46 | |01:46 | ||
− | | In the '''Project Name''' field, type | + | | In the '''Project Name''' field, type "ImageDisplayApp". |
|- | |- | ||
| 01:54 | | 01:54 | ||
− | |Clear the ''' Create Main Class''' | + | |Clear the ''' Create Main Class''' check-box. |
|- | |- | ||
| 01:58 | | 01:58 | ||
− | |Make sure that the '''Set as Main Project''' | + | |Make sure that the '''Set as Main Project''' check-box is selected. |
|- | |- | ||
Line 102: | Line 102: | ||
|- | |- | ||
| 02:08 | | 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'''. |
|- | |- | ||
Line 110: | Line 110: | ||
|- | |- | ||
| 02:17 | | 02:17 | ||
− | |In the '''Projects''' window, expand the ''' ImageDisplayApp''' node. | + | |In the '''Projects''' window, expand the '''ImageDisplayApp''' node. |
|- | |- | ||
| 02:23 | | 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:30 | |02:30 | ||
− | |In the '''Class Name''' field, type | + | |In the '''Class Name''' field, type: "ImageDisplay". |
|- | |- | ||
|02:37 | |02:37 | ||
− | | In the '''Package''' field, type | + | | In the '''Package''' field, type: "org.me.myimageapp" |
|- | |- | ||
|02:45 | |02:45 | ||
− | | | + | | and click '''Finish.''' |
|- | |- | ||
|02:48 | |02:48 | ||
− | |Now let us add the '''Jlabel. ''' | + | |Now, let us add the '''Jlabel.''' |
|- | |- | ||
Line 138: | Line 138: | ||
|- | |- | ||
| 03:01 | | 03:01 | ||
− | |For now, your form should look something like this. | + | |For now, your '''form''' should look something like this. |
|- | |- | ||
|03:06 | |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 154: | Line 154: | ||
|- | |- | ||
| 03:30 | | 03:30 | ||
− | |In the '''New Package Wizard,''' add '''.resources''' to '''org.me.myimageapp.''' | + | |In the '''New Package Wizard,''' add ''''.resources'''' to '''org.me.myimageapp.''' |
|- | |- | ||
| 03:40 | | 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 174: | Line 174: | ||
|- | |- | ||
| 04:04 | | 04:04 | ||
− | | Let us now add the image to the label. | + | | Let us now add the image to the '''label'''. |
|- | |- | ||
| 04:08 | | 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'''. |
|- | |- | ||
| 04:14 | | 04:14 | ||
− | |In the '''Properties''' window, below the | + | |In the '''Properties''' window, below the '''Palette''', on the right hand side of the window, scroll to the '''icon''' property. |
|- | |- | ||
Line 190: | Line 190: | ||
|- | |- | ||
| 04:30 | | 04:30 | ||
− | |In the ''' | + | |In the '''icon Property''' dialog-box, click '''Import to Project.''' |
|- | |- | ||
Line 202: | Line 202: | ||
|- | |- | ||
| 04:45 | | 04:45 | ||
− | |In the '''Select | + | |In the '''Select target folder''' page of the wizard, select the '''resources''' folder |
|- | |- | ||
| 04:49 | | 04:49 | ||
− | | | + | |and click '''Finish. ''' |
|- | |- | ||
Line 214: | Line 214: | ||
|- | |- | ||
| 04:57 | | 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 222: | Line 222: | ||
|- | |- | ||
| 05:11 | | 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:18 | | 05:18 | ||
− | |You can now go to the '''Files''' menu | + | |You can now go to the '''Files''' menu and under the '''build''' folder, |
|- | |- | ||
Line 234: | Line 234: | ||
|- | |- | ||
| 05:33 | | 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: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:43 | | 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 262: | Line 262: | ||
|- | |- | ||
| 06:15 | | 06:15 | ||
− | |So this text is not needed. | + | |So, this text is not needed. |
|- | |- | ||
| 06:18 | | 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 274: | Line 274: | ||
|- | |- | ||
| 06:30 | | 06:30 | ||
− | |Scroll down to the line that says ''' Generated Code | + | |Scroll down to the line that says '''Generated Code'''. |
|- | |- | ||
| 06:33 | | 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. |
|- | |- | ||
Line 286: | Line 286: | ||
|- | |- | ||
| 06:49 | | 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 306: | Line 306: | ||
|- | |- | ||
| 07:28 | | 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 318: | Line 318: | ||
|- | |- | ||
| 08:05 | | 08:05 | ||
− | |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:12 | ||
− | |And I have set the | + | |And I have set the '''defaultCloseOperation'''. |
|- | |- | ||
Line 330: | Line 330: | ||
|- | |- | ||
| 08:24 | | 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. |
|- | |- | ||
Line 342: | Line 342: | ||
|- | |- | ||
| 08:53 | | 08:53 | ||
− | |This will import the necessary | + | |This will import the necessary '''package'''s required for this program. |
|- | |- | ||
| 08:59 | | 08:59 | ||
− | |Let us now build and run the application. | + | |Let us now '''build''' and '''run''' the '''application'''. |
|- | |- | ||
Line 362: | Line 362: | ||
|- | |- | ||
| 09:16 | | 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 370: | Line 370: | ||
|- | |- | ||
| 09:33 | | 09:33 | ||
− | |Here right-click on the '''ImageDisplayApp''' project's '''Node''' in the Projects window | + | |Here, right-click on the '''ImageDisplayApp''' project's '''Node''' in the '''Projects''' window and choose '''Properties. ''' |
|- | |- | ||
| 09:41 | | 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 386: | Line 386: | ||
|- | |- | ||
| 10:01 | | 10:01 | ||
− | |Say OK here. | + | |Say '''OK''' here. |
|- | |- | ||
| 10:05 | | 10:05 | ||
− | |Now right-click on the ''' Project node | + | |Now, right-click on the ''' Project node''' and select '''Clean & Build. ''' |
|- | |- | ||
Line 398: | Line 398: | ||
|- | |- | ||
| 10:20 | | 10:20 | ||
− | |The '''Build''' folder contains the compiled class. | + | |The '''Build''' folder contains the compiled '''class'''. |
|- | |- | ||
Line 410: | Line 410: | ||
|- | |- | ||
| 10:34 | | 10:34 | ||
− | |Our output window opens with the image. | + | |Our '''output''' window opens with the image. |
|- | |- | ||
Line 418: | Line 418: | ||
|- | |- | ||
| 10:42 | | 10:42 | ||
− | |And you can see the pop-up at the top | + | |And you can see the pop-up at the top which shows the description of the image. |
|- | |- | ||
Line 426: | Line 426: | ||
|- | |- | ||
| 10:54 | | 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. |
|- | |- | ||
| 11:01 | | 11:01 | ||
− | |For each of the | + | |For each of the images, specify different events such as '''keyboard event, mouse-motion event, mouse-click event, mouse-wheel event'''. |
|- | |- | ||
Line 438: | Line 438: | ||
|- | |- | ||
| 11:17 | | 11:17 | ||
− | |Let us run the assignment project. | + | |Let us '''run''' the assignment project. |
|- | |- | ||
Line 446: | Line 446: | ||
|- | |- | ||
| 11:26 | | 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. |
|- | |- | ||
| 11:34 | | 11:34 | ||
− | |So, to summarize | + | |So, to summarize- |
|- | |- | ||
| 11:36 | | 11:36 | ||
− | |we have | + | |we have created a '''Jframe form''', |
|- | |- | ||
| 11:39 | | 11:39 | ||
− | |added a package for the image | + | |added a package for the image, |
|- | |- | ||
| 11:41 | | 11:41 | ||
− | |displayed the image on the label | + | |displayed the image on the label, |
|- | |- | ||
| 11:44 | | 11:44 | ||
− | |and also created mouse events and pop-ups | + | |and also created mouse-events and pop-ups. |
|- | |- | ||
Line 482: | Line 482: | ||
|- | |- | ||
| 12:02 | | 12:02 | ||
− | |The Spoken Tutorial project team | + | |The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials. |
|- | |- | ||
| 12:07 | | 12:07 | ||
− | |Gives certificates to those who pass an online test. | + | |* Gives certificates to those who pass an online test. |
|- | |- | ||
| 12:11 | | 12:11 | ||
− | |For more details please write to contact@spoken-tutorial.org | + | |For more details, please write to: |
+ | contact@spoken-tutorial.org | ||
|- | |- | ||
| 12:19 | | 12:19 | ||
− | |Spoken Tutorial | + | |'''Spoken Tutorial''' project is a part of the '''Talk to a Teacher''' project. |
|- | |- | ||
| 12:23 | | 12:23 | ||
− | | It is | + | | It is supported by the National Mission on education through ICT, MHRD, Government of India. |
|- | |- | ||
| 12:30 | | 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. | ||
|- | |- | ||
| 12:42 | | 12:42 | ||
− | |This tutorial has been contributed by | + | |This tutorial has been contributed by '''IT for Change'''. |
|- | |- | ||
| 12:46 | | 12:46 | ||
|Thank you for joining us. | |Thank you for joining us. |
Revision as of 21:53, 26 October 2015
Time | Narration |
00:01 | Hi 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 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 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. |