II – Creating a GUI With JFC Swing1

LEARNING SWING WITH THE NETBEANS IDE

The goal of this lesson is to introduce the Swing API by designing a simple application that converts
temperature from Celsius to Fahrenheit.

From a programmer’s perspective, we will write the application in two stages:

1. Populate the GUI with various Swing components and arrange them accordingly.
2. Add the application logic so that the program can actually perform the calculations.

NETBEANS IDE BASICS

Basic features:
o Palette
o Design Area
o Property Editor
o Inspector

Palette
The Palette contains all of the components offered by the Swing API.

Design Area
The Design Area is where you will visually construct your GUI.

2 views:
 Design View = default view
 Source View = code view

Property Editor
The Property Editor allows you to edit the properties of each component.

Inspector
The Inspector provides a graphical representation of your application’s components.

SETTING UP THE CelsiusConverter PROJECT

Steps:
1. Create a New Project
2. Choose General -> Java Application
3. Set a Project Name
4. Add a JFrame form
5. Name the GUI class

CREATING THE CelsiusConverter GUI

As you drag components from the Palette to the Design Area, the IDE auto-generates the appropriate
source code.

Step 1: Set the Title

 Single-click the JFrame in the Inspector.
 Set the JFrame’s title with the Property Editor.
 II – Creating a GUI With JFC Swing2

 Type Celsius Converter as the title.

Step 2: Add a JTextField
 Drag a JTextField from the Palette to the upper left corner of the Design Area.
 Use the visual cues as guide for appropriate spacing.

Step 3: Add a JLabel

 Drag a JLabel onto the Design Area. Place it to the right of the JTextField

Step 4: Add a JButton

 Drag a JButton from the Palette and position it to the left and underneath the JTextField.

Step 5: Add a Second Label

 Add a second JLabel, repeating the process in step 2. Place it to the right of the JButton.

ADJUSTING THE CelsiusConverter GUI

There are different ways to adjust the position of GUI components.

Step 1: Set the Component Text

 Double-click the JTextField and erase the text.
 Double-click the JButton. Change it’s text from “JButton1” to “Convert”.
 Change the top JLabel text to “Celsius”.
 Change the buttom JLabel text to “Fahrenheit”.

Step 2: Set the Component Size

 Shift-click the JTextField and JButton components.
 Right-click Same Size -> Same Width.

Step 3: Remove Extra Space

 Grab the lower right-hand corner of the JFrame and adjust its size to eliminate extra whitespace.

ADDING THE CODE

Step 1: Change the Variable Names

 Right-click each variable name and choose “ Change variable name.”
jTextField1 tempTextField
jLabel1 celsiusLabel
jButton1 convertButton
jLabel2 fahrenheitLabel

Step 2: Register the Event Listeners

 Right-click the Convert button
 Choose Events -> Action -> ActionPerformed.

When an end-user interacts with a Swing GUI component, that component will generate a special
kind of object called an event object, which it will then broadcast to any other objects that have
previously registered themselves as listeners for that event.
 II – Creating a GUI With JFC Swing3

There are many event types representing various kinds of actions that an end-user can take.

Step 3: Add the Temperature Conversion Code

 Type the code below to the convertButtonActionPerformed method:

//Parse degree Celsius as a double and convert to Fahrenheit

int tempFahr = (int) ((Double.parseDouble(tempTextField.getText())) * 1.8 + 32);

fahrenheitLabel.setText (tempFahr + “Fahrenheit”);

Step 4: Run the Application

 Choose Run -> Run Main Project