Handling Images in a Java GUI Application
To complete this tutorial, you need the following software and resources.
Handling images in an application is a common problem for many beginning Java
programmers. The standard way to access images in a Java application is
by using the
This tutorial shows you how to
use the IDE's GUI Builder to generate the code to include images (and other resources)
in your application. In addition, you will learn how
to customize the way the IDE generates image handling code.
The application that results from this tutorial will be a simple JFrame that
contains one JLabel that displays a single image.
Creating the Application
- Choose File > New Project.
- In the New Project wizard, select Java > Java Application and click Next.
- For Project Name, type
- Clear the Create Main Class checkbox.
- Click Finish.
Creating the Application Form
In this section, you create the JFrame form and add a JLabel to the form.
To create the JFrame form:
- In the Projects window, expand the ImageDisplayApp node.
- Right-click the Source Packages node and choose New > JFrame Form.
- For Class Name, type
- For Package Name, type
- Click Finish.
To add the JLabel:
- In the Palette, select the Label component and drag it to the JFrame.
For now, the form should look something like the following image:
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 resources. On your local filesystem,
a package corresponds with a folder.
To create a package for the image:
- In the Projects window, right-click the
node and choose New > Java Package.
- Click Finish.
In the Projects window, you should see a new package appear within the
Source Packages folder.
Displaying the Image on the Label
In this application, the image will be embedded within a JLabel component.
To 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 the Properties category and
scroll to the Icon property.
- Click the ellipsis (...) button.
The icon property editor is displayed.
- In the icon property dialog box, click Import to Project.
- In the file chooser navigate to any image that is on your system that you want to use.
Then click Next.
- In the Select target folder page of the wizard, select the
newpackage folder and click Finish.
- Click OK to close the icon property dialog box.
After you click OK, the IDE does the following things:
- Copies the image to your project. Therefore, when you build and distribute the application,
the image is included in the distributable JAR file.
- Generates code in the ImageDisplay class to access the image.
- Displays your image on the label in the Design view of your form.
At this point, you can do some simple things to improve the appearance of the
form, such as:
- In the Properties window, select the
text property and delete
jLabel1. 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 that
text is not needed.
- Drag the
jLabel1 to the center of the form.
To view the generated code:
- In the GUI Designer, click the Source button. (Choose View > Source Editor Toolbar from the main menu if the Source button is hidden.)
- Scroll down to the line that says Generated Code.
- Click the plus sign (+) to the left of the Generated Code line to display
the code that the GUI Designer has generated.
The key line is the following:
jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/org/me/myimageapp/newpackage/image.png"))); // NOI18N
Since you have used the property editor for
the IDE has generated the
setIcon method. The parameter of that method
contains a call to the
method on an anonymous inner class of
Notice that the generated path for the image corresponds with its location in
the application's package structure.
- If you use the External Image option in the
icon property editor, the IDE will
generate an absolute path to the image instead of copying the image to your project.
Therefore, the image would appear when you run the application on your system, but
it would probably not appear when running the application on another system.
getResource method is also useful
for accessing other types of resources, such as text files that
contain data that your application might need to use.
To register event handlers for mouse events on the Jlabel:
In the Design View, right-click the JLabel and choose Events > Mouse > mouseClicked/mousePressed/mouseReleased from the popup menu.
An event handler is generated for the corresponding event.
Note: You can get the mouse coordinates (for example, the location of a mouse
click) in the event handler using the
event.getY() methods. See Class MouseEvent for details.
Building and Running the Application
Now that you have generated the code for accessing and
displaying the image, you can build and run the application to ensure that the
image is accessed.
First you need to set the project's main class. When you set the main
class, the IDE knows which class to run when you run the project.
In addition, this ensures that the
Main-Class element in the application's
JAR file is generated when you build the application.
To set the project's main class:
- Right-click the ImageDisplayApp project's node and
- In the Project Properties dialog box, select the Run
- Click the Browse button that is next to the Main Class
field. Then select the
- Click the Select Main Class button.
- Click OK to close the Project Properties dialog box.
To build the project:
- Choose Run > Clean & Build Project (project_name) from the main toolbar.
You can view the build products of the application in the Files
build folder contains the compiled class.
dist folder contains a
runnable JAR file that contains the compiled class and the image.
To run the project:
- Choose Run > Run Project (project_name) from the main toolbar.
Creating Custom Code
In many applications, the image that is displayed is not determined
statically like it is in this example. For example, the image to display
might be determined by something that the user clicks.
If you need to be
able to choose
the image to display programmatically, you can write your own custom code
to access and display resources. The IDE prevents you from writing code
directly in the Source view's "guarded blocks" that contain code generated by
the GUI Builder. However, you can insert code in the guarded blocks through
property editors that you can access through
the Properties window. Using the property editors in this manner ensures that
your custom code is not lost when you make design changes in the GUI Builder.
For example, to write custom code for a JLabel's
- Select the JLabel in the Design View or in the Navigator window.
- In the Properties window, click the ellipsis (...) button that is
next to the
- From the dropdown list at the top of the dialog box, select
the Custom Code option.
The Custom Code option in this property editor lets you fill in the
parameter of the
method yourself. You can fill in this parameter with the necessary logic
or with a call to a separate method that you have hand-coded elsewhere
in the class.
This tutorial has shown you how to access images from an application
that you create in the NetBeans IDE. Image handling is further discussed in the
Note: The example given in this tutorial is very similar to the first
example in the
How to Use Icons section
of the Java Tutorial. One difference is that the code that is generated when you follow
this tutorial uses
method to apply the
icon to the label. In the Java Tutorial example, the icon is applied to the label
by being passed through its constructor.