Chapter-5

CREATING GRAPHICAL USER INTERFACES

Introduction

A graphical user interface (GUI) makes a system user friendly and easy to use. Creating a GUI requires
creativity and knowledge of how GUI components work. Since the GUI components in Java are very
flexible and versatile, you can create a wide assortment of useful user interfaces.

The GUI API contains classes that can be classified into three groups: component classes, container
classes, and helper classes. Their hierarchical relationships are shown in Figure 5.1.

The component classes, such as JButton, JLabel, and JTextField, are for creating the user interface. The
container classes, such as JFrame, JPanel, and JApplet, are used to contain other components. The
helper classes, such as Graphics, Color, Font, FontMetrics, and Dimension, are used to support GUI
components.

Fig 5.1. Java GUI programming utilizes the classes shown in this hierarchical diagram.

Frames
To create a user interface, you need to create either a frame or an applet to hold the user-inter-face
components.

JFrame: to creat a frame for Java standalone application.

JApplet: to create an applet for java applet application.
Example-1 : Creating a Frame

import javax.swing.JFrame;
public class MyFrame{
public static void main(String[] args) {
JFrame frame = new JFrame("MyFrame"); // Create a frame
frame.setSize(400, 300); // Set the frame size
frame.setLocationRelativeTo(null);// Center a frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setVisible(true); // Display the frame

}
}

When you run the above program the result will be here below

Buttons
A button is a component that triggers an action event when clicked.
Example-2 creating a button :
import javax.swing.JButton;
import javax.swing.JFrame;
public class MyFrame{
public static void main(String[] args) {
JButton btn= new JButton("OK");
JFrame frame = new JFrame("MyFrame"); // Create a frame
frame.setSize(200, 200); // Set the frame size
frame.setLocationRelativeTo(null);// Center a frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true); // Display the frame
frame.add(btn);
}
}
Output:

Text Fields
A text field can be used to enter or display a string.
Example-3 creating of a text filed.
import javax.swing.JFrame;
import javax.swing.JTextField;
public class MyFrame{
public static void main(String[] args) {
JTextField btn= new JTextField(" your can wriet here ");
JFrame frame = new JFrame("MyFrame"); // Create a frame
frame.setSize(200, 200); // Set the frame size
frame.setLocationRelativeTo(null);// Center a frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true); // Display the frame
frame.add(btn);
}
}
Output:

Layout Managers
In many other window systems, the user-interface components are arranged by using hard-coded pixel
measurements. For example, put a button at location (10, 10) in the window.
Using hard-coded pixel measurements, the user interface might look fine on one system but be
unusable on another. Java’s layout managers provide a level of abstraction that automatically maps your
user interface on all window systems.

three basic layout managers: FlowLayout, GridLayout, and Bord-erLayout.

FlowLayout:

FlowLayout is the simplest layout manager. The components are arranged in the container from left to
right in the order in which they were added. When one row is filled, a new row is started. You can
specify the way the components are aligned by using one of three constants: FlowLayout.RIGHT,
FlowLayout.CENTER, or FlowLayout.LEFT. You can also specify the gap between components in pixels.

Example :

import java.awt.FlowLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;
public class MyFrame extends JFrame{
MyFrame(){
setLayout( new FlowLayout(FlowLayout.LEFT, 10, 20));
add(new JLabel("First Name"));
add(new JTextField(8));
add(new JLabel("MI"));
add(new JTextField(1));
add(new JLabel("Last Name"));
add(new JTextField(8));
}
public static void main(String[] args) {
MyFrame frame= new MyFrame();
frame.setSize(200, 200);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);

}
}
Output:
GridLayout:

The GridLayout manager arranges components in a grid (matrix) formation. The compo-nents are placed
in the grid from left to right, starting with the first row, then the second, and so on, in the order in which
they are added.

You can specify the number of rows and columns in the grid. The basic rule is as follows:

 The number of rows or the number of columns can be zero, but not both. If one is zero and the
other is nonzero, the nonzero dimension is fixed, while the zero dimension is determined
dynamically by the layout manager. For example, if you specify zero rows and three columns for
a grid that has ten components, GridLayout creates three fixed columns of four rows, with the
last row containing one component. If you specify three rows and zero columns for a grid that
has ten components, GridLayout creates three fixed rows of four columns, with the last row
containing two components.
 If both the number of rows and the number of columns are nonzero, the number of rows is the
dominating parameter; that is, the number of rows is fixed, and the layout manager dynamically
calculates the number of columns. For example, if you specify three rows and three columns for
a grid that has ten components, GridLayout creates three fixed rows of four columns, with the
last row containing two components.

Example:

import java.awt.GridLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;

public class MyFrame extends JFrame{

MyFrame(){
setLayout( new GridLayout(3,2,5,5));
add(new JLabel("First Name"));
add(new JTextField(8));
add(new JLabel("MI"));
add(new JTextField(1));
add(new JLabel("Last Name"));
add(new JTextField(8));
}

public static void main(String[] args) {

MyFrame frame= new MyFrame();
frame.setSize(200, 200);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);

}
}
Output:

BorderLayout

The BorderLayout manager divides a container into five areas: East, South, West, North, and Center.
Components are added to a BorderLayout by using add(Component,index), where index is a constant
BorderLayout.EAST,BorderLayout.SOUTH,BorderLayout.WEST,BorderLayout.NORTH,or
BorderLayout.CENTER.

The components are laid out according to their preferred sizes and their placement in the container. The
North and South components can stretch horizontally; the East and West components can stretch
vertically; the Center component can stretch both horizontally and vertically to fill any empty space.

Example:

import java.awt.BorderLayout;
import javax.swing.JButton;
import javax.swing.JFrame;

public class MyFrame extends JFrame{

MyFrame(){
setLayout( new BorderLayout(5,10) );
add(new JButton("EAST"),BorderLayout.EAST);
add(new JButton("WEST"),BorderLayout.WEST);
add(new JButton("SOUTH"),BorderLayout.SOUTH);
add(new JButton("NORTH"),BorderLayout.NORTH);
add(new JButton("CENTER"),BorderLayout.CENTER);

}
public static void main(String[] args) {
MyFrame frame= new MyFrame();
frame.setSize(300, 300);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);

}
}
Output:

Using Panels
Suppose that you want to place ten buttons and a text field in a frame. The buttons are placed in grid
formation, but the text field is placed on a separate row. It is difficult to achieve the desired look by
placing all the components in a single container. With Java GUI programming, you can divide a window
into panels. Panels act as sub-containers to group user-interface components. You add the buttons in
one panel, then add the panel into the frame.
Example:

Write a program that display the following Graphical user interface?

import java.awt.BorderLayout;
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;

public class MyFrame extends JFrame{

MyFrame(){
JPanel p1 = new JPanel();
p1.setLayout(new GridLayout(4, 3));
for (int i = 1; i <= 9; i++) {
p1.add(new JButton("" + i));
}

p1.add(new JButton("" + 0));

p1.add(new JButton("Start"));
p1.add(new JButton("Stop"));
// Create panel p2 to hold a text field and p1
JPanel p2 = new JPanel(new BorderLayout());
p2.add(new JTextField("Time to be displayed
here"),BorderLayout.NORTH);
p2.add(p1, BorderLayout.CENTER);
// add contents into the frame
add(p2, BorderLayout.EAST);
add(new JButton("Food to be placed here"), BorderLayout.CENTER);

public static void main(String[] args) {

MyFrame frame= new MyFrame();
frame.setSize(300, 300);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);

}
}

Event and Event Source

When you run a Java GUI program, the program interacts with the user, and the events drive its
execution. An event can be defined as a signal to the program that something has happened. Events are
triggered either by external user actions, such as mouse movements, button clicks, and keystrokes, or by
internal program activities, such as a timer. The program can choose to respond to or ignore an event.
Reading Assignment : Event handling mechanism