UNIT 3: GUI PROGRAMMING

❖ GUI BASICS

GUI, which stands for Graphical User Interface, is a user-friendly visual experience
builder for Java applications. It comprises graphical units like buttons, labels, windows,
etc. via which users can connect with an application. Abstract Window Toolkit can be
used to create GUI based applications.Now a days Java Swings are used to create GUI
based applications than AWT as Swings provide richer implementation than AWT.

● Java AWT (Abstract Window Toolkit) is an API to develop Graphical User Interface
(GUI) or windows-based applications in Java.
● Java AWT components are platform-dependent i.e. components are displayed
according to the view of operating system. AWT is heavy weight i.e. its
components are using the resources of underlying operating system (OS).
● The java.awt package provides classes for AWT API such as TextField, Label,
TextArea, RadioButton, CheckBox, Choice, List etc.

A GUI comprises an array of user interface elements. All these elements are displayed
when a user is interacting with an application and they are as follows:

● Input commands such as buttons, check boxes, dropdown lists and text fields.
● Informational components like banners, icons, labels or notification dialogs.
● Navigational units like menus, sidebars and breadcrumbs.

The Java GUI Subsystem

The Java GUI subsystem consists of a separate, autonomous task execution

thread called the "event loop". Every action that affects the GUI, e.g. calls to
repaint the screen or to manipulate the properties of a GUI component, or is a
result of something happening to the GUI, e.g. the user clicks the mouse or hits a
key, is encapsulated in the form of an "event" that is placed into a queue for the
event loop to process. The result of processing an event may be a manipulation
of the bits of color on the screen or it may result in calls to methods in the
developer's code.
 If we look at the process to handle the clicking of a button, what we see is that the
user's mouse click sets off a chain of events. The button object responds to the
mouse click by creating a button click event that is placed into the event queue.
The event loop, when it is free to do so, picks up that event and processes it. The
processing of a button click event involves calling methods on specially registered
objects called "listeners" who are "listening" for the click event. The listeners for a
button click are objects implementing the java.awt.ActionListener interface
and the button click event processing involves calling the listener's
actionPerformed method, which the developer has implemented to do
whatever is needed when that particular button is clicked. Note that multiple
listeners may be "added" to any given button and the button click processing will
call each ActionListener's actionPerformed method in turn.

Java AWT Hierarchy

Container

The Container is a component in AWT that can contain another components like
buttons, textfields, labels etc. The classes that extends Container class are known as
container such as Frame, Dialog and Panel.
Types of containers:

There are four types of containers in Java AWT:

1. Window

2. Panel

3. Frame

4. Dialog
Window

The window is the container that have no borders and menu bars. You must use frame,
dialog or another window for creating a window. We need to create an instance of
Window class to create this container.

❖ Panel

The Panel is the container that doesn't contain title bar, border or menu bar. It is generic
container for holding the components. It can have other components like button, text field
etc. An instance of Panel class creates a container, in which we can add components.

import java.awt.*;
import java.applet.*;
public class PanelEx extends Applet{
public void paint(Graphics g)
{
Frame f= new Frame("Panel Example");
Panel panel=new Panel();
panel.setBounds(40,80,200,200);
panel.setBackground(Color.gray);
Button b1=new Button("Button 1");
b1.setBounds(50,100,80,30);
b1.setBackground(Color.yellow);
Button b2=new Button("Button 2");
 b2.setBounds(100,100,80,30);
b2.setBackground(Color.green);
panel.add(b1);
panel.add(b2);
f.add(panel);
f.setSize(400,400);
f.setLayout(null);
f.setVisible(true);
}
}
PanelEx.html

<html>

<body>

<applet code="PanelEx.class" width="600" height="600">

</applet>

</body>

</html>

❖ Frame

The Frame is the container that contain title bar and border and can have menu
bars. It can have other components like button, text field, scrollbar etc. Frame is
most widely used container while developing an AWT application.

Useful Methods of Component Class

There are two ways to create a GUI using Frame in AWT.

1. By extending Frame class (inheritance)

2. By creating the object of Frame class (association)

Example to create AWT Frame by creating Frame class object using applet

import java.awt.*;

import java.applet.*;

// class AWTExample2 directly creates instance of Frame class

public class FrEx extends Applet {

// initializing using constructor

public void paint(Graphics g){

// creating a Frame

Frame f = new Frame();

// creating a Label

Label l = new Label("Employee id:");

// creating a Button

Button b = new Button("Submit");

// creating a TextField

TextField t = new TextField();

 // setting position of above components in the frame

l.setBounds(20, 80, 80, 30);

t.setBounds(20, 100, 80, 30);

b.setBounds(40, 150, 80, 50);

// adding components into frame

f.add(b);

f.add(l);

f.add(t);

// frame size 300 width and 300 height

f.setSize(400,300);

// setting the title of frame

f.setTitle("Employee info");

// no layout

f.setLayout(null);

// setting visibility of frame

f.setVisible(true);

FrEx.html
<html>
<body>
<applet code="FrEx.class" width="600" height="600">
</applet>
</body>
</html>
 ❖ Java LayoutManagers

The LayoutManagers are used to arrange components in a particular manner. The Java
LayoutManagers facilitates us to control the positioning and size of the components in
GUI forms. LayoutManager is an interface that is implemented by all the classes of
layout managers. There are the following classes that represent the layout managers:

1. java.awt.BorderLayout

2. java.awt.FlowLayout

3. java.awt.GridLayout

4. java.awt.CardLayout

5. java.awt.GridBagLayout

6. javax.swing.BoxLayout

7. javax.swing.GroupLayout

8. javax.swing.ScrollPaneLayout

9. javax.swing.SpringLayout etc.

❖ Java BorderLayout
The BorderLayout is used to arrange the components in five regions: north, south, east,
west, and center. Each region (area) may contain one component only. It is the default
layout of a frame or window. The BorderLayout provides five constants for each region:

1. public static final int NORTH

2. public static final int SOUTH

3. public static final int EAST

4. public static final int WEST

5. public static final int CENTER

Constructors of BorderLayout class:

● BorderLayout(): creates a border layout but with no gaps between the

components.

● BorderLayout(int hgap, int vgap): creates a border layout with the given
horizontal and vertical gaps between the components.

Example:
import java.awt.*;
import java.applet.*;
public class Border extends Applet
{
Frame f;
public void paint(Graphics g)
{
f = new Frame();
// creating buttons
Button b1 = new Button("NORTH"); // the button will be labeled as NORTH
Button b2 = new Button("SOUTH"); // the button will be labeled as SOUTH
Button b3 = new Button("EAST"); // the button will be labeled as EAST
Button b4 = new Button("WEST"); // the button will be labeled as WEST
Button b5 = new Button("CENTER");// the button will be labeled as CENTER
 f.setLayout(new BorderLayout(20, 15));
f.add(b1, BorderLayout.NORTH); // b1 will be placed in the North Direction
f.add(b2, BorderLayout.SOUTH); // b2 will be placed in the South Direction
f.add(b3, BorderLayout.EAST); // b2 will be placed in the East Direction
f.add(b4, BorderLayout.WEST); // b2 will be placed in the West Direction
f.add(b5, BorderLayout.CENTER); // b2 will be placed in the Center
f.setSize(300, 300);
f.setVisible(true);
}
}

Border.html
<html>
<body>
<applet code="Border.class" width="600" height="600">
</applet>
</body>
</html>
 ❖ FlowLayout

The Java FlowLayout class is used to arrange the components in a line, one after another
(in a flow). It is the default layout of the applet or panel.

Fields of FlowLayout class

1. public static final int LEFT

2. public static final int RIGHT

3. public static final int CENTER

4. public static final int LEADING

5. public static final int TRAILING

Constructors of FlowLayout class

1. FlowLayout(): creates a flow layout with centered alignment and a default 5 unit
horizontal and vertical gap.

2. FlowLayout(int align): creates a flow layout with the given alignment and a
default 5 unit horizontal and vertical gap.

3. FlowLayout(int align, int hgap, int vgap): creates a flow layout with the given
alignment and the given horizontal and vertical gap.

Example:

import java.awt.*;
import java.applet.*;
public class Flow extends Applet
{
Frame f;
public void paint(Graphics g)
{
f = new Frame();
// creating buttons
Button b1 = new Button("one");
 Button b2 = new Button("two");
Button b3 = new Button("three");
Button b4 = new Button("four");
Button b5 = new Button("five");

f.setLayout(new FlowLayout());
f.add(b1);
f.add(b2);
f.add(b3);
f.add(b4);
f.add(b5);
f.setSize(300, 300);
f.setVisible(true);
}
}

Flow.html
<html>
<body>
<applet code="Flow.class" width="600" height="600">
</applet>
</body>
</html>

OUTPUT
 ❖ GridLayout
The Java GridLayout class is used to arrange the components in a rectangular grid. One
component is displayed in each rectangle.

Constructors of GridLayout class

1. GridLayout(): creates a grid layout with one column per component in a row.

2. GridLayout(int rows, int columns): creates a grid layout with the given rows and
columns but no gaps between the components.

3. GridLayout(int rows, int columns, int hgap, int vgap): creates a grid layout
with the given rows and columns along with given horizontal and vertical gaps.

Example:

import java.awt.*;
import java.applet.*;
public class Grid extends Applet
{
Frame f;
public void paint(Graphics g)
{
f = new Frame();
// creating buttons
Button b1 = new Button("one");
Button b2 = new Button("two");
Button b3 = new Button("three");
Button b4 = new Button("four");
Button b5 = new Button("five");
// CREATING GRID LAYOUT OF 3 ROWS AND 3 COLUMNS
f.setLayout(new GridLayout(2,3));
f.add(b1);
f.add(b2);
f.add(b3);
f.add(b4);
 f.add(b5);
f.setSize(300, 300);
f.setVisible(true);
}
}

Flow.html
<html>
<body>
<applet code="Grid.class" width="600" height="600">
</applet>
</body>
</html>

❖ GUI COMPONENTS

● BUTTONS

● A button is basically a control component with a label that generates an event

when pushed.
● The Button class is used to create a labeled button that has platform independent
implementation. The application results in some action when the button is pushed.
● To perform an action on a button being pressed and released, the ActionListener
interface needs to be implemented.
 ● The registered new listener can receive events from the button by calling
addActionListener method of the button.

Button Class Constructors

Example:
import java.awt.*;
import java.applet.*;
public class ExBtn extends Applet
{
Frame f;
public void paint(Graphics g)
{
f = new Frame();
// creating buttons
Button b1 = new Button("one");
Button b2 = new Button("two");
f.setLayout(null);
f.add(b1);
f.add(b2);
f.setSize(300, 300);
f.setVisible(true);
}
}

Flow.html
<html>
<body>
<applet code="ExBtn.class" width="600" height="600">
</applet>
</body>
</html>
● CHECKBOXES
The Checkbox class is used to create a checkbox. It is used to turn an option on (true) or
off (false). Clicking on a Checkbox changes its state from "on" to "off" or from "off" to
"on".

Example:
import java.awt.*;
import java.applet.*;
public class ChkEx extends Applet
{
public void paint(Graphics g)
{
Frame f = new Frame(“Checkbox Example”);
// creating checkboxes
Checkbox c1=new Checkbox("c++");
c1.setBounds(100,150,50,50);

Checkbox c2=new Checkbox("Java",true);

c2.setBounds(100,180,50,50);

f.add(c1);
f.add(c2);
f.setSize(400,400);
f.setLayout(null);
f.setVisible(true);

}
}
 ChkEx.html
<html>
<body>
<applet code="ChkEx.class" width="600" height="600">
</applet>
</body>
</html>

● RADIO BUTTONS
CheckBox Group enables you to create Radio Buttons in AWT and there is no special
method for creating radio button in AWT.

Example:
import java.awt.*;

Import java .applet.*;

public class ExRadio extends Applet

public void paint(Graphics g)

Frame f= new Frame("CheckboxGroup Example");

CheckboxGroup cbg = new CheckboxGroup();

Checkbox checkBox1 = new Checkbox("C++", cbg, false);

checkBox1.setBounds(100,100, 50,50);
 Checkbox checkBox2 = new Checkbox("Java", cbg, true);

checkBox2.setBounds(100,150, 50,50);

f.add(checkBox1);

f.add(checkBox2);

f.setSize(400,400);

f.setLayout(null);

f.setVisible(true);

}
ExRadio.html
<html>
<body>
<applet code="ExRadio.class" width="600" height="600">
</applet>
</body>
</html>

● LABEL
The object of the Label class is a component for placing text in a container. It is used to
display a single line of read only text. The text can be changed by a programmer but a
user cannot edit it directly.
It is called a passive control as it does not create any event when it is accessed. To
create a label, we need to create the object of Label class.

Label class Constructors

● TextField

The object of a TextField class is a text component that allows a user to enter a single
line text and edit it. It inherits TextComponent class, which further inherits Component
class.

● TextArea
The object of a TextArea class is a multiline region that displays text. It allows the
editing of multiple line text. It inherits TextComponent class.
The text area allows us to type as much text as we want. When the text in the text area
becomes larger than the viewable area, the scroll bar appears automatically which helps
us to scroll the text up and down, or right and left.

Fields of TextArea Class

The fields of java.awt.TextArea class are as follows:

● static int SCROLLBARS_BOTH - It creates and displays both horizontal and

vertical scrollbars.

● static int SCROLLBARS_HORIZONTAL_ONLY - It creates and displays only

the horizontal scrollbar.

● static int SCROLLBARS_VERTICAL_ONLY - It creates and displays only the

vertical scrollbar.

● static int SCROLLBARS_NONE - It doesn't create or display any scrollbar in

the text area.

TextArea Class Constructors

Example (This example includes Label,Button,Text Field and Text Area)

import java.awt.*;

import java .applet.*;

public class Ex extends Applet

public void paint(Graphics g)

Frame f= new Frame("Frame with labels,TextFields and Text Area");

Label l1= new Label("Enter name");

TextField t1= new TextField();

Label l2 = new Label("Enter Current Address");

TextArea ta=new TextArea(3,28);

Button b=new Button("Submit");

l1.setBounds(20,80,80,40);

t1.setBounds(20,120,80,40);

l2.setBounds(20,160,160,60);

ta.setBounds(20,220,200,200);

b.setBounds(90,440,80,60);

f.add(l1);

f.add(l2);

f.add(t1);

f.add(ta);

f.add(b);

f.setBackground(Color.pink);

f.setSize(600,600);

f.setLayout(null);
 f.setVisible(true);

Ex.html
<html>
<body>
<applet code="Ex.class" width="800" height="800">
</applet>
</body>
</html>
 ● List
The object of List class represents a list of text items. With the help of the List class,
user can choose either one item or multiple items. It inherits the Component class.

In the following example, we are creating a List component with 5 rows and adding it
into the Frame.

Example:

import java.awt.*;

import java.applet.*;

public class ExList extends Applet

public void paint(Graphics g)

Frame f = new Frame("Frame with List");

List l1 = new List(5);

l1.setBounds(100, 100, 75, 75);

l1.add("cake");

l1.add("veggis");
 l1.add("soap");

l1.add("pen");

l1.add("pencil");

f.add(l1);

f.setSize(400, 400);

f.setLayout(null);

f.setVisible(true);

ExList.html
<html>
<body>
<applet code="ExList.class" width="800" height="800">
</applet>
</body>
</html>
 ● Scrollbar

The object of Scrollbar class is used to add horizontal and vertical scrollbar. Scrollbar is a
GUI component allows us to see invisible number of rows and columns.

It can be added to top-level container like Frame or a component like Panel. The
Scrollbar class extends the Component class.

Scrollbar Class Fields

The fields of java.awt.Image class are as follows:

● static int HORIZONTAL - It is a constant to indicate a horizontal scroll bar.

● static int VERTICAL - It is a constant to indicate a vertical scroll bar.

● orientation: specifiey whether the scrollbar will be horizontal or vertical.

● Value: specify the starting position of the knob of Scrollbar on its track.

● Minimum: specify the minimum width of track on which scrollbar is moving.

● Maximum: specify the maximum width of track on which scrollbar is moving.