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

'''Title of script''': Handling Images in a Java GUI Application

'''Author: Sindhu Ghanti'''

'''Keywords: Netbeans, Images, Java, GUI'''

[http://spoken-tutorial.org/wiki/images/a/a7/Resources-Handling_Images.zip Resources for "Handling Images in a Java GUI Application"]


{| style="border-spacing:0;"
| style="border-top:0.002cm solid #000000;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| <center>'''Visual Cue'''</center>
| style="border:0.002cm solid #000000;padding:0.097cm;"| <center>'''Narration'''</center>

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 1

(Welcome Slide)
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Hi everyone.


Welcome to this tutorial on '''Handling Images in a Java GUI Application using Netbeans IDE'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 2

Prerequisites
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| 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'''.


If not, then please visit the Spoken Tutorial website for relevant tutorials on Netbeans.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 3

Introduction
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn in detail about handling images 


and perform actions on them 


in a sample '''GUI''' application.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 4

System Setup
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| For this demonstration, I am using the '''Linux Operating System Ubuntu v11.04'''


and '''Netbeans IDE v7.1.1'''

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 5 

Handling Images
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| The standard way to handle and access images in a Java Application is by using the getResource() method.


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


and create a simple Jframe with one Jlabel displaying an image.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 6

Lesson Outline 
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will -


* Create the application form
* Add a package for the image
* Display the image on the Label
* Create mouse-events and pop-ups
* Build and run the application

Now let us switch to the '''IDE''' to create our sample application.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Switch to '''Netbeans''' Window

From the '''Menu bar >>''' choose '''File >>''' '''New Project'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Creating the Application

From the '''File '''menu, choose '''New Project.'''

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''New Project Wizard''', select '''Java >> Java Application >> '''click '''Next'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Under Projects, select '''Java''', under '''Categories''' select '''Java, Java Application '''and click '''Next'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Project Name '''field, type '''ImageDisplayApp'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the '''Project Name '''field, type '''ImageDisplayApp'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Uncheck the '''Create Main Class''' checkbox.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Clear the '''Create Main Class''' checkbox.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Point to / Check the '''Set as Main Project '''checkbox
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Make sure that the '''Set as Main Project''' checkbox is selected.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Click '''Finish'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Click '''Finish'''. The project is created in your IDE.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Narration Only
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In this section, we will create the '''Jframe form''' and add a '''Jlabel''' to the form.


Let us first create the '''Jframe form'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Projects''' window, clicked on the plus sign next to '''ImageDisplayApp''' node.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the '''Projects''' window, expand the '''ImageDisplayApp''' node.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Right-click the '''Source Packages''' node >> click '''New''' >> '''Jframe form'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Right-click on the '''Source Packages''' node and choose '''New''' and then''' Jframe form'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In '''Class Name >> '''type '''Image Display'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the '''Class Name '''field, type '''ImageDisplay'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In '''Package Name >>''' type '''org.me.myimageapp.'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the '''Package '''field, type '''org.me.myimageapp.'''

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Click '''Finish'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Click '''Finish'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Palette''', select '''Label '''and drag it to the '''Jframe.'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Now let us add the''' Jlabel'''.


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

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Show Design part in the IDE.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| For now, your form should look something like this.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Projects''' window, point to '''Source Packages'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Adding a Package for the Image

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


On your local file system, a package corresponds with a folder.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Projects '''window >>''' '''right-click '''org.me.myimageapp >> '''choose '''New >> Java Package.'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the '''Projects''' window, right-click the '''org.me.myimageapp''' node and choose '''New''' > '''Java Package.'''




|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''New Package Wizard >>''' add '''.resources''' to '''org.me.myimageapp.'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the '''New Package Wizard''', add '''.resources''' to '''org.me.myimageapp.'''


So the new package is called '''org.me.myimageapp.resources.'''

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Click '''Finish'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Click '''Finish'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Point to the '''Projects window'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the '''Projects''' window, you should see the image appear within the '''org.me.myimageapp.resources''' package, when you add the image.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''GUI designer''', select the label that you have added to your form.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In this application, the image will be embedded within a '''Jlabel''' component.


Let us now add the image to the label.


In the '''GUI designer''', select the label that you have added to your form.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Properties '''window >> click '''Properties''' >> scroll to '''Icon '''property.



| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the '''Properties '''window, below the palette, on the right hand side, click the '''Properties '''category and scroll to the '''Icon '''property.




|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Click the '''ellipsis (...) '''button.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Click the '''ellipsis (...) '''or the three dots on the right side.




|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Icon Property''' dialog box >> click '''Import to Project.'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the '''Icon Property''' dialog box, click '''Import to Project.'''

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Choose any image.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the file chooser, navigate to the folder that contains your image that you want to use.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Click '''Next'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Click '''Next'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In '''Select Target Folder''' >> select the '''Resources''' folder.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the '''Select Target Folder''' page of the wizard, select the '''Resources''' folder.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Click '''Finish'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| And click '''Finish'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Narration Only
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| After you click '''Finish''', the IDE copies the image to your project.


Therefore, when you build and distribute the application, the image is included in the distributable '''JAR''' file.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Click '''OK'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Click '''OK '''here.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| '''Right-click '''on '''ImageDisplayApp '''>> select '''Clean & Build'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Right click on your project node and select '''Clean and Build '''option.




|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Files''' window >> '''ImageDisplay''' project >> '''dist'''>> point to the '''jar file'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| You can now go to the Files window, and under the '''build '''folder, and under '''dist '''folder, you can see the '''jar '''file.


It generates the code in the imagedisplay class to access the image.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Design''' view, point to the image
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| It also displays your image on the label in the '''Design''' view of your form.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Properties''' window >> select '''Text '''property >> delete '''jLabel1.'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| At this point, you can do some simple things to improve the appearance of the form.


In the '''Properties''' window, select the '''Text '''property and delete '''jLabel1.'''

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Narration Only
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| That value was generated by the '''GUI Builder''' as display text for the label.


However, you are using the label to display an image rather than text.


So this text is not needed.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Drag the label/image to center it
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Drag the '''label''' to center it on the form.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''GUI Designer >>''' click '''Source''' tab.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| To view the generated code

In the '''GUI Designer''', click the '''Source''' tab.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Scroll down to the line that says '''Generated Code'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Scroll down to the line that says '''Generated Code'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Click the plus sign (+) to the left of '''Generated Code''' 
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Click the plus sign (+) to the left of the '''Generated Code''' line to display the code that the '''GUI Designer''' has generated.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| ''Show '''''jLabel1.setIcon(new.......''''')''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Here, the keyline is this.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Source view '''>> select and show the '''setIcon()''' method
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Since you have used the '''Property editor '''for '''jLabel1''''s icon property, the '''IDE '''has generated the''' setIcon''' method.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Source''' view >> select and show the''' getResource()''' method
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| The parameter of that method contains a call to the '''getResource()''' method on an anonymous inner class of '''ImageIcon'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Right-click on the image in the '''Design''' view.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Once your image has been added, right-click on it in the '''Design''' view itself.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Click on '''Events >> Mouse >> mouseClicked '''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Click on '''Events > Mouse > mouseClicked.'''

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| ''View switches to Source mode''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| The view is switched to the '''Source '''mode'''.'''

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Source '''view >> show the code being typedThe code if given over here will be better. So that i can type it.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Here you can add the code to customize your action on a mouse click.


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


Code Snippet:


JFrame frame= new JFrame (“Bridge”);

frame.setDefaultCloseOperation(JFrame.HIDE_ON_CLOSE);

String randomText;

randomText=”A structure carrying a road, path, railroad, or canal across a river, ravine, or other obstacle”;

JLabel label=new Jlabel(“Bridge: “+randomText);

frame.getContentPane().add(label);

frame.pack();

frame.setVisible(true);


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

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Highlight the line in the code snippet which creates a JFrame
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| First I have created a new '''Jframe''' for the pop-up.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Highlight the line in the code snippet which sets the close operation
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| And I have set the default close operation.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Highlight the line in the code snippet where the text is added
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| And finally provided the text for the '''pop-up'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| At the beginning of the file >> type >> '''import javax.swing.*; '''and '''java.awt.*;'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| After adding these lines of code, let us import the necessary packages by adding two statements at the beginning of the file.

Include: 

'''import javax.swing.*;'''

'''import java.awt.*;'''


this will import the necessary packages required for this program.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Show the entire code in the Source view
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Let us now build and run the application.

We have generated the code for accessing and displaying the image.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Narration Only
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Let us build and run the application to ensure that the image is accessed.


First, we need to set the project's '''Main class'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Narration Only
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| When you set the '''Main class''', the '''IDE''' knows which class to run when you run the project.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Files''' window >> show '''jar file'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In addition, this ensures that the '''Main class''' element in the application's '''JAR''' file is generated when you build the application.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Right-click the''' ImageDisplayApp''' project's '''Node''' >> choose '''Properties'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Right-click the''' ImageDisplayApp''' project's '''Node''' in the Projects window, and choose '''Properties'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| In the '''Project Properties''' dialog box >> select '''Run''' 
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| In the '''Project Properties''' dialog box, select the '''Run''' category on the left side.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Click the '''Browse''' button next to '''Main Class''' field.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Click the '''Browse''' button, that is next to the '''Main Class''' field.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Select '''org.me.myimageapp.ImageDisplay''' '''class''' >> click '''Select Main Class''' button >> click on '''OK'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Then select the '''org.me.myimageapp.ImageDisplay''' and click the '''Select Main Class''' button.


Say OK here.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| '''Right-click''' on the '''Project node''' >> select '''Clean & Build'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| '''Right-click''' on the '''Project node''', and select '''Clean & Build'''.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Point to '''Build Products of the application''' in the '''Files''' window.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| You can view the '''Build Properties of the application''' in the '''Files''' window.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Point to the '''Build''' folder
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| The '''Build''' folder contains the compiled class.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Point to the '''dist''' folder
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| The '''dist''' folder contains an executable JAR file that contains the compiled class and the image.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Click on '''Run'''.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Now choose '''Run''' from the tool bar.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Switch to Output Window


Point as per the narration.
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Our output window opens with the image.


I will click on this image now.


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

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 7

Assignment
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Now, time for the assignment!


# Create another GUI with four images, similar to the demonstration shown in this tutorial, 
# For each of the image, specify different events such as keyboard event, mouse-motion event, mouse-click event, mouse-wheel event etc.



|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Switch to Netbeans Window 

Show solved assignment
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| I have already created the assignment. Let us run the assignment project. Your assignment should look similar to this.


I have created keyboard-events and mouse events for my assignment here.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 

Summary
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| So, to summarize this tutorial, we have,

* created a Jframe form
* added a package for the image
* displayed the image on the label
* created mouse events and pop-ups



|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 8

About the Spoken Tutorial Project
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Watch the video available at the link shown on the screen.


It summarizes the Spoken Tutorial project.


If you do not have good bandwidth, you can download and watch it.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 9

Spoken Tutorial Workshops
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| The Spoken Tutorial Project Team

* Conducts workshops using Spoken Tutorials
* Gives certificates to those who pass an online test
* For more details, please write to [mailto:contact@spoken-tutorial.org contact@spoken-tutorial.org]



|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 10

Acknowledgements
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Spoken Tutorial Project is a part of the Talk to a Teacher Project.


It is supported by the National Mission on Education through ICT, MHRD, Government of India.


More information on this Mission is available at the link provided here.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding:0.097cm;"| Slide 11

About the Contributor
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| This tutorial has been contributed by IT for Change. Thank you

|}