From Script | Spoken-Tutorial
Jump to: navigation, search
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:
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 node and choose New > Java Package.
03:30 In the New Package Wizard, add '.resources' to ''.
03:40 So, the new package is now called
03:47 Click Finish.
03:49 In the Projects window, you should see the image appear within the 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 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
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
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