View source for Netbeans/C2/Handling-Images-in-a-Java-GUI-Application/English-timed

{| 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. '''

|-
|00:10
|We assume that you have the basic working knowledge of Netbeans. 

|-
|00:15
|We also assume that you know to place '''text fields, buttons, menus,''' etc. on a '''JFrame form. '''

|-
| 00:22
| If not, then please visit the Spoken Tutorial website for relevant tutorials on Netbeans. 

|-
|00:29
|In this tutorial, we will learn in detail about handling images 

|-
| 00:34
|And perform actions on them, in a sample '''GUI''' application. 

|-
|00:39
|For this demonstration, I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.1.1 

|-
| 00:52
|The standard way to handle and access images in a Java Application is by using the '''getResource()''' method. 

|-
| 00:59
| We will learn how to use the IDE's GUI Builder to generate the code to include images in your application, 

|-
|01:07
|and create a simple Jframe with one Jlabel displaying an image. 

|-
|01:13
|In this tutorial, we will - 

|-
|01:15
|Create the application form 

|-
|01:18
|Add a package for the image 

|-
| 01:20
|Display the image on the Label 

|-
|01:22
|Create mouse-events and pop-ups 

|-
|01:25
|Build and run the application 

|-
|01:28
|Now let us switch to the '''IDE''' to create our sample application. 

|-
|01:33
|From the '''File''' menu, choose '''New Project. '''

|-
|01:37
|Under '''Categories ''', select  '''Java''', under '''Projects''' select ''' Java Application''' and click '''Next. '''

|-
|01:46
| In the '''Project Name''' field, type '''ImageDisplayApp. '''

|-
| 01:54
|Clear the ''' Create Main Class''' checkbox. 

|-
| 01:58
|Make sure that the '''Set as Main Project''' checkbox is selected. 

|-
| 02:03
|Click '''Finish.''' The project is created in your IDE. 

|-
| 02:08
|In this section, we will create the '''Jframe form''' and add a '''Jlabel''' to the form. 

|-
| 02:14
|Let us first create the '''Jframe form. '''

|-
| 02:17
|In the '''Projects''' window, expand the ''' ImageDisplayApp''' node. 

|-
| 02:23
|Right-click on the '''Source Packages''' node and choose ''' New''',  '''Jframe form.''' 

|-
|02:30
|In the '''Class Name''' field, type '''ImageDisplay. '''

|-
|02:37
| In the '''Package''' field, type '''org.me.myimageapp.'''

|-
|02:45
| And Click '''Finish. '''

|-
|02:48
|Now let us add the '''Jlabel. '''

|-
| 02:52
|In the '''Palette,''' on the right hand side of the IDE, select the '''Label''' component and drag it to the '''Jframe.'''

|-
| 03:01
|For now, your form should look something like this. 

|-
|03:06
|When you use images or other resources in an application, typically you create a separate Java package for the resource. 

|-
|03:15
|On your local file system, a package corresponds with a folder. 

|-
| 03:19
|In the '''Projects''' window, right-click the '''org.me.myimageapp''' node and choose '''New > Java Package.'''

|-
| 03:30
|In the '''New Package Wizard,''' add '''.resources''' to '''org.me.myimageapp.'''

|-
| 03:40
|So the new package is now called '''org.me.myimageapp.resources.'''

|-
| 03:47
|Click '''Finish. '''

|-
| 03:49
|In the '''Projects''' window, you should see the image appear within the '''org.me.myimageapp.resources''' package, when you add the image. 

|-
| 03:59
|In this application, the image will be embedded within a '''Jlabel''' component. 

|-
| 04:04
| Let us now add the image to the label. 

|-
| 04:08
|In the '''GUI designer''', select the label that you have added to your form. 

|-
| 04:14
|In the '''Properties''' window, below the palette, on the right hand side of the window, scroll to the '''Icon''' property. 

|-
| 04:23
|  Click the '''ellipsis (...)''' or the three dots on the right side. 

|-
| 04:30
|In the '''Icon Property''' dialog box, click '''Import to Project.'''

|-
| 04:34
|In the file chooser, navigate to the folder that contains your image that you want to use. 

|-
| 04:42
|Click '''Next. '''

|-
| 04:45
|In the '''Select Target Folder''' page of the wizard, select the '''Resources''' folder. 

|-
| 04:49
|And click '''Finish. '''

|-
| 04:52
|After you click '''Finish,''' the IDE copies the image to your project. 

|-
| 04:57
|Therefore, when you build and run the application, the image is included in the distributable '''JAR''' file. 

|-
| 05:07
|Click '''OK''' here. 

|-
| 05:11
| And right click on your project node and select ''' Clean and Build''' option. 

|-
| 05:18
|You can now go to the '''Files''' menu, and under the '''build''' folder,

|-
| 05:29
| under '''dist''' folder, you can see the '''jar''' file. 

|-
| 05:33
|It generates the code in the imagedisplay class to access the image. 

|-
| 05:38
|It also displays your image on the label in the '''Design''' view of your form. 

|-
| 05:43
|At this point, you can do some simple things to improve the appearance of the form. 

|-
| 05:48
|In the '''Properties''' window, select the '''Text''' property 

|-
| 05:56
|and delete '''jLabel1.'''

|-
| 06:04
|That value was generated by the '''GUI Builder''' as display text for the label. 

|-
| 06:10
|However, you are using the label to display an image rather than text. 

|-
| 06:15
|So this text is not needed. 

|-
| 06:18
|Now let us drag the '''label''' to center it on the form. 

|-
| 06:26
|In the '''GUI Designer,''' click the ''' Source''' tab. 

|-
| 06:30
|Scroll down to the line that says ''' Generated Code.''' 

|-
| 06:33
| And click the plus sign (+) to the left of the ''' Generated Code''' line to display the code that the ''' GUI Designer''' has generated. 

|-
| 06:42
|Here, the keyline is this. 

|-
| 06:49
|Since you have used the ''' Property editor''' for ''' jLabel1'''s icon property, the '''IDE''' has generated the '''setIcon''' method. 

|-
| 06:57
|The parameter of that method contains a call to the ''' getResource()''' method on an anonymous inner class of '''ImageIcon. '''

|-
| 07:10
|Once your image has been added, in the ''' Design''' view  right-click on the image. 

|-
| 07:19
|Click on '''Events > Mouse > mouseClicked.'''

|-
| 07:24
|The view is switched to the '''Source''' mode.

|-
| 07:28
|Here you can add the code to customize your action on a mouse click. 

|-
| 07:33
|Let me add a few lines of code to generate a '''pop-up''' when the image is clicked in the GUI. 

|-
| 08:00
|I have now entered a few lines of code to generate the pop-up. 

|-
| 08:05
|First I have created a new ''' Jframe''' for the pop-up. 

|-
| 08:12
|And I have set the default close operation. 

|-
| 08:15
|And finally provided the text for the '''pop-up. '''

|-
| 08:24
|After adding these lines of code, let us import the necessary packages by adding two statements at the beginning of the file. 

|-
| 08:36
|Include: ''' import javax.swing.*; '''

|-
| 08:45
|and ''' import java.awt.*; '''

|-
| 08:53
|This will import the necessary packages required for this program. 

|-
| 08:59
|Let us now build and run the application. 

|-
| 09:02
|We have generated the code for accessing and displaying the image. 

|-
| 09:07
|Let us build and run the application to ensure that the image is accessed. 

|-
| 09:12
|First, we need to set the project's ''' Main class.''' 

|-
| 09:16
|When you set the ''' Main class''', the ''' IDE''' knows which class to run when you run the project. 

|-
| 09:21
|In addition, this ensures that the '''Main class''' element in the application's '''JAR''' file is generated when you build the application. 

|-
| 09:33
|Here right-click on the '''ImageDisplayApp''' project's '''Node''' in the Projects window, and choose '''Properties. '''

|-
| 09:41
|In the '''Project Properties''' dialog box, select the '''Run''' category on the left side. 

|-
| 09:47
|Click the '''Browse''' button, that is next to the '''Main Class''' field. 

|-
| 09:51
|Select ''' org.me.myimageapp.ImageDisplay'''  and click on ''' Select Main Class''' 

|-
| 10:01
|Say OK here. 

|-
| 10:05
|Now right-click  on the ''' Project node,'''  and select '''Clean & Build. '''

|-
| 10:11
|You can view the '''Build ''' properties of the application in the ''' Files''' window. 

|-
| 10:20
|The '''Build''' folder contains the compiled class. 

|-
| 10:23
|The '''dist''' folder contains an executable JAR file that contains the compiled class and the image. 

|-
| 10:32
|Now choose '''Run''' from the tool bar. 

|-
| 10:34
|Our output window opens with the image. 

|-
| 10:39
|I will click on this image now. 

|-
| 10:42
|And you can see the pop-up at the top, which shows the description of the image. 

|-
| 10:50
|Now, time for the assignment! 

|-
| 10:54
|Create another GUI with four images, similar to the demonstration shown in this tutorial, 

|-
| 11:01
|For each of the image, specify different events such as '''keyboard event, mouse-motion event, mouse-click event, mouse-wheel event''' 

|-
| 11:12
|I have already created the assignment. 

|-
| 11:17
|Let us run the assignment project.

|-
| 11:20
| Your assignment should look similar to this. 

|-
| 11:26
|I have created keyboard-events and mouse events for my assignment here. 

|-
| 11:34
|So, to summarize, 

|-
| 11:36
|we have, created a Jframe form 

|-
| 11:39
|added a package for the image 

|-
| 11:41
|displayed the image on the label 

|-
| 11:44
|and also created mouse events and pop-ups 

|-
| 11:49
|Watch the video available at the link shown on the screen. 

|-
| 11:53
|It summarizes the Spoken Tutorial project. 
 
|-
| 11:56
|If you do not have good bandwidth, you can download and watch it.

|-
| 12:02
|The Spoken Tutorial project team conduct workshops using Spoken Tutorials. 

|-
| 12:07
|Gives certificates to those who pass an online test. 

|-
| 12:11
|For more details please write to contact@spoken-tutorial.org

|-
| 12:19
|Spoken Tutorial Project is a part of the Talk to a Teacher Project

|-
| 12:23
| It is Supported by the National Mission on education through ICT, MHRD, Government  of India

|-
| 12:30
|More information on this mission is available at spoken-tutorial.org/NMEICT-Intro

|-
| 12:42
|This tutorial has been  contributed by  IT for Change 

|-
| 12:46
|Thank you for joining us.