Name: Score:

Student No. Date:

Computer No.

Exercise No. 1. Creating a Java Swing Application Program

I. Objectives

At the end of this activity, the students are expected to:

1. Familiarize themselves with the NetBeans IDE

2. Create and a simple GUI design using objects from Java Swing Package
3. Set up properties of a Java Swing object
4. Use the Netbeans Inspector window in changing variable names

II. Discussion

The NetBeans

 NetBeans is an open-source project dedicated to providing rock solid software development

products (the NetBeans IDE and the NetBeans Platform) that address the needs of
developers, users and the businesses who rely on NetBeans as a basis for their products
 In June 2000, NetBeans was made open source by Sun Microsystems, which remained the
project sponsor until January 2010 when Sun Microsystems became a subsidiary of Oracle.
 The two base products, the NetBeans IDE and NetBeans Platform, are free for commercial
and non-commercial use
 The source code to both is available to anyone to reuse as they see fit, within the terms of
use
 The legal section contains information regarding licensing, copyright issues, privacy policy
and terms of use.
 The NetBeans project is also a vibrant community in which people from across the globe can
ask questions, give advice, contribute and ultimately share in the success of our products.
On the NetBeans mailing lists and forums, you will find posts from students, developers
from top companies, and individuals looking to expand their skills.

The NetBeans IDE Basics

The Palette

 Palette contains all of the components offered by the Swing API, as shown in figure 1
.
 Figure 1. The Netbeans IDE Pallette

The Design Area

 The design area is where you will visually construct your GUI.
 It has two views: source view, and design view.
 Design view is the default, as shown in figure 2.
 You can toggle between views at any time by clicking their respective tabs.
 Figure 2. The NetBeans Deasign Area

Figure 2 shows a single JFrame object, as represented by the large shaded rectangle
with blue border. Commonly expected behavior (such as quitting when the user clicks the
"close" button) is auto-generated by the IDE and appears in the source view between uneditable
blue sections of code known as guarded blocks as shown in figure 3.
 Figure 3. The guarded block of JFrame form

A quick look at the source view reveals that the IDE has created a private method
named initComponents, which initializes the various components of the GUI. It also tells the
application to "exit on close", performs some layout-specific tasks, then packs the (soon to be
added) components together on screen.

The Property Editor

 It allows users to edit the properties of each component

 The Property Editor is intuitive to use; in it, users will see a series of rows — one row per
property — that the user can click and edit without entering the source code directly
 Figure 4 shows the Property Editor for the newly added JFrame object:
 Figure 4. The JFrame form properties window

 The properties window shows the various properties of the object, such as background color,
foreground color, font, and cursor.

The Inspector

 The last component of the NetBeans IDE that we will use in this lesson is the Inspector (figure 5)
 The Inspector provides a graphical representation of the application's components.
 We will use the Inspector only once, to change a few variable names to something other than
their defaults.
 Figure 5. The Inspector

III. Procedure

Step 1: Create a New Project

1. To create a new project, launch the NetBeans IDE and choose New Project from the File
menu, as shown in figure 6.
 Figure 6. Creating a New Project

2. Next, to create a new Java Application, select General from the Categories column,
and Java Application from the Projects column as shown in figure 7.
 Figure 7. The Java New Application Window selection menu

Press the button labeled "Next" to proceed.

3. For our first Java Swing application project, enter “CelsiusConverterProject” as the
project name as shown in figure 8. You can leave the Project Location and Project Folder fields
set to their default values, or click the Browse button to choose an alternate location on your
`system.
 Figure 8. The New Java Application Menu Window

Make sure to deselect the "Create Main Class" checkbox; leaving this
option selected generates a new class as the main entry point for the application, but our main
GUI window (created in the next step) will serve that purpose, so checking this box is not
necessary. Click the "Finish" button when you are done.

4. When the IDE finishes loading, you will see a screen similar to figure 9. All panes will be empty
except for the Projects pane in the upper left hand corner, which shows the newly created
project.
 Figure 9. The Java Swing Application Window

5. Now, right-click the CelsiusConverterProject name and choose New -> JFrame
Form to create our form, as shown in figure 10. (JFrame is the Swing class responsible for the
main frame for your application.)
 Figure 10. Create a new Java Frame form

6. Next, type CelsiusConverterGUI as the class name, and learn as the package name, as
shown in figure 11. You can actually name this package anything you want, but for conventional
purposes, we stick with the package name.
 Figure 11. The new JFrame form window

The remainder of the fields should automatically be filled in. Click the Finish button
when you are done.

7. When the IDE finishes loading, the right pane will display a design-time, graphical view of the
CelsiusConverterGUI, as shown in figure 12. It is on this screen that you will visually drag,
drop, and manipulate the various Swing components.
 Figure 12. The CelsiusConverterProject Swing Application IDE

Creating the CelsiusConverter GUI

Set the Title

1. First, set the title of the application's JFrame to "Celsius Converter", by right-clicking
the JFrame in the Inspector and selecting properties.
2. Then, set its title with the Property Editor, as shown in figure 13.
 Figure 13. Setting the Title

Note:

 You can set the title by either double-clicking the title property and entering the new text
directly, or by clicking the button and entering the title in the provided field.
 Or, as a shortcut, you could single-click the JFrame of the inspector and enter its new text directly
without using the property editor.

Step 2: Add a JTextField

1. Next, drag a JTextField from the Palette to the upper left corner of the Design Area. As you
approach the upper left corner, the GUI builder provides visual cues (dashed lines) that suggest
the appropriate spacing. Using these cues as a guide, drop a JTextField into the upper left
hand corner of the window as shown in figure 14.
 Figure 14. Adding a JTextField

2. You may be tempted to erase the default text "JTextField1", but just leave it in place for now.

Step 3: Add a JLabel

1. Next, drag a JLabel onto the Design Area. Place it to the right of the JTextField,
again watching for visual cues that suggest an appropriate amount of spacing. Make sure
that text base for this component is aligned with that of the JTextField. The visual cues
provided by the IDE should make this easy to determine, as shown in figure 15.
 Figure 15. Adding a JLabel

Step 4: Add a JButton

1. Next, drag a JButton from the Palette and position it to the left and underneath the
JTextField. Again, the visual cues help guide it into place, as shown in figure 16.

Figure 16. Adding a JButton

 2. You may be tempted to manually adjust the width of the JButton and JTextField,
but just leave them as they are for now.

Step 5: Add a Second JLabel

1. Finally, add a second JLabel, repeating the process in step 2. Place this second label to the
right of the JButton, as shown in figure 17.

Figure 17. Adding a Second JLabel

Adding the Application Logic

Step 1: Change the Default Variable Names

1. Figure 18 shows the default variable names as they currently appear within the Inspector.
For each component, the variable name appears first, followed by the object's type in
square brackets. For example, jTextField1 [JTextField] means that "jTextField1"
is the variable name and "JTextField" is its type.
 Figure 17. The default variable names

The default names are not very relevant in the context of this application, so it makes sense to
change them from their defaults to something that is more meaningful. Right-click each variable name
and choose "Change variable name." . Change the variable names as:

jTextField1  tempTextfield
jLabel1  celsiusLabel
jButton1  convertButton
jLabel2  fahrenheitLabel

Your inspector window should resemble figure 18.

 Figure 18. The Inspector window with new variable names

Step 2: Register the Event Listeners

Event object

 A special kind of object that the component generates when an end-user interacts with a Swing
GUI component (such as clicking the Convert button)
 Broadcasted to any other objects that have previously registered themselves as listeners for that
event. The NetBeans IDE makes event listener registration extremely simple, as shown in figure
19.
 Figure 19. The Java Swing events

1. In the Design Area, click on the Convert button to select it. Make sure that only the Convert
button is selected.
2. Right-click the Convert button and choose Events -> Action -> ActionPerformed.
This will generate the required event-handling code, leaving you with empty method bodies in
which to add our own functionality (as shown in figure 20):
 Figure 20. The convertButtonActionPerformed source code window

Step 3: Add the Temperature Conversion Code

1. The final step is to simply paste the temperature conversion code into the empty method body.
The following code is all that is necessary to convert a temperature from Celsius to Fahrenheit:

//Parse degrees Celsius as a double and convert to Fahrenheit.

int tempFahr = (int)((Double.parseDouble(tempTextField.getText()))
* 1.8 + 32);
fahrenheitLabel.setText(tempFahr + " Fahrenheit");

2. Simply copy this code and paste it into the convertButtonActionPerformed method as
shown in figure 20.
 Figure 20. convertButtonActionPerformed method

Step 4: Run the Application

1. Running the application is simply a matter of choosing Run -> Run Main Project
within the NetBeans IDE. The first time you run this application, you will be prompted with a
dialog asking to set CelsiusConverterGUI as the main class for this project. Click the OK
button, and when the program finishes compiling, you should see the application running in
its own window.