Difference between revisions of "Netbeans/C2/Handling-Images-in-a-Java-GUI-Application/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{| Border=1
 
{| Border=1
  
−
|| '''Time'''
+
| '''Time'''
−
||'''Narration'''
+
|'''Narration'''
  
 
|-
 
|-
−
| 00.01
+
| 00:01
−
|Hii everyone.  
+
|Hi everyone.Welcome to this tutorial on '''Handling Images in a Java GUI Application''' using '''Netbeans IDE. '''
  
 
|-
 
|-
−
| 00.02
+
|00:10
−
| Welcome to this tutorial on '''Handling Images in a Java GUI Application using Netbeans IDE. '''
+
|We assume that you have the basic working knowledge of '''Netbeans'''.
  
 
|-
 
|-
−
|00.10
+
|00:15
−
|We assume that you have the basic working knowledge of Netbeans.  
+
|We also assume that you know to place '''text fields, buttons, menus''' etc. on a '''JFrame form. '''
  
 
|-
 
|-
−
|00.15
+
| 00:22
−
|We also assume that you know to place '''text fields, buttons, menus,''' etc. on a '''JFrame form. '''
+
|If not, then please visit the '''Spoken Tutorial''' website for relevant tutorials on '''Netbeans'''.
  
 
|-
 
|-
−
| 00.22
+
|00:29
−
| 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  
 
|In this tutorial, we will learn in detail about handling images  
  
 
|-
 
|-
−
| 00.34
+
| 00:34
−
|And perform actions on them, in a sample '''GUI''' application.
+
|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''' version '''11.04''' and '''Netbeans IDE''' version '''7.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.  
−
 
+
  
 
|-
 
|-
−
|01.13
+
|01:13
 
|In this tutorial, we will -  
 
|In this tutorial, we will -  
  
 
|-
 
|-
−
 
+
|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-event'''s and '''pop-up'''s
−
 
+
−
|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.  
+
−
 
+
  
 
|-
 
|-
−
 
+
|01:33
−
|01.33
+
−
 
+
 
|From the '''File''' menu, choose '''New Project. '''
 
|From the '''File''' menu, choose '''New Project. '''
−
 
  
 
|-
 
|-
−
 
+
|01:37
−
|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. '''
+
  
 
|-
 
|-
−
 
+
|01:46
−
|01.46
+
| In the '''Project Name''' field, type: '''ImageDisplayApp'''.
−
 
+
−
| In the '''Project Name''' field, type '''ImageDisplayApp. '''
+
−
 
+
  
 
|-
 
|-
−
 
+
| 01:54
−
| 01.54
+
|Clear the ''' Create Main Class''' check-box.  
−
 
+
−
|Clear the ''' Create Main Class''' checkbox.  
+
−
 
+
  
 
|-
 
|-
−
 
+
| 01:58
−
| 01.58
+
|Make sure that the '''Set as Main Project''' check-box is selected.  
−
 
+
−
|Make sure that the '''Set as Main Project''' checkbox is selected.  
+
  
 
|-
 
|-
−
| 02.03
+
| 02:03
 
|Click '''Finish.''' The project is created in your IDE.  
 
|Click '''Finish.''' The project is created in your IDE.  
  
 
|-
 
|-
−
| 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'''.  
−
 
+
  
 
|-
 
|-
−
| 02.14
+
| 02:14
 
|Let us first create the '''Jframe form. '''
 
|Let us first create the '''Jframe form. '''
  
 
|-
 
|-
−
| 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''',  '''Jframe form.'''  
+
|Right-click on the '''Source Packages''' node and choose ''' New >> Jframe Form.'''  
  
 
|-
 
|-
−
|02.30
+
|02:30
−
|In the '''Class Name''' field, type '''ImageDisplay. '''
+
|In the '''Class Name''' field, type: '''ImageDisplay'''.
  
 
|-
 
|-
−
|02.37
+
|02:37
−
| In the '''Package''' field, type '''org.me.myimageapp.'''
+
| In the '''Package''' field, type: '''org.me.myimageapp'''
  
 
|-
 
|-
−
|02.45
+
|02:45
−
| And Click '''Finish. '''
+
| and click '''Finish.'''
  
 
|-
 
|-
−
|02.48
+
|02:48
−
|Now let us add the '''Jlabel. '''
+
|Now, let us add the '''Jlabel.'''
  
 
|-
 
|-
−
| 02.52
+
| 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.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.  
+
−
 
+
  
 
|-
 
|-
−
 
+
|03:15
−
|03.15
+
−
 
+
 
|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.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.'''
−
 
  
 
|-
 
|-
−
 
+
| 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.'''
+
−
 
+
  
 
|-
 
|-
−
 
+
| 03:47
−
| 03.47
+
−
 
+
 
|Click '''Finish. '''
 
|Click '''Finish. '''
−
 
  
 
|-
 
|-
−
 
+
| 03:49
−
| 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.  
−
 
  
 
|-
 
|-
−
 
+
| 03:59
−
| 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.  
−
 
−
 
  
 
|-
 
|-
−
| 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 '''Palette''', on the right hand side of the window, scroll down to the '''icon''' property.  
−
 
+
−
|In the '''Properties''' window, below the palette, on the right hand side of the window, scroll to the '''Icon''' property.  
+
−
 
+
  
 
|-
 
|-
−
 
+
| 04:23
−
| 04.23
+
−
 
+
 
|  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.30
+
|In the '''icon Property''' dialog-box, click '''Import to Project.'''
−
+
−
|In the '''Icon Property''' dialog box, click '''Import to Project.'''
+
  
 
|-
 
|-
−
| 04.34
+
| 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.42
+
−
+
 
|Click '''Next. '''
 
|Click '''Next. '''
  
 
|-
 
|-
−
| 04.45
+
| 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.49
+
| 04:49
−
|And click '''Finish. '''
+
|and click '''Finish. '''
  
 
|-
 
|-
 +
| 04:52
 +
|After you click '''Finish,''' the IDE copies the image to your project.
  
−
| 04.52
 
−
 
−
|After you click '''Finish,''' the IDE copies the image to your project.
 
 
|-
 
|-
−
 
+
| 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.  
+
−
 
+
  
 
|-
 
|-
−
 
+
| 05:07
−
| 05.07
+
−
 
+
 
|Click '''OK''' here.  
 
|Click '''OK''' here.  
  
 
|-
 
|-
 +
| 05:11
 +
| And right-click on your project node and select ''' Clean and Build''' option.
  
−
| 05.11
 
−
 
−
| 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 and under the '''build''' folder,
−
 
+
−
|You can now go to the '''Files''' menu, and under the '''build''' folder,
+
  
 
|-
 
|-
−
 
+
| 05:29
−
| 05.29
+
−
 
+
 
| under '''dist''' folder, you can see the '''jar''' file.  
 
| under '''dist''' folder, you can see the '''jar''' file.  
  
 
|-
 
|-
−
 
+
| 05:33
−
| 04.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'''.  
−
 
+
−
 
+
  
 
|-
 
|-
 +
| 05:48
 +
|In the '''Properties''' window, select the '''Text''' property
  
−
| 05.48
 
−
 
−
|In the '''Properties''' window, select the '''Text''' property
 
 
|-
 
|-
−
 
+
| 05:56
−
| 05.56
+
−
 
+
 
|and delete '''jLabel1.'''
 
|and delete '''jLabel1.'''
−
 
  
 
|-
 
|-
−
 
+
| 06:04
−
| 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.  
  
 
|-
 
|-
−
 
+
| 06:10
−
| 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.  
−
 
  
 
|-
 
|-
−
 
+
| 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.  
+
  
 
|-
 
|-
−
 
+
| 06:26
−
| 06.26
+
−
 
+
 
|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.30
+
| 06:33
−
|Scroll down to the line that says ''' Generated Code.'''
+
| And click the plus sign (+) to the left of the ''' Generated Code''' line, to display the code that the ''' GUI Designer''' has generated.  
−
|-
+
−
 
+
−
| 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
+
| 06:42
 
|Here, the keyline is this.  
 
|Here, the keyline is this.  
−
 
  
 
|-
 
|-
−
 
+
| 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.  
+
  
 
|-
 
|-
−
 
+
| 06:57
−
| 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. '''
  
 
|-
 
|-
−
 
+
| 07:10
−
| 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.  
−
 
−
 
  
 
|-
 
|-
−
 
+
| 07:19
−
| 07.19
+
−
 
+
 
|Click on '''Events > Mouse > mouseClicked.'''
 
|Click on '''Events > Mouse > mouseClicked.'''
  
 
|-
 
|-
−
 
+
| 07:24
−
| 07.24
+
−
 
+
 
|The view is switched to the '''Source''' mode.
 
|The view is switched to the '''Source''' mode.
  
 
|-
 
|-
−
 
+
| 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.  
+
  
 
|-
 
|-
−
 
+
| 07:33
−
| 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.  
−
 
  
 
|-
 
|-
−
 
+
| 08:00
−
| 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.  
−
 
−
 
  
 
|-
 
|-
−
 
+
| 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 '''defaultCloseOperation'''.  
−
 
+
−
|And I have set the default close operation.  
+
−
 
+
  
 
|-
 
|-
 +
| 08:15
 +
|And finally, provided the text for the '''pop-up. '''
  
−
| 08.15
 
−
 
−
|And finally provided the text for the '''pop-up. '''
 
 
|-
 
|-
−
 
+
| 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.  
+
  
 
|-
 
|-
−
| 08.36
+
| 08:36
 
|Include: ''' import javax.swing.*; '''
 
|Include: ''' import javax.swing.*; '''
−
 
−
 
  
 
|-
 
|-
−
| 08.45
+
| 08:45
 
|and ''' import java.awt.*; '''
 
|and ''' import java.awt.*; '''
−
 
  
 
|-
 
|-
−
| 08.53
+
| 08:53
−
|This will import the necessary packages required for this program.  
+
|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.  
+
  
 
|-
 
|-
−
 
+
| 09:02
−
| 09.02
+
−
 
+
 
|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.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.  
−
 
  
 
|-
 
|-
−
 
+
| 09:12
−
| 09.12
+
−
 
+
 
|First, we need to set the project's ''' Main class.'''  
 
|First, we need to set the project's ''' Main class.'''  
  
 
|-
 
|-
−
 
+
| 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.  
+
  
 
|-
 
|-
 +
| 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.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.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. '''
+
  
 
|-
 
|-
−
 
+
| 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.  
+
  
 
|-
 
|-
−
 
+
| 09:47
−
| 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.  
  
 
|-
 
|-
−
 
+
| 09:51
−
| 09.51
+
−
 
+
 
|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.01
+
|Say '''OK''' here.  
−
 
+
−
|Say OK here.  
+
  
 
|-
 
|-
−
 
+
| 10:05
−
| 10.05
+
|Now, right-click  on the ''' Project node'''  and select '''Clean & Build. '''
−
 
+
−
|Now right-click  on the ''' Project node,'''  and select '''Clean & Build. '''
+
  
 
|-
 
|-
−
 
+
| 10:11
−
| 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.  
  
 
|-
 
|-
−
 
+
| 10:20
−
| 10.20
+
|The '''Build''' folder contains the compiled '''class'''.  
−
 
+
−
|The '''Build''' folder contains the compiled class.  
+
  
 
|-
 
|-
−
 
+
| 10:23
−
| 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.  
+
  
 
|-
 
|-
−
 
+
| 10:32
−
| 10.32
+
−
 
+
 
|Now choose '''Run''' from the tool bar.  
 
|Now choose '''Run''' from the tool bar.  
  
 
|-
 
|-
−
 
+
| 10:34
−
| 10.34
+
|Our '''output''' window opens with the image.  
−
 
+
−
|Our output window opens with the image.  
+
  
 
|-
 
|-
−
 
+
| 10:39
−
| 10.39
+
−
 
+
 
|I will click on this image now.  
 
|I will click on this image now.  
  
 
|-
 
|-
−
 
+
| 10:42
−
| 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.  
+
  
 
|-
 
|-
−
 
+
| 10:50
−
| 10.50
+
−
 
+
 
|Now, time for the assignment!  
 
|Now, time for the assignment!  
  
 
|-
 
|-
−
 
+
| 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 images, 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''' .
+
  
 
|-
 
|-
−
 
+
| 11:12
−
| 11.12
+
−
 
+
 
|I have already created the assignment.  
 
|I have already created the assignment.  
  
 
|-
 
|-
 +
| 11:17
 +
|Let us '''run''' the assignment project.
  
−
| 11.17
 
−
 
−
|Let us run the assignment project.
 
 
|-
 
|-
−
 
+
| 11:20
−
| 11.20
+
|Your assignment should look similar to this.  
−
 
+
−
| Your assignment should look similar to this.  
+
−
 
+
  
 
|-
 
|-
−
 
+
| 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 created a '''Jframe form''',
−
 
+
−
|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  
+
−
 
+
  
 
|-
 
|-
−
 
+
| 11:49
−
| 11.49
+
|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.53
+
|It summarizes the '''Spoken Tutorial''' project.  
−
 
+
−
|It summarizes the Spoken Tutorial project.  
+
 
   
 
   
 
|-
 
|-
−
 
+
| 11:56
−
| 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.
  
 
|-
 
|-
−
 
+
| 12:02
−
| 12.02
+
|The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials.  
−
 
+
−
|The Spoken Tutorial project team conduct 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''' project is a part of the '''Talk to a Teacher''' project.
−
 
+
−
|Spoken Tutorial Project is a part of the Talk to a Teacher Project
+
  
 
|-
 
|-
−
 
+
| 12:23
−
| 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
+
  
 
|-
 
|-
−
 
+
| 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 '''IT for Change'''.
−
 
+
−
|This tutorial has been  contributed by IT for Change  
+
−
 
+
  
 
|-
 
|-
−
 
+
| 12:46
−
| 12.46
+
−
 
+
 
|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.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Netbeans/C2/Handling-Images-in-a-Java-GUI-Application/English-timed&oldid=37588"