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

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 window, and under the build folder,
05.29	under dist folder, you can see the jar file.
04.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 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.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14