Fundamentals of Software

Development
CT010-3-1
Event Handling

Prepared by: GTK First Prepared on:27 th July 2005 Last Modified on:19th December 2005
Quality checked by: GTK
Copyright 2005 Asia Pacific University College of Technology and Innovation

Topic & Structure of the lesson

Using Frames, Panels, Dialogs
Implementing GUI components on Frames
and Panels
Introduction to Event Handling
ActionListener and the classes used

Sample programs

CT010-3-1 Fundamentals of Software Design

Event Handling

Learning Outcomes
At the end of this module, YOU should be able to:
Understand the differences between a frame
and an applet.
Explain the structure of an event-handling
programme.
Create, edit, compile, run and debug simple
event-driven Java programs implementing GUI
components and layout managers
incorporating event-handling techniques.
CT010-3-1 Fundamentals of Software Design

Event Handling

Key Terms
If you have mastered this topic, you should be able to use
the following terms correctly in your assignments and
exams:
Frames
Dialog
Panel
ActionListener

CT010-3-1 Fundamentals of Software Design

Event Handling

AWT Basics - Frames

A Frame is a top-level window with a title and a border. In
the Java API, it's object hierarchy looks something like this;
java.lang.Object
|
+--java.awt.Component
|
+--java.awt.Container
|
+--java.awt.Window
|
+--java.awt.Frame
As you can see, the Frame inherits from a long line of
superclasses, the immediate one being the Window class
CT010-3-1 Fundamentals of Software Design

Event Handling

AWT Basics - Frames

Creating your first frame

import java.awt.*;
public class MyFrame extends Frame {
public static void main(String[] args) {
MyFrame me = new MyFrame();
}
public MyFrame() {
setSize(150,150);
setLocation(100,100);
setTitle("My First java.awt.Frame!");
setLayout(new FlowLayout());
setVisible(true);
}
}
CT010-3-1 Fundamentals of Software Design

Event Handling

AWT Basics - Frames

setSize()
- sets the size of the frame.
setLocation()
- sets the location of the frame
within the desktop.
setTitle()
- sets the title of the frame.
setVisible() - makes the frame visible to the
user.

The output of the

program might look
something like this :

CT010-3-1 Fundamentals of Software Design

Event Handling

AWT Basics - Dialog

A Dialog is a top-level window with a title and a
border that is typically used to take some form of
input from the user.
In the API hierarchy, the Dialog inherits from the
following line of objects
java.lang.Object
|
+--java.awt.Component
|
+--java.awt.Container
|
+--java.awt.Window
|
+--java.awt.Dialog

CT010-3-1 Fundamentals of Software Design

Event Handling

AWT Basics - Dialog

Dialogs are typically used on-top of an existing
Window to capture data or display messages to
the user.
An example of a typical dialog would be the fileopen dialog;

CT010-3-1 Fundamentals of Software Design

Event Handling

AWT Basics - Dialog

A dialog must have either a frame or another
dialog defined as its owner when it's
constructed.
A dialog can be either modeless (the default) or
modal.
A modal dialog is one which blocks input to all
other top level windows in the app context,
except for any windows created with the dialog
as their owner.
CT010-3-1 Fundamentals of Software Design

Event Handling

AWT Basics - Dialog

Creating a Dialog
Dialog d = new Dialog(this, "java.awt.Dialog", true);
d.setSize(100,100);
d.setLocation(120,120);
d.show();

CT010-3-1 Fundamentals of Software Design

Event Handling

AWT Basics - Dialog

By adding the codes
above to the
previous program,
the output of the
program might
look something like
this :

CT010-3-1 Fundamentals of Software Design

Event Handling

Panels
The Panel object is located in the following API
hierarchy;
java.lang.Object
|
+--java.awt.Component
|
+--java.awt.Container
|
+--java.awt.Panel

A Panel is similar to a Window in that a Panel is a

surface that you can place Components.
But a Panel is not a Window; it is a sibling of a
Window.
CT010-3-1 Fundamentals of Software Design

Event Handling

Panels

For example, you can create an application using BorderLayout . Then,

within the North Panel, you can place a TextArea using FlowLayout, and
within South Panel, you can place five Buttons using FlowLayout.

North Panel
(textPanel)

South Panel
(buttonPanel)

By using Panels within Panels, you can create an infinite variety of

screen layouts.

CT010-3-1 Fundamentals of Software Design

Event Handling

Panels
The code that
generate the
previous GUI :

setLayout(new BorderLayout());
Panel buttonPanel = new Panel();
buttonPanel.setBackground(Color.blue);
buttonPanel.setLayout(new FlowLayout());
Button memo1Button = new Button("Save Memo 1");
buttonPanel.add(memo1Button);
Button memo2Button = new Button("Save Memo 2");
buttonPanel.add(memo2Button);
Button clearButton = new Button("Clear");
buttonPanel.add(clearButton);
Button getMemo1Button = new Button("Get Memo 1");
buttonPanel.add(getMemo1Button);
Button getMemo2Button = new Button("Get Memo 2");
buttonPanel.add(getMemo2Button);
add(buttonPanel,"South");
Panel textPanel = new Panel();
theText = new TextArea(10,40);
textPanel.add(theText);
add(textPanel, "North");

CT010-3-1 Fundamentals of Software Design

Event Handling

Event-Handling Application
GUIs are event-driven (generate events when user
interacts with the GUI components (event source))
Common interactions include moving the mouse,
clicking the mouse, clicking a button, typing in a
textfield, selecting an item from a menu etc.
event-driven program is a program that runs the event
loop that waits for input and then responds accordingly
event-driven programming is a technique used in
software that operates a program in response to events
as they occur
CT010-3-1 Fundamentals of Software Design

Event Handling

Event-Handling Application
The basic model for a GUI program requires the following:
1. Declaring application as event listener (action listener)
(e.g. implements ActionListener)
2. Register the reactive components
(e.g. tFahr.addActionListener (this))
3. Define the action to be performed (methods)
(e.g. action Performed(ActionEvent e))
2 key tasks to process a GUI event:
Register an event listener for the GUI component that is
expected to generate the event
Implement an event-handling method (event handlers)
CT010-3-1 Fundamentals of Software Design

Event Handling

Event-Handling Application
Event Class
ActionEvent
WindowEvent
AdjustmentEvent
ItemEvent
e.g. import java.awt.ActionEvent
Common types of event listener
ActionListener (clicking, selecting items)
WindowListener (closing, opening windows)
AdjustmentListener (scrollbars)
ItemListener (selecting checkboxes)
e.g. implements ActionListener
CT010-3-1 Fundamentals of Software Design

Event Handling

Event-Handling Application
1. Import the java.awt.event package

eg. import java.awt.event.*;

2. Declare the application to be a Listener

eg. public class ConvertTemp extends Frame implements
ActionListener {

3. Register the reactive components

Reactive components : Components that cause an action to
be performed when its activated such as by clicking or
changing its value.
eg.
TextField tFahr = new TextField(10);
tFahr.addActionListener(this);
add(tFahr);
CT010-3-1 Fundamentals of Software Design

Event Handling

Event-Handling Application
4. Define the action to be performed when a reactive
component is activated
eg.
public void actionPerformed (ActionEvent e) {
if (e.getSource() == tFahr) {
} else {
}
}

CT010-3-1 Fundamentals of Software Design

Event Handling

Example: Memo Saver

Lets look at an example of a simple memo saver which
produced the output and GUI which looks like this :

textPanel

buttonPanel
CT010-3-1 Fundamentals of Software Design

Event Handling

Example: Memo Saver

import java.awt.*;
import java.awt.event.*;
public class TextAreaDemo extends Frame implements ActionListener {
public TextAreaDemo() {
setTitle("Memo Saver");
setLayout(new BorderLayout());
setSize(450,250);
addWindowListener(new WindowDestroyer());
Panel buttonPanel = new Panel();
buttonPanel.setBackground(Color.blue);
buttonPanel.setLayout(new FlowLayout());
Button memo1Button = new Button("Save Memo 1");
memo1Button.addActionListener(this);
buttonPanel.add(memo1Button);
Button memo2Button = new Button("Save Memo 2");
memo2Button.addActionListener(this);
buttonPanel.add(memo2Button);
CT010-3-1 Fundamentals of Software Design

Event Handling

Example: Memo Saver

Button clearButton = new Button("Clear");
clearButton.addActionListener(this);
buttonPanel.add(clearButton);
Button getMemo1Button = new Button("Get Memo 1");
getMemo1Button.addActionListener(this);
buttonPanel.add(getMemo1Button);
Button getMemo2Button = new Button("Get Memo 2");
getMemo2Button.addActionListener(this);
buttonPanel.add(getMemo2Button);
add(buttonPanel,"South");
textPanel = new Panel();
textPanel.setBackground(Color.white);
theText = new TextArea(10,40);
theText.setBackground(Color.white);
textPanel.add(theText);
add(textPanel, "North");
}
CT010-3-1 Fundamentals of Software Design

Event Handling

Example: Memo Saver

public void actionPerformed (ActionEvent e) {
String actionCommand = e.getActionCommand();
if (actionCommand.equals("Save Memo 1"))
memo1=theText.getText();
else if (actionCommand.equals("Save Memo 2"))
memo2=theText.getText();
else if (actionCommand.equals("Clear"))
theText.setText("");
else if (actionCommand.equals("Get Memo 1"))
theText.setText(memo1);
else if (actionCommand.equals("Get Memo 2"))
theText.setText(memo2);
}

CT010-3-1 Fundamentals of Software Design

Event Handling

Example: Memo Saver

public static void main (String[] args) {
TextAreaDemo guiDemo = new TextAreaDemo();
guiDemo.setVisible(true);
}
private Panel textPanel;
private TextArea theText;
private String memo1 = "No Memo 1";
private String memo2 = "No Memo 2";
}

CT010-3-1 Fundamentals of Software Design

Event Handling

Example: Temperature
Application
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
public class ConvertTemp extends Frame implements ActionListener {
// Declare and allocate Components
TextField
tFahr = new TextField(9),
tCent = new TextField(9);
private Panel textPanel;
private TextArea theText;
private String memo1 = "No Memo 1";
rivate String memo2 = "No Memo 2";
public static void main(String[] args){
ConvertTemp me = new ConvertTemp();
}

CT010-3-1 Fundamentals of Software Design

Event Handling

Example: Temperature
Application
public ConvertTemp() {
setSize(250,300);
setLocation(100,100);
setTitle("Converting Temperature");
setLayout(new FlowLayout());
addWindowListener(new WindowDestroyer());
// Arrange Component layout
add(new Label("Fahrenheit"));
add(tFahr);
add(new Label("Centigrade"));
add(tCent);
// Register Component Listeners
tFahr.addActionListener(this);
tCent.addActionListener(this);
setVisible(true);
}
CT010-3-1 Fundamentals of Software Design

Event Handling

Example: Temperature
Application
public void actionPerformed (ActionEvent e) {
// Respond to Action Events:
// 1. tFahr TextField
// 2. tCent TextField
double fahr, cent;
if (e.getSource()==tFahr) {
fahr = new Double(tFahr.getText()).doubleValue();
cent = 5.0 * (fahr - 32.0) / 9.0;
tCent.setText(cent + "");
}
else {
cent = new Double(tCent.getText()).doubleValue();
fahr = 9.0 * cent / 5.0 + 32.0;
tFahr.setText(fahr + "");
}
}
}
CT010-3-1 Fundamentals of Software Design

Event Handling

Quick Review Question

How are frames different from applets?
List the four (4) steps to include event
handling into an application.

CT010-3-1 Fundamentals of Software Design

Event Handling

Summary of Main Teaching

Points
Using Frames, Panels, Dialogs
Implementing GUI components on Frames
and Panels
Introduction to Event Handling
ActionListener and the classes used

Sample programs

CT010-3-1 Fundamentals of Software Design

Event Handling

Next Lesson
Object-Oriented Programming
Introduction to classes and objects
Defining a class
Adding variables and methods to a class
Defining an object
Visibility control
public, private, protected, default

Static/Instance members
CT010-3-1 Fundamentals of Software Design

Event Handling