GRAPHICS PROGRAMMING

1. Introduction
We can reuse the graphics classes provided in JDK for constructing your own Graphical User Interface
(GUI) applications.
There are two sets of Java APIs for graphics programming: AWT (Abstract Windowing Toolkit) and Swing.
1. AWT API was introduced in JDK 1.0. Most of the AWT components have become obsolete and
should be replaced by newer Swing components.
2. Swing API, a much more comprehensive set of graphics libraries that enhances the AWT, was
introduced as part of Java Foundation Classes (JFC) after the release of JDK 1.1. JFC consists of
Swing, Java2D, Accessibility, Internationalization, and Pluggable Look-and-Feel Support APIs. JFC
was an add-on to JDK 1.1 but has been integrated into core Java since JDK 1.2.
2. Programming GUI with AWT
Java Graphics APIs - AWT and Swing - provide a huge set of reusable GUI components, such as button,
text field, label, choice, panel and frame for building GUI applications. We can simply reuse these classes.
2.1 AWT Packages
AWT consists of 12 packages (Swing is even bigger, with 18 packages as of JDK 1.7!). Fortunately, only 2
packages - java.awt and java.awt.event - are commonly-used.
1. The java.awt package contains the core AWT graphics classes:
o GUI Component classes (such as Button, TextField, and Label),
o GUI Container classes (such as Frame, Panel, Dialog and ScrollPane),
o Layout managers (such as FlowLayout, BorderLayout and GridLayout),
o Custom graphics classes (such as Graphics, Color and Font).
2. The java.awt.event package supports event handling:
o Event classes (such as ActionEvent, MouseEvent, KeyEvent and WindowEvent),
o Event Listener Interfaces (such
as ActionListener, MouseListener, KeyListener and WindowListener),
o Event Listener Adapter classes (such as MouseAdapter, KeyAdapter, and WindowAdapter).
AWT provides a platform-independent and device-independent interface to develop graphic programs
that runs on all platforms, such as Windows, Mac, and Linux.

2.2 Containers and Components

There are two types of GUI elements:
1. Component: Components are elementary GUI entities (such as Button, Label, andTextField.)
2. Container: Containers (such as Frame, Panel and Applet) are used to hold components in a specific
layout (such as flow or grid). A container can also hold sub-containers.
GUI components are also called controls (Microsoft ActiveX Control), widgets (Eclipse's Standard
Widget Toolkit, Google Web Toolkit), which allow users to interact with (i.e., control) the application
through these components (such as button-click and text-entry).
In the above figure, there are three containers: a Frame and two Panels.
A Frame is the top-level container of an AWT program. A Frame has a title bar (containing an icon, a
title, and the minimize/maximize/close buttons), an optional menu bar and the content display area.
A Panel is a rectangular area used to group related GUI components in a certain layout.
In the above figure, the top-level Frame contains two Panels. There are five components:
a Label (providing description), a TextField (for users to enter text), and three Buttons (for user to
trigger certain programmed actions).
In a GUI program, a component must be kept in a container. We need to identify a container to hold
the components.
Every container has a method called add(Component c). A container (say aContainer) can
invoke aContainer.add(aComponent) to add aComponent into itself. For example,
Panel panel = new Panel(); // Panel is a Container
Button btn = new Button("Press"); // Button is a Component
panel.add(btn); // The Panel Container adds a Button Component
2.3 AWT Container Classes
Top-Level Containers: Frame, Dialog and Applet
Each GUI program has a top-level container. The commonly-used top-level containers in AWT
are Frame, Dialog and Applet:

A Frame provides the "main window" for the GUI application, which has a title bar (containing an
icon, a title, the minimize, maximize/restore-down and close buttons), an optional menu bar, and the
content display area.
To write a GUI program, we typically start with a subclass extending from java.awt.Frame to inherit
the main window as follows:
import java.awt.Frame; // Using Frame class in package java.awt
// A GUI program is written as a subclass of Frame - the top-level container
// This subclass inherits all properties from Frame, e.g., title, icon, buttons,
content-pane
public class MyGUIProgram extends Frame
{
// Constructor to setup the GUI components
public MyGUIProgram() { ...... }

// Other methods
......
......
// The entry main() method
public static void main(String[] args) {
// Invoke the constructor (to setup the GUI) by allocating an instance
new MyGUIProgram();
}
}

An AWT Dialog is a "pop-up window" used for interacting with the users. A Dialog has a title-bar
(containing an icon, a title and a close button) and a content display area, as illustrated.
An AWT Applet (in package java.applet) is the top-level container for an applet, which is a Java
program running inside a browser.
Secondary Containers: Panel and ScrollPane
Secondary containers are placed inside a top-level container or another secondary container. AWT also
provide these secondary containers:
Panel: a rectangular box under a higher-level container, used to layout a set of related GUI
components in pattern such as grid or flow.
ScrollPane: provides automatic horizontal and/or vertical scrolling for a single child component.
others.
Hierarchy of the AWT Container Classes
The hierarchy of the AWT Container classes is as follows:

As illustrated, each Container has a layout.
2.4 AWT Component Classes
AWT provides many ready-made and reusable GUI components. The frequently-used
are: Button, TextField, Label, Checkbox, CheckboxGroup (radio buttons), List, and Choice, as illustrated
below.

AWT GUI Component: java.awt.Label

A java.awt.Label provides a text description message. Take note that System.out.println() prints to
the system console, not to the graphics screen. We could use a Label to label another component (such
as text field) or provide a text description.
Check the JDK API specification for java.awt.Label.
Constructors
public Label(String strLabel, int alignment); // Construct a Label with the given text
String, of the text alignment
public Label(String strLabel); // Construct a Label with the given text
String
public Label(); // Construct an initially empty Label
The Label class has three constructors:
1. The first constructor constructs a Label object with the given text string in the given alignment.
Note that three static constants Label.LEFT, Label.RIGHT, and Label.CENTER are defined in the
class for us to specify the alignment.
2. The second constructor constructs a Label object with the given text string in default of left-
aligned.
3. The third constructor constructs a Label object with an initially empty string. We could set the
label text via the setText() method later.
Constants
public static final LEFT; // Label.LEFT
public static final RIGHT; // Label.RIGHT
public static final CENTER; // Label.CENTER
These three constants are defined for specifying the alignment of the Label's text.
Public Methods
// Examples
public String getText();
public void setText(String strLabel);
public int getAlignment();
public void setAlignment(int alignment);
The getText() and setText() methods can be used to read and modify the Label's text. Similarly,
the getAlignment() and setAlignment() methods can be used to retrieve and modify the alignment of
the text.
Constructing a Component and Adding the Component into a Container
Three steps are necessary to create and place a GUI component:
1. Declare the component with an identifier (name);
2. Construct the component by invoking an appropriate constructor via the new operator;
3. Identify the container (such as Frame or Panel) designed to hold this component. The container
can then add this component onto itself via aContainer.add(aComponent) method. Every
container has a add(Component) method. Take note that it is the container that actively and
explicitly adds a component onto itself, instead of the other way.
Example
Label lblInput; // Declare an Label instance called lblInput
lblInput = new Label("Enter ID"); // Construct by invoking a constructor via the new
operator
add(lblInput); // this.add(lblInput) - "this" is typically a
subclass of Frame
lblInput.setText("Enter password"); // Modify the Label's text string
lblInput.getText(); // Retrieve the Label's text string
An Anonymous Instance
We can create a Label without specifying an identifier, called anonymous instance. In the case, the Java
compiler will assign an anonymous identifier for the allocated object. We will not be able to reference an
anonymous instance in your program after it is created. This is usually alright for a Label instance as
there is often no need to reference a Label after it is constructed.
Example
// Allocate an anonymous Label instance. "this" container adds the instance into itself.
// We CANNOT reference an anonymous instance to carry out further operations.
add(new Label("Enter Name: ", Label.RIGHT));

// Same as
Label lblXxx = new Label("Enter Name: ", Label.RIGHT)); // lblXxx assigned by compiler
add(lblXxx);
AWT GUI Component: java.awt.Button

A java.awt.Button is a GUI component that triggers a certain programmed action upon clicking.
Constructors
public Button(String buttonLabel);
// Construct a Button with the given label
public Button();
// Construct a Button with empty label
The Button class has two constructors. The first constructor creates a Button object with the given label
painted over the button. The second constructor creates a Button object with no label.
Public Methods
public String getLabel();
// Get the label of this Button instance
public void setLabel(String buttonLabel);
// Set the label of this Button instance
public void setEnable(boolean enable);
// Enable or disable this Button. Disabled Button cannot be clicked.
The getLabel() and setLabel() methods can be used to read the current label and modify the label of
a button, respectively.
Note: The latest Swing's JButton replaces getLabel()/setLabel() with getText()/setText() to be
consistent with all the components. We will describe Swing later.
Event
Clicking a button fires a so-called ActionEvent and triggers a certain programmed action. I will explain
event-handling later.
Example
Button btnColor = new Button("Red"); // Declare and allocate a Button instance called
btnColor
add(btnColor); // "this" Container adds the Button
...
btnColor.setLabel("green"); // Change the button's label
btnColor.getLabel(); // Read the button's label
...
add(Button("Blue")); // Create an anonymous Button. It CANNOT be referenced later
AWT GUI Component: java.awt.TextField

A java.awt.TextField is single-line text box for users to enter texts. (There is a multiple-line text box
called TextArea.) Hitting the "ENTER" key on a TextField object triggers an action-event.
Constructors
public TextField(String strInitialText, int columns);
// Construct a TextField instance with the given initial text string with the number
of columns.
public TextField(String strInitialText);
// Construct a TextField instance with the given initial text string.
public TextField(int columns);
// Construct a TextField instance with the number of columns.
Public Methods
public String getText();
// Get the current text on this TextField instance
public void setText(String strText);
// Set the display text on this TextField instance
public void setEditable(boolean editable);
// Set this TextField to editable (read/write) or non-editable (read-only)
Event
Hitting the "ENTER" key on a TextField fires a ActionEvent, and triggers a certain programmed action.
Example
TextField tfInput = new TextField(30); // Declare and allocate an TextField instance
called tfInput
add(tfInput); // "this" Container adds the TextField
TextField tfResult = new TextField(); // Declare and allocate an TextField instance
called tfResult
tfResult.setEditable(false) ; // Set to read-only
add(tfResult); // "this" Container adds the TextField
......
// Read an int from TextField "tfInput", square it, and display on "tfResult".
// getText() returns a String, need to convert to int
int number = Integer.parseInt(tfInput.getText());
number *= number;
// setText() requires a String, need to convert the int number to String.
tfResult.setText(number + "");
Take note that getText()/SetText() operates on String. We can convert a String to a primitive, such
as int or double via static method Integer.parseInt() or Double.parseDouble(). To convert a
primitive to a String, simply concatenate the primitive with an empty String.
3. AWT Event-Handling
Java adopts the so-called "Event-Driven" (or "Event-Delegation") programming model for event-
handling, similar to most of the visual programming languages (such as Visual Basic and Delphi).
In event-driven programming, a piece of event-handling codes is executed (or called back by the
graphics subsystem) when an event has been fired in response to an user input (such as clicking a mouse
button or hitting the ENTER key). This is unlike the procedural model, where codes are executed in a
sequential manner.
The AWT's event-handling classes are kept in package java.awt.event.
Three objects are involved in the event-handling: a source, listener(s) and an event object.
The source object (such as Button and Textfield) interacts with the user. Upon triggered, it creates
an event object. This event object will be messaged to all the registered listener object(s), and an
appropriate event-handler method of the listener(s) is called-back to provide the response. In other
words, triggering a source fires an event to all its listener(s), and invoke an appropriate handler of the
listener(s).
To express interest for a certain source's event, the listener(s) must be registered with the source. In other
words, the listener(s) "subscribes" to a source's event, and the source "publishes" the event to all its
subscribers upon activation. This is known as subscribe-publish or observable-observer design pattern.

The sequence of steps is illustrated above:
1. The source object registers its listener(s) for a certain type of event.
Source object fires event event upon triggered. For example, clicking an Button fires
an ActionEvent, mouse-click fires MouseEvent, key-type fires KeyEvent, etc.
How the source and listener understand each other? The answer is via an agreed-upon interface.
For example, if a source is capable of firing an event called XxxEvent (e.g., MouseEvent) involving
various operational modes (e.g., mouse-clicked, mouse-entered, mouse-exited, mouse-pressed,
and mouse-released). Firstly, we need to declare an interface
called XxxListener (e.g.,MouseListener) containing the names of the handler methods. Recall
that an interface contains only abstract methods without implementation. For example,
// A MouseListener interface, which declares the signature of the handlers
// for the various operational modes.
public interface MouseListener {
public void mousePressed(MouseEvent evt); // Called back upon mouse-button
pressed
public void mouseReleased(MouseEvent evt); // Called back upon mouse-button
released
public void mouseClicked(MouseEvent evt); // Called back upon mouse-button
clicked (pressed and released)
public void mouseEntered(MouseEvent evt); // Called back when mouse pointer
entered the component
public void mouseExited(MouseEvent evt); // Called back when mouse pointer
exited the component
}
Secondly, all the listeners interested in the XxxEvent must implement the XxxListener interface.
That is, the listeners must provide their own implementations (i.e., programmed responses) to all
theabstract methods declared in the XxxListener interface. In this way, the listenser(s) can
response to these events appropriately. For example,
// An example of MouseListener, which provides implementation to the handler
methods
class MyMouseListener implement MouseListener {
@Override
public void mousePressed(MouseEvent e) {
System.out.println("Mouse-button pressed!");
}

@Override
public void mouseReleased(MouseEvent e) {
System.out.println("Mouse-button released!");
}

@Override
public void mouseClicked(MouseEvent e) {
System.out.println("Mouse-button clicked (pressed and released)!");
}

@Override
public void mouseEntered(MouseEvent e) {
System.out.println("Mouse-pointer entered the source component!");
}

@Override
public void mouseExited(MouseEvent e) {
System.out.println("Mouse exited-pointer the source component!");
}
}
Thirdly, in the source, we need to maintain a list of listener object(s), and define two
methods: addXxxListener() and removeXxxListener() to add and remove a listener from this
list. The signature of the methods are:
public void addXxxListener(XxxListener l);
public void removeXxxListener(XxxListener l);
Take note that all the listener(s) interested in the XxxEvent must implement
the XxxListener interface. That is, they are sub-type of the XxxListener. Hence, they can be
upcasted toXxxListener and passed as the argument of the above methods.
In summary, we identify the source, the event-listener interface, and the listener object. The
listener must implement the event-listener interface. The source object then registers listener
object via theaddXxxListener() method:
aSource.addXxxListener(alistener); // aSource registers aListener for XxxEvent
2. The source is triggered by a user.
3. The source create an XxxEvent object, which encapsulates the necessary information about the
activation. For example, the (x, y) position of the mouse pointer, the text entered, etc.
4. Finally, for each of the listeners in the listener list, the source invokes the appropriate handler on
the listener(s), which provides the programmed response.
In brief, triggering a source fires an event to all its registered listeners, and invoke an appropriate handler of
the listener.
3.1 Revisit Example
1 AWTCounter: ActionEvent and ActionListener Interface
Clicking a Button (or hitting the "Enter" key on a TextField) fires an ActionEvent to all
its ActionEvent listener(s). An ActionEvent listener must implement ActionListener interface, which
declares one abstract method actionPerformed() as follow:
public interface ActionListener {
public void actionPerformed(ActionEvent e);
// Called back upon button-click (on Button), enter-key pressed (on TextField)
}
Here are the event-handling steps:
We identify btnCount (Button) as the source object.
Clicking Button fires an ActionEvent to all its ActionEvent listener(s).
The listener(s) is required to implement ActionListener interface, and override
the actionPerformed() method to provide the response. For simplicity, we choose "this" object
(AWTCounter) as the listener for the ActionEvent. Hence, "this" class is required to
implement ActionListener interface and provide the programmed response in
the actionPerformed().
public class AWTCounter extends Frame implements ActionListener {
// "this" is chosen as the ActionEvent listener, hence, it is required
// to implement ActionListener interface
......

// Implementing ActionListener interface requires this class to provide
implementation
// to the abstract method actionPerformed() declared in the interface.
@Override
public void actionPerformed(ActionEvent evt) {
// Programmed response upon activation
// Increment the count value and display on the TextField
++count;
tfCount.setText(count + "");
}
}
The source object registers listener via the addActionListener(). In this example,
the source btnCount (Button) adds "this" object as a listener via:
btnCount.addActionListener(this);
Note that addActionListener() takes an argument of the type ActionListener. "this", which
implements ActionListener interface (i.e., a subclass of ActionListener), is upcasted and passed
to the addActionListener() method.
Upon button-click, the btnCount creates an ActionEvent object, and calls back
the actionPerformed(ActionEvent) method of all its registered listener(s) with
the ActionEvent object created:
ActionEvent evt = new ActionEvent( ...... );
listener.actionPerformed(evt); // for all its listener(s)
The sequence diagram is as follows:

3.2 Revisit Example
2 AWTAccumulator: ActionEvent and ActionListener Interface
In this example,
1. We identify the tfInput (TextField) as the source object.
2. Hitting the "Enter" key on a TextField fires an ActionEvent to all its ActionEvent listener(s).
3. We choose this object as the ActionEvent listener (for simplicity).
4. The source object tfInput (TextField) registers the listener (this object) via
the tfInput.addActionListener(this).
5. The ActionEvent listener (this class) is required to implement the ActionListener interface, and
override the actionPerformed() method to provide the programmed response upon activation.
3.3 Example 3: WindowEvent and WindowListener Interface

A WindowEvent is fired (to all its WindowEvent listeners) when a window (e.g., Frame) has been
opened/closed, activated/deactivated, iconified/deiconified via the 3 buttons at the top-right corner or
other means. The source of WindowEvent shall be a top-level window-container such as Frame.
A WindowEvent listener must implement WindowListener interface, which declares 7 abstractevent-
handling methods, as follows. Among them, the windowClosing(), which is called back upon clicking the
window-close button, is the most commonly-used.
public void windowClosing(WindowEvent e)
// Called-back when the user attempts to close the window by clicking the window
close button.
// This is the most-frequently used handler.
public void windowOpened(WindowEvent e)
// Called-back the first time a window is made visible.
public void windowClosed(WindowEvent e)
// Called-back when a window has been closed as the result of calling dispose on the
window.
public void windowActivated(WindowEvent e)
// Called-back when the Window is set to be the active Window.
public void windowDeactivated(WindowEvent e)
// Called-back when a Window is no longer the active Window.
public void windowIconified(WindowEvent e)
// Called-back when a window is changed from a normal to a minimized state.
public void windowDeiconified(WindowEvent e)
// Called-back when a window is changed from a minimized to a normal state.
The following program added support for "close-window button" to Example 1: AWTCounter.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import java.awt.*; // Using AWT containers and components
import java.awt.event.*; // Using AWT events and listener interfaces

// An AWT GUI program inherits the top-level container java.awt.Frame
public class WindowEventDemo extends Frame
implements ActionListener, WindowListener {
// This class acts as listener for ActionEvent and WindowEvent
// Java supports only single inheritance, where a class can extend
// one superclass, but can implement multiple interfaces.

private TextField tfCount;
private Button btnCount;
private int count = 0; // Counter's value

/** Constructor to setup the UI components and event handling */
public WindowEventDemo() {
setLayout(new FlowLayout()); // "super" Frame sets to FlowLayout

add(new Label("Counter")); // "super" Frame adds an anonymous Label

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
tfCount = new TextField("0", 10); // Allocate TextField
tfCount.setEditable(false); // read-only
add(tfCount); // "super" Frame adds tfCount

btnCount = new Button("Count"); // Declare and allocate a Button
add(btnCount); // "super" Frame adds btnCount

btnCount.addActionListener(this);
// btnCount fires ActionEvent to its registered ActionEvent listener
// btnCount adds "this" object as an ActionEvent listener

addWindowListener(this);
// "super" Frame fires WindowEvent to its registered WindowEvent listener
// "super" Frame adds "this" object as a WindowEvent listener

setTitle("WindowEvent Demo"); // "super" Frame sets title
setSize(250, 100); // "super" Frame sets initial size
setVisible(true); // "super" Frame shows
}

/** The entry main() method */
public static void main(String[] args) {
new WindowEventDemo(); // Let the construct do the job
}

/** ActionEvent handler */
@Override
public void actionPerformed(ActionEvent evt) {
++count;
tfCount.setText(count + "");
}

/** WindowEvent handlers */
// Called back upon clicking close-window button
@Override
public void windowClosing(WindowEvent e) {
System.exit(0); // Terminate the program
}

// Not Used, but need to provide an empty body
@Override
public void windowOpened(WindowEvent e) { }
@Override
public void windowClosed(WindowEvent e) { }
@Override
public void windowIconified(WindowEvent e) { }
@Override
public void windowDeiconified(WindowEvent e) { }
@Override
public void windowActivated(WindowEvent e) { }
@Override
public void windowDeactivated(WindowEvent e) { }
}
In this example, we shall modify the earlier AWTCounter example to handle the WindowEvent. Recall that
pushing the "close-window" button on the AWTCounter has no effect, as it did not handle
theWindowEvent of windowClosing(). We included the WindowEvent handling codes in this example.
1. We identify super Frame as the source object.
2. The Frame fires the WindowEvent to all its registered WindowEvent listener(s).
3. We select this object as the WindowEvent listener (for simplicity)
4. We register this object as the WindowEvent listener to the source Frame via
method addWindowListener(this).
5. The WindowEvent listener (this class) is required to implement the WindowListener interface,
which declares 7 abstract
methods: windowOpened(), windowClosed(), windowClosing(),windowActivated(), windowDeact
ivated(), windowIconified() and windowDeiconified().
6. We override the windowClosing() handler to terminate the program using System.exit(0). We
ignore the other 6 handlers, but required to provide an empty body.
The sequence diagram is as follow: