Training Index

Java^TM Programming Language Basics, Part 1
Lesson 4: Building A User Interface

[<<BACK] [CONTENTS] [NEXT>>]

In the last lesson you saw how the Applet class provides a Panel component so you can design the applet's user interface. This lesson expands the basic application from Lessons 1 and 2 to give it a user interface using the Java^TM Foundation Classes (JFC) Project Swing APIs that handle user events.

• Project Swing APIs
• Import Statements
• Class Declaration
• Instance Variables
• Constructor
• Action Listening
• Event Handling
• Main Method
• Applets Revisited
• More Information

---

Project Swing APIs

In contrast to the applet in Lesson 3 where the user interface is attached to a panel object nested in a top-level browser, the Project Swing application in this lesson attaches its user interface to a panel object nested in a top-level frame object. A frame object is a top-level window that provides a title, banner, and methods to manage the appearance and behavior of the window.

The Project Swing code that follows builds this simple application. The window on the left appears when you start the application, and the window on the right appears when you click the button. Click again and you are back to the original window on the left.

When Application Starts

When Button Clicked

Import Statements

Here is the SwingUI.java code. At the top, you have four lines of import statements. The lines indicate exactly which Java^TM API classes the program uses. You could replace four of these lines with this one line: import java.awt.*;, to import the entire awt package, but doing that increases compilation overhead than importing exactly the classes you need and no others.

import java.awt.Color;
import java.awt.BorderLayout;
import java.awt.event.*;
import javax.swing.*;

class SwingUI extends JFrame
        implements ActionListener{

   JLabel text, clicked;
   JButton button, clickButton;
   JPanel panel;
   private boolean _clickMeMode = true;

   SwingUI(){
     text = new JLabel("I'm a Simple Program");
     clicked = new JLabel("Button Clicked");

     button = new JButton("Click Me");
//Add button as an event listener
     button.addActionListener(this);

     clickButton = new JButton("Click Again");
//Add button as an event listener
     clickButton.addActionListener(this);

//Create panel
     panel = new JPanel();
//Specify layout manager and background color
     panel.setLayout(new BorderLayout(1,1));
     panel.setBackground(Color.white);
//Add label and button to panel
     getContentPane().add(panel);
     panel.add(BorderLayout.CENTER, text);
     panel.add(BorderLayout.SOUTH, button);
   }

When the JPanel object is created, the layout manager and background color are specified. The layout manager in use determines how user interface components are arranged on the display area.

The code uses the BorderLayout layout manager, which arranges user interface components in the five areas shown at left. To add a component, specify the area (north, south, east, west, or center).

//Create panel
     panel = new JPanel();
//Specify layout manager and background color
     panel.setLayout(new BorderLayout(1,1));
     panel.setBackground(Color.white);
//Add label and button to panel
     getContentPane().add(panel);
     panel.add(BorderLayout.CENTER, text);
     panel.add(BorderLayout.SOUTH, button);
   }

The component classes have the appropriate add methods to add action listeners to them. In the code the JButton class has an addActionListener method. The parameter passed to addActionListener is this, which means the SwingUI action listener is added to the button so button-generated actions are passed to the actionPerformed method in the SwingUI object.

     button = new JButton("Click Me");
//Add button as an event listener
     button.addActionListener(this);

   public void actionPerformed(ActionEvent event){
     Object source = event.getSource();
        if (_clickMeMode) {
          text.setText("Button Clicked");
          button.setText("Click Again");
          _clickMeMode = false;
        } else {
          text.setText("I'm a Simple Program");
          button.setText("Click Me");
          _clickMeMode = true;
        }
   }

public static void main(String[] args){
//Create top-level frame
  SwingUI frame = new SwingUI();
  frame.setTitle("Example");
//This code lets you close the window
  WindowListener l = new WindowAdapter() {
     public void windowClosing(WindowEvent e) {
       System.exit(0);
     }
  };
    frame.addWindowListener(l);
//This code lets you see the frame
  frame.pack();
  frame.setVisible(true);
 }
}

This approach takes only a few lines of code, while implementing the WindowListener interface would require 6 empty method implementations. Be sure to add the WindowAdapter object to the frame object so the frame object will listen for window events.

   WindowListener l = new WindowAdapter() {
 //The instantiation of object l is extended to 
 //include this code:
     public void windowClosing(WindowEvent e){
        System.exit(0);
     }
   }; 
   frame.addWindowListener(l);

[TOP]