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

Resources for "Handling Images in a Java GUI Application"

Visual Cue	Narration
Slide 1 (Welcome Slide)	Hi everyone. Welcome to this tutorial on Handling Images in a Java GUI Application using Netbeans IDE.
Slide 2 Prerequisites	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.
Slide 3 Introduction	In this tutorial, we will learn in detail about handling images and perform actions on them in a sample GUI application.
Slide 4 System Setup	For this demonstration, I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.1.1
Slide 5 Handling Images	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.
Slide 6 Lesson Outline	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.
Switch to Netbeans Window From the Menu bar >> choose File >> New Project	Creating the Application From the File menu, choose New Project.
In the New Project Wizard, select Java >> Java Application >> click Next.	Under Projects, select Java, under Categories select Java, Java Application and click Next.
In the Project Name field, type ImageDisplayApp.	In the Project Name field, type ImageDisplayApp.
Uncheck the Create Main Class checkbox.	Clear the Create Main Class checkbox.
Point to / Check the Set as Main Project checkbox	Make sure that the Set as Main Project checkbox is selected.
Click Finish.	Click Finish. The project is created in your IDE.
Narration Only	In this section, we will create the Jframe form and add a Jlabel to the form. Let us first create the Jframe form.
In the Projects window, clicked on the plus sign next to ImageDisplayApp node.	In the Projects window, expand the ImageDisplayApp node.
Right-click the Source Packages node >> click New >> Jframe form.	Right-click on the Source Packages node and choose New and then Jframe form.
In Class Name >> type Image Display.	In the Class Name field, type ImageDisplay.
In Package Name >> type org.me.myimageapp.	In the Package field, type org.me.myimageapp.
Click Finish.	Click Finish.
In the Palette, select Label and drag it to the Jframe.	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.
Show Design part in the IDE.	For now, your form should look something like this.
In the Projects window, point to Source Packages	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.
In the Projects window >> right-click org.me.myimageapp >> choose New >> Java Package.	In the Projects window, right-click the org.me.myimageapp node and choose New > Java Package.
In the New Package Wizard >> add .resources to org.me.myimageapp.	In the New Package Wizard, add .resources to org.me.myimageapp. So the new package is called org.me.myimageapp.resources.
Click Finish.	Click Finish.
Point to the Projects window	In the Projects window, you should see the image appear within the org.me.myimageapp.resources package, when you add the image.
In the GUI designer, select the label that you have added to your form.	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.
In the Properties window >> click Properties >> scroll to Icon property.	In the Properties window, below the palette, on the right hand side, click the Properties category and scroll to the Icon property.
Click the ellipsis (...) button.	Click the ellipsis (...) or the three dots on the right side.
In the Icon Property dialog box >> click Import to Project.	In the Icon Property dialog box, click Import to Project.
Choose any image.	In the file chooser, navigate to the folder that contains your image that you want to use.
Click Next.	Click Next.
In Select Target Folder >> select the Resources folder.	In the Select Target Folder page of the wizard, select the Resources folder.
Click Finish.	And click Finish.
Narration Only	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.
Click OK	Click OK here.
Right-click on ImageDisplayApp >> select Clean & Build	Right click on your project node and select Clean and Build option.
In the Files window >> ImageDisplay project >> dist>> point to the jar file	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.
In the Design view, point to the image	It also displays your image on the label in the Design view of your form.
In the Properties window >> select Text property >> delete jLabel1.	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.
Narration Only	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.
Drag the label/image to center it	Drag the label to center it on the form.
In the GUI Designer >> click Source tab.	To view the generated code In the GUI Designer, click the Source tab.
Scroll down to the line that says Generated Code.	Scroll down to the line that says Generated Code.
Click the plus sign (+) to the left of Generated Code	Click the plus sign (+) to the left of the Generated Code line to display the code that the GUI Designer has generated.
Show jLabel1.setIcon(new.......)	Here, the keyline is this.
In the Source view >> select and show the setIcon() method	Since you have used the Property editor for jLabel1's icon property, the IDE has generated the setIcon method.
In the Source view >> select and show the getResource() method	The parameter of that method contains a call to the getResource() method on an anonymous inner class of ImageIcon.
Right-click on the image in the Design view.	Once your image has been added, right-click on it in the Design view itself.
Click on Events >> Mouse >> mouseClicked	Click on Events > Mouse > mouseClicked.
View switches to Source mode	The view is switched to the Source mode.
In the Source view >> show the code being typedThe code if given over here will be better. So that i can type it.	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.
Highlight the line in the code snippet which creates a JFrame	First I have created a new Jframe for the pop-up.
Highlight the line in the code snippet which sets the close operation	And I have set the default close operation.
Highlight the line in the code snippet where the text is added	And finally provided the text for the pop-up.
At the beginning of the file >> type >> import javax.swing.*; and java.awt.*;	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.
Show the entire code in the Source view	Let us now build and run the application. We have generated the code for accessing and displaying the image.
Narration Only	Let us build and run the application to ensure that the image is accessed. First, we need to set the project's Main class.
Narration Only	When you set the Main class, the IDE knows which class to run when you run the project.
In the Files window >> show jar file	In addition, this ensures that the Main class element in the application's JAR file is generated when you build the application.
Right-click the ImageDisplayApp project's Node >> choose Properties.	Right-click the ImageDisplayApp project's Node in the Projects window, and choose Properties.
In the Project Properties dialog box >> select Run	In the Project Properties dialog box, select the Run category on the left side.
Click the Browse button next to Main Class field.	Click the Browse button, that is next to the Main Class field.
Select org.me.myimageapp.ImageDisplay class >> click Select Main Class button >> click on OK	Then select the org.me.myimageapp.ImageDisplay and click the Select Main Class button. Say OK here.
Right-click on the Project node >> select Clean & Build.	Right-click on the Project node, and select Clean & Build.
Point to Build Products of the application in the Files window.	You can view the Build Properties of the application in the Files window.
Point to the Build folder	The Build folder contains the compiled class.
Point to the dist folder	The dist folder contains an executable JAR file that contains the compiled class and the image.
Click on Run.	Now choose Run from the tool bar.
Switch to Output Window Point as per the narration.	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.
Slide 7 Assignment	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.
Switch to Netbeans Window Show solved assignment	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.
Slide Summary	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
Slide 8 About the Spoken Tutorial Project	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.
Slide 9 Spoken Tutorial Workshops	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 contact@spoken-tutorial.org
Slide 10 Acknowledgements	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.
Slide 11 About the Contributor	This tutorial has been contributed by IT for Change. Thank you

Contributors and Content Editors

Chandrika