Compiled by Borifan A.

1
 AWT vs Swing
1.1 Introduction to AWT
 When Java was introduced, the GUI classes were
bundled in a library known as the Abstract
Windows Toolkit (AWT).
 But what is GUI means?
 Graphical User Interface (GUI) is simply the way
human interacts with a computer (machine).

Compiled by Borifan A. 2
 GUI has many components. Those components are
defined in AWT and Swing.
 What are the components of GUI in AWT?
 AWT components for GUI includes Label, Button,
TextField, RadioButton, CheckBox, ComboBox, etc.,
 AWT is fine for developing simple graphical user
interfaces, but not for developing comprehensive
GUI projects.
 The Java package for AWT is java.awt.*;
 AWT components are referred to as heavyweight
components.
Compiled by Borifan A. 3
 The AWT user-interface components were replaced by a more
robust, versatile, and flexible library known as Swing components.

 Although AWT components are still supported in Java, it is better to

learn how to program using Swing components, because the AWT
user-interface components will eventually fade away.

 Swing components are referred to as lightweight

components.

 The focus of this chapter is more on Swing as it also represents the

functionalities of AWT.

Compiled by Borifan A. 4
 To distinguish new Swing component classes from
their AWT counterparts, the Swing GUI component
classes are named with a prefixed J.
 Swing components for GUI includes JLabel, JButton,
JTextField, JRadioButton, JCheckBox, JComboBox, etc.,
 Swing GUI components are from the javax.swing
package.

Compiled by Borifan A. 5
 Some basic Swing components are:

Compiled by Borifan A. 6
 A frame is a window for holding other
GUI components
 To create a frame, use the JFrame class

Compiled by Borifan A. 7
import javax.swing.JFrame;

public class MyFrame {

public static void main(String[] args) {
Frame frame = new JFrame("MyFrame"); // Create a frame
frame.setSize(400, 300); // Set the frame size
frame.setLocationRealtiveTo(null);// Center a frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true); // Display the frame
}
}

Compiled by Borifan A. 8
 A container can be placed inside another container.
Panels can be used as sub-containers to group GUI
components to achieve the desired layout.
 The Swing version of panel is JPanel. Use the
add(Component) method to add a component to the
panel. For example, the following code creates a panel
and adds a button to it:

JPanel p = new JPanel();

Jbutton b= new Jbutton(“SAVE”);
p.add(b);
Panels can be placed inside a frame or inside another panel.

Compiled by Borifan A. 9
 Using the add method, you can add components to a frame.

import javax.swing.*;
public class MyFrameWithComponents {
public static void main(String[] args) {
JFrame frame = new JFrame("MyFrameWithComponents");
// Add a button to the frame
JButton but = new JButton(“Click here”);
frame.add(but);
frame.setSize(400, 300);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null); // Center the frame
frame.setVisible(true);
}
}

Compiled by Borifan A. 10
 Each container contains a layout manager, which is an
object responsible for laying out the GUI components in
the container.
 The Java GUI components are placed in containers,
where they are arranged by the container’s layout
manager
 A layout manager is created using a layout manager
class.
 Layout managers are set in containers using the
setLayout(aLayoutManager) method.

Compiled by Borifan A. 11
 For example, you can use the following
statements to create an instance of
XLayout and set it in a container:
LayoutManager layoutManager = new
XLayout();
container.setLayout(layoutManager);

Compiled by Borifan A. 12
 This section introduces three basic layout
managers: FlowLayout, GridLayout, and
BorderLayout.

Compiled by Borifan A. 13
 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.
 You can set FlowLayout as below:
FlowLayout layout = new FlowLayout(FlowLayout.LEFT, 0, 0);
setLayout(layout);
Here, all the components will be aligned with no gaps.

The above statement is also equivalent to:

setLayout(new FlowLayout(FlowLayout.LEFT, 0, 0);

Compiled by Borifan A. 14
 The GridLayout manager arranges components in a grid (matrix)
formation. The components 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.
 GridLayout lays out components in equal-sized cells on a grid.
 The ways of creating and setting GridLayout:

GridLayout layout = new GridLayout(3, 1, 10, 10);

frame.setLayout(layout);
or
frame.setLayout(new GridLayout(3, 1, 10, 10));

Both of the above are equivalent.

All components are given equal size in the container of GridLayout

Compiled by Borifan A. 15
 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.
 the add method for BorderLayout is different from the one for
FlowLayout and GridLayout. With BorderLayout, you specify where to put
the components.

Compiled by Borifan A. 16
 Example for adding a button (component) to a panel object p1 with
BorderLayout

JButton username = new JButton("North");

JButton welcome = new JButton("West");
JButton click = new JButton("South");
JButton east = new JButton("East");
JButton center = new JButton("Center");

p1.add(username,BorderLayout.NORTH);
p1.add(welcome,BorderLayout.WEST);
p1.add(click, BorderLayout.SOUTH);
p1.add(east, BorderLayout.EAST);
p1.add(center, BorderLayout.CENTER);
Finally, the panel objects will be added to the frame like this:
Frame.add(p1);

Compiled by Borifan A. 17
Layout managers have properties that can be changed
dynamically.
 FlowLayout has alignment, hgap, and vgap properties.
You can use the setAlignment, setHgap, and setVgap
methods to specify the alignment and the horizontal and
vertical gaps.

 GridLayout has the rows, columns, hgap, and vgap

properties. You can use the setRows, setColumns, setHgap,
and setVgap methods to specify the number of rows, the
number of columns, and the horizontal and vertical gaps.

 BorderLayout has the hgap and vgap properties. You can

use the setHgap and setVgap methods to specify the
horizontal and vertical gaps.

Compiled by Borifan A. 18
 java.awt.color class provides for GUI components. You can set
both background and foreground colors.
 Colors are made of red, green, and blue components, each
represented by an int value that describes its intensity, ranging
from 0 (darkest shade) to 255 (lightest shade). This is known as
the RGB model.
 If r, g, b specify a color by its red, green and blue components:
You can use constructor like below.
public Color(int r, int g, int b);

Color color = new Color(128, 100, 100);

The arguments r, g, b are between 0 and 255. If a value beyond this

range is passed to the argument, an IllegalArgumentException will
occur.

Compiled by Borifan A. 19
 Alternatively, you can use one of the 13 standard
colors (BLACK, BLUE, CYAN, DARK_GRAY, GRAY,
GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED,
WHITE, and YELLOW) defined as constants in
java.awt.Color. The following code, for instance, sets
the foreground color of a button to red:

jbtOK.setForeground(Color.RED);
 You can use the setBackground(Color c) and
setForeground(Color c) methods defined in the
java.awt.Component class to set a component’s
background and foreground colors .

Compiled by Borifan A. 20
 Each GUI component has the font property. Fonts are
objects created from the Font class.
 You can create a font using the java.awt.Font class and
set fonts for the components using the setFont method in
the Component class.
 The constructor for Font is:
public Font(String name, int style, int size);
 For example:
Font font1 = new Font("SansSerif", Font.BOLD, 16);
Font font2 = new Font("Serif", Font.BOLD + Font.ITALIC, 12);
JButton jbtOK = new JButton("OK");
jbtOK.setFont(font1);

Compiled by Borifan A. 21
 You can write code to process events such as a
button click or a timer .
 You have to use event-driven programming to write
the code to respond to the button-clicking event.
 To respond to a button click, you need to write the
code to process the button-clicking action. The
button is an event source object—where the action
originates. You need to create an object capable of
handling the action event on a button. This object is
called an event listener

Compiled by Borifan A. 22
 The below figure shows a listener object that
processes the event fired from the source object.

Compiled by Borifan A. 23
 Not all objects can be listeners for an action event.
To be a listener of an action event, two
requirements must be met:
1. The object must be an instance of the
ActionListener interface. This interface defines the
common behavior for all action listeners.
2. The ActionListener object listener must be
registered with the event source object using the
method source.addActionListener(listener).

Compiled by Borifan A. 24
 The ActionListener interface contains the actionPerformed
method for processing the event. Your listener class must
override this method to respond to the event.
 The below example shows a class that implements
an interface called ActionListener. The abstarct method within
this interface is actionPerformed which is actually implemented
by the BlueClass.

public class BlueClass implements ActionListener{

@Override
public void actionPerformed(ActionEvent e){
Great_panel.setBackground(Color.BLUE);
}

Compiled by Borifan A. 25
 When you run a Java GUI program, the
program interacts with the user, and the
events drive its execution. This is called event-
driven programming.

 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.
Compiled by Borifan A. 26
 User Action, Source Object, Event Type,
Listener Interface, and Handler is shown
in the below figure. Only some examples
are listed here. Explore more of them.

Compiled by Borifan A. 27
User Action Source Event type Listener Listener
Object fired Interface Interface
Methods
Click a JButton ActionEvent ActionListener actionPerformed
(ActionEvent e)
button
JTextField ActionEvent ActionListener actionPerformed
Press Enter in (ActionEvent e)
a text Field

JComboBox ActionEvent ActionListener actionPerformed(A

ctionEvent e)
ItemEvent ItemListener
Select a new itemStateChanged
Item (ItemEvent e)

Compiled by Borifan A. 28
User Action Source Event type Listener Listener
Object fired Interface Interface
Methods
Check or JRadioButton ActionEvent ActionListener actionPerformed(A
ctionEvent e)
ItemListener
uncheck ItemEvent itemStateChanged
(ItemEvent e)

Compiled by Borifan A. 29
For more information please refer to this
text book:

Introduction_to_JAVA_Programming_9th_Edition_Daniel_Liang

Compiled by Borifan A. 30
The end!

Compiled by Borifan A. 31