Java GUI & Event Handling

Goal of this topic:

• You know how to create frame using JFrame.

• You know how to create container using ContentPane.

• You know how to create label using JLabel.

• You know how to create text field using JTextField.

• You know how to create password field using JPasswordField.

• You know how to create button using JButton.

• You know how to create check box using JCheckBox.

• You know how to create radio button using JRadioButton.

• You know how to create layout for container using FlowLayout.

Java Foundation Classes (JFC)

• Java class libraries to support building a GUI and graphics functionality.

• Allows a consistent user interface for Java programs on different OS (e.g., Windows, Mac OS X or Linux).

• APIs (Application Programming Interface) provided in JFC:

– Abstract Window Toolkit (AWT)

– Swing

– Java 2D

Abstract Window Toolkit (AWT)

• Earliest toolkit that provides GUI for Java programs.

• Provided in JDK1.0 and 1.1.

• AWT provides:

– Basic GUI components

• Examples: Labels, buttons, scrollbars, etc.

– Infrastructure for GUI programming

• Examples: Event handling, layout management.

Swing

• Same concepts as AWT.

• Provided in Java 1.2 onwards.

• Swing has more sophisticated interface capabilities than AWT – offers features such as tabbed panes and the ability to change images on buttons.

GUI Class Hierarchy

Java GUI Components

Java GUI AWT Classes

Basic Steps to Build GUIs

Step 0: Design the GUI

Sketch the design of your GUI on a piece of paper.

Step 1: Determine the GUI components required

– JButton? JLabel? JTextfield?

JFrame

• JFrame is a type of container (object Container) which has its own window and frame.

• JFrame can be the basic container for user interface components in Java GUI applications.

import javax.swing.*;

public class FrameApp extends JFrame{

public FrameApp(){}

public static void main(String[] args){

FrameApp frame = new FrameApp();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setTitle("My Frame");

frame.setSize(300, 200);

frame.setVisible(true);

}

}

ContentPane

• JFrame also has container ContentPane which becomes the main container on frame window.

• All Swing components are put into this ContentPane.

• Example:

import java.awt.Color;

import java.awt.Container;

import java.awt.FlowLayout;

import javax.swing.*;

public class FrameApp extends JFrame{

public FrameApp(){

Container pane = getContentPane();

pane.setBackground(Color.gray);

pane.setLayout(new FlowLayout());

}

public static void main(String[] args){

FrameApp frame = new FrameApp();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setTitle("My Frame");

frame.setSize(300, 200);

frame.setVisible(true);

}

}

JLabel

• A label is a display area for a short text, an image, or both.

• Labels are represented as JLabel objects.

The constructors for JLabel:

• JLabel()

• JLabel(String text, int horizontalAlignment)

• JLabel(String text)

• JLabel(Icon icon)

• JLabel(Icon icon, int horizontalAlignment)

• JLabel(String text, Icon icon, int horizontalAlignment)

import java.awt.Color;

import java.awt.Container;

import java.awt.GridLayout;

import javax.swing.*;

public class FrameApp extends JFrame{

JLabel label1 = new JLabel("Username:", SwingConstants.CENTER);

JLabel label2 = new JLabel("Password:", SwingConstants.CENTER);

public FrameApp(){

Container pane = getContentPane();

pane.setBackground(Color.white);

pane.setLayout(new GridLayout(3,2));

pane.add(label1);

pane.add(label2);

}

public static void main(String[] args){

FrameApp frame = new FrameApp();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setTitle("My Frame");

frame.setSize(300, 200);

frame.setVisible(true);

}

}

JTextField

• A text field is an input area where the user can type in characters. Text fields are useful because they allow user to enter in variable data (such as a name or a description).

• Text fields are represented as JTextField objects.

The constructors for JTextField are:

• JTextField(int columns) Creates an empty text field with the specified number of columns.

• JTextField(String text) Creates a text field initialized with the specified text.

• JTextField(String text, int columns) Creates a text field initialized with the specified text and the column size.

import java.awt.Color;

import java.awt.Container;

import java.awt.GridLayout;

import javax.swing.*;

public class FrameApp extends JFrame{

JLabel label1 = new JLabel("Username:", SwingConstants.CENTER);

JLabel label2 = new JLabel("Password:", SwingConstants.CENTER);

JTextField username = new JTextField(10);

JPasswordField password = new JPasswordField(10);

public FrameApp(){

Container pane = getContentPane();

pane.setBackground(Color.white);

pane.setLayout(new GridLayout(3,2));

pane.add(label1);

pane.add(username);

pane.add(label2);

pane.add(password);

}

public static void main(String[] args){

FrameApp frame = new FrameApp();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setTitle("My Frame");

frame.setSize(300, 200);

frame.setVisible(true);

}

}

JTextField.setText() Method

The value of a text field can be set by sending a setText() message to the JTextField object.

Example:

JTextField status = new JTextField(10);

… status.setText("Login failed!");

JTextField.getText() Method

The value of a text field can be retrieved by sending a getText() message to the JTextField object.

Example:

JTextField tfName = new JTextField(10);

… String name = tfName.getText();

JTextField.setColumns() Method

The length of a textfield can be changed by sending a setColumns() message to the JTextField object.

Example:

JTextField tf = new JTextField(10);

… tf.setColumns(20);

JTextField.setEditable() Method

Sometimes we would like to make a text field non-editable; in other words, the user is not allowed to modify its value.

This is achieved by sending a setEditable() message to the JTextField object.

Example:

JTextField status = new JTextField(10); status.setEditable(false);

JPasswordField

• A password field is a special kind of text field.

• Password fields are represented as JPasswordField objects.

• To create a JPasswordField object:

public JPasswordField(int length)

where: length:length of field (in columns)

• JPasswordField is a subclass of JTextField – it inherits methods from JTextField.

JButton

• JButton inherits AbstractButton and provides several constructors to create buttons.

• The constructors for JButton:

public class FrameApp extends JFrame{

JLabel label1 = new JLabel("Username:", SwingConstants.CENTER);

JLabel label2 = new JLabel("Password:", SwingConstants.CENTER);

JTextField username = new JTextField(10);

JPasswordField password = new JPasswordField(10);

JButton button1 = new JButton("Login");

public FrameApp(){

Container pane = getContentPane();

pane.setBackground(Color.white);

pane.setLayout(new GridLayout(3,2));

pane.add(label1);

pane.add(username);

pane.add(label2);

pane.add(password);

pane.add(new JLabel(""));

pane.add(button1);

}

public static void main(String[] args){

FrameApp frame = new FrameApp();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setTitle("My Frame");

frame.setSize(300, 200);

frame.setVisible(true);

}

}

JCheckBox

• Check boxes allow user to choose more than one from many options.

• Check boxes are represented as JCheckBox objects.

The constructors for JCheckBox:

import javax.swing.*;

import java.awt.*;

public class JCheckBoxApp extends JFrame{

JCheckBox box1 = new JCheckBox("Java", true);

JCheckBox box2 = new JCheckBox("C++");

JCheckBox box3 = new JCheckBox("Smalltalk");

JCheckBox box4 = new JCheckBox("Ruby");

public JCheckBoxApp(){

Container pane = getContentPane();

pane.setBackground(Color.white);

pane.setLayout(new FlowLayout());

pane.add(box1);

pane.add(box2);

pane.add(box3);

pane.add(box4);

}

public static void main(String[] args){

JCheckBoxApp frame = new JCheckBoxApp();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setTitle("My Frame");

frame.setSize(300, 200);

frame.setVisible(true);

}

}

JCheckBox.isSelected() Method

Current status of a check box can be acquired by sending an isSelected() message to the JCheckBox object.

Example:

JCheckBox cbox = new JCheckBox("C");

… if (cbox.isSelected()) { /*

The check box is selected */ …

}

else { /* The check box is not selected*/ …

JRadioButton

• Radio buttons ensure that user chooses only one from many options.

• Radio buttons are represented as JRadioButton objects.

The constructors for JRadioButton:

import java.awt.Color;

import java.awt.Container;

import java.awt.FlowLayout;

import javax.swing.*;

public class JRadioButtonApp extends JFrame{

JRadioButton btn1 = new JRadioButton("Java", true);

JRadioButton btn2 = new JRadioButton ("C++");

JRadioButton btn3 = new JRadioButton ("Smalltalk");

JRadioButton btn4 = new JRadioButton ("Ruby");

public JRadioButtonApp (){

Container pane = getContentPane();

pane.setBackground(Color.white);

pane.setLayout(new FlowLayout());

pane.add(btn1);

pane.add(btn2);

pane.add(btn3);

pane.add(btn4);

}

public static void main(String[] args){

JRadioButtonApp frame = new JRadioButtonApp();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setTitle("My Frame");

frame.setSize(300, 200);

frame.setVisible(true);

}

}

ButtonGroup Objects

• Observe what happens when another radio button in the example is selected ..

• We need to use a ButtonGroup object to group radio buttons so that only one of them can be selected at a time.

import java.awt.Color;

import java.awt.Container;

import java.awt.FlowLayout;

import javax.swing.*;

public class JRadioButtonApp extends JFrame{

JRadioButton btn1 = new JRadioButton("Java", true);

JRadioButton btn2 = new JRadioButton ("C++");

JRadioButton btn3 = new JRadioButton ("Smalltalk");

JRadioButton btn4 = new JRadioButton ("Ruby");

public JRadioButtonApp (){

Container pane = getContentPane();

pane.setBackground(Color.white);

pane.setLayout(new FlowLayout());

ButtonGroup bgrp = new ButtonGroup();

bgrp.add(btn1);

bgrp.add(btn2);

bgrp.add(btn3);

bgrp.add(btn4);

pane.add(btn1);

pane.add(btn2);

pane.add(btn3);

pane.add(btn4);

}

public static void main(String[] args){

JRadioButtonApp frame = new JRadioButtonApp ();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setTitle("Radio Button");

frame.setSize(300, 200);

frame.setVisible(true);

}

}

Step 2: Determine the layout of GUI components for each container

• Which layout manager to use? FlowLayout? GridLayout? BorderLayout?

• The UI components are placed in containers. Each container has a layout manager to arrange the UI components within the container.

• Layout managers are set in containers using the setLayout(LayoutManager) method in a container.

• A number of layout managers are provided in the java.awt package. Some of them are listed below:

– FlowLayout

– GridLayout

– BorderLayout

– CardLayout

– GridBagLayout

– BoxLayout

FlowLayout

• A FlowLayout object arranges components in a container from left to right, row by row from top to bottom.

• The simplest layout, but difficult to control the position of its components.

• The default layout manager for object JPanel and JApplet .

• Components can be aligned to the – left – right – center

Constructor FlowLayout()

/*creates a default FlowLayout object (components will be center-aligned)*/

Example:

import javax.swing.*;

import java.awt.*;

class FlowLayoutApp extends JFrame {

public FlowLayoutApp() {

Container pane = getContentPane();

pane.setBackground(Color.white);

pane.setLayout(new FlowLayout());

pane.add(new JLabel("Search"));

pane.add(new JTextField(10));

pane.add(new JButton("Submit"));

pane.add(new JButton("Help"));

}

public static void main(String[] args) {

FlowLayoutApp frame = new FlowLayoutApp();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setTitle("My Frame - FlowLayout");

frame.setSize(400, 200);

frame.setVisible(true);

}

}

change frame size:

frame.setSize(300, 200);

align it to left:

pane.setLayout(new FlowLayout(FlowLayout.LEFT));

change into

pane.setLayout(new FlowLayout(FlowLayout.LEFT, 20, 15));

compile again and look at the output.

Step 3: Determine how to handle events (Event-Driven Programming)

– What to do when the user clicks the OK button