5/5/09
+Lecture 9:
Graphical User
Interface
Dynamics
Time: Tuesday, March 30
Location: Lab III (BIT Lab)
Object-Oriented
Programming in Java
Melissa R. Ho, PhD Candidate
University of California, Berkeley
School of Information
Office Hours: Tuesdays 3-5, or by appt.
+
Announcements
 
Office Hours, Tuesdays 3-5
 
Midterm, April 7
 
Classes, Objects, Methods
 
Inheritance, Abstract Classes, Interfaces
Recursion
 
 
 
 
Data Structures: Linked Lists, Vectors, Hashtables
List Manipulalation (creating, adding items, removing items)
Class Projects
 
Meetings on April 14-15 in Project Groups to select topics
 
Appointment sign-up sheet will be on my door
A Working Java Application – to be demo’d on May 5-6
 
Groups of 5-6 Students
 
Lecture 9: Graphical User Interface Dynamics
5/5/09
1
5/5/09
+
Method Review
Why might this solution for Assignment 3 be wrong?
public boolean addFirst(Object cow)
{
list.add(“boy”);
addItem(cow);
}
public boolean removeFirst(Object boy)
{
list.remove(“boy”);
}
public static void main(String [] args)
{ LinkedList fruits = new LinkedList();
fruits.addFirst(“orange”);
fruits.addFirst(“apple”);
}
Lecture 9: Graphical User Interface Dynamics
+
5/5/09
Graphical User Interfaces
More Objects in Java – just painted on the screen!
 
Review: Statics
 
 
 
Components: JButtons, JLabels, JCheckboxes, etc can be
arranged on the screen, and have a size and position
Containers: JFrames are top-level containers, and JPanels are
containers within JFrames, and hold other components, arranged
using LayoutManagers
Actions: How do we make our GUIs respond do our actions?
 
Actions in Java are called Events
 
Components can create MouseEvents, ActionEvents, or
KeyEvents – so you must implement code that can listen for
these events by implementing the MouseListener,
ActionListener, and KeyListener Interfaces
Lecture 9: Graphical User Interface Dynamics
5/5/09
2
5/5/09
+
Java Event Model: Delegation
addActionListener(ActionListener listener)
actionPerformed(ActionEvent event)
User
•  The user
clicks on a
button
Button
ActionListener
Handler
•  The button
receives the
MouseEvents
and generates
an
ActionEvent
•  The
ActionListener
is part of the
programmer’s
application
and delegates
the Button
press to the
appropriate
handler
•  The “Handler”
is the
application
logic of the
program and
performs the
actual
operation
corresponding
to the button
click
click!
ActionEvent
Lecture 9: Graphical User Interface Dynamics
5/5/09
+
Example:
CounterButton
Each time the button is pressed
the counter increments by one.
Recall from last lecture how we
can build a basic user interface
from basic components by
adding them to JPanels and
JFrames.
Here, we also implement the
ActionListener interface, and
add outselves to the JButton, so
that the actionPerformed
method is called each time the
button is pressed the counter
increases, and the label is
updated.
Lecture 9: Graphical User Interface Dynamics
5/5/09
3
5/5/09
+
Events
 
(java.lang)
Object
(java.util)
EventObject
Event Object
signals to the program that an
action has an occurred
  Java creates an internal object
(the Event instance)
  Examples: mouse clicked,
button pushed, menu
selected
 
(java.awt)
Component
(java.awt)
AWTEvent
 
API classes
Events inherit from:
java.util.EventObject
  Most events are in the
package: java.awt.event
  Some events are in:
javax.swing.event
 
(java.awt.event)
ActionEvent
(java.awt.event)
InputEvent
(java.awt.event)
MouseEvent
(java.awt.event)
KeyEvent
Lecture 9: Graphical User Interface Dynamics
+
5/5/09
Event Source
 
Many different kinds of events can be created
User interacts with a component (e.g. key
presses, mouse movements, mouse clicks)
  Component generates the event (e.g. button is
clicked, checkBox is checked, comboBox item
is selected
  You can also create your own events in your
user interfaces in response to other events, or
in response to things happening in your
program (e.g. alarm timers)
Examples
Depending on who/what is creating the event, we
define a special object known as the event
source
  the object on which the user generates an event
  usually the components (e.g. the JButton), but
could be other Objects
Source:
Event:
 
 
Lecture 9: Graphical User Interface Dynamics
Action:
Source:
Event:
click button
JButton
ActionEvent
Action:
select menu
item
JMenuItem
ActionEvent
Source:
Event:
Action:
dialog
window
JDialog
WindowEvent
5/5/09
4
5/5/09
+
Source and Event Objects
Making the connections….
 
How do we connect EventObjects to their sources?
 
events can identify their types and source objects
 
useful method inherited from EventObject:
public Object getSource();
 
For example, if you have multiple buttons:
public void actionPerformed(ActionEvent e) {
if (e.getSource() == button1)
{ /* dispatch to button1 handler */ }
else if (e.getSource() == button2)
{ /* dispatch to button2 handler */ }
}
 
Still need special objects to listen for the events
Lecture 9: Graphical User Interface Dynamics
+
5/5/09
EventListeners
 
Delegation Model: And recall your Interfaces!
User acts on the source object
  Source object generates an event object
  Listener object acts on generated event
 
 
EventListener (or listener object, or just listener):
object that can “hear” (or receive an event object)
  designed to perform actions (dispatch handlers) based on events
  need to register listeners with components
 
User
Action
Trigger
Event
Source
Object
Lecture 9: Graphical User Interface Dynamics
Create
Event
Event
Object
Notify
Listener
Listener
Object
Dispatch
Handler
5/5/09
5
5/5/09
+
Implementing the Listeners
Java provides Listener interfaces that you implement, which you can
add to components so that you can listen for particular events
 
Which class should be a listener?
 
 
Top-level container that “contains” the whole GUI
public class MyGUI extends JFrame implements
ActionListener
 
inner classes to create specific listeners for reuse
private class ClickHandler implements ActionListener
 
anonymous classes for “on the spot”
button.addActionListener(new ActionListener(){public
void actionPerformed(ActionEvent e){…}});
Listeners and Handlers
 
must implement all of the interfaces methods
 
listener’s metods are called handlers: methods that
handle event objects are heard by listeners
Typical Pattern:
ActionEvent 
ActionListener
KeyEvent 
KeyListener
Types of Listeners:
see
java.util.EventListener
Lecture 9: Graphical User Interface Dynamics
+
5/5/09
Examples
 
ActionListener
 
 
KeyListener
 
void keyPressed(KeyEvent e)
void keyReleased(KeyEvent e)
 
void keyTyped(KeyEvent e)
 
 
void actionPerformed(ActionEvent e)
Identifying source object:
 
e.getSource()
(from java.util.EventObject)
 
see specific event classes for other methods, from the online
version of the Java API, or from the NetBeans documenation
Lecture 9: Graphical User Interface Dynamics
5/5/09
6
5/5/09
+
Registering Listeners
How does a component know what listener to use?
 
You must register the listeners that you implement
 
connect listener object to the source objects
 
connection process is called registering listeners
you must write the code to add the listeners
 
 
 
Syntax:
component.addTypeListener(listener);
Examples:
button.addActionListener(this); /* if MyGUI enclosing class is listener */
/* if you have a separate class, inner or normal */
MyActionHandler handler = new MyActionHandler();
button.addActionListener(handler);
/* anonymous classes */
button.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent e) {/** do something */}});
Lecture 9: Graphical User Interface Dynamics
+
5/5/09
Rules: One and Many
 
A single source object (typically a component) can have
many listeners
 
 
 
e.g. register multiple listeners to a given JButton
A single listener can be shared by many source objects
 
e.g. MyGUI is the listener for all of the components used in the
user interface
 
http://java.sun.com/docs/books/tutorial/uiswing/events
/generalrules.htm
Now for an Example
Lecture 9: Graphical User Interface Dynamics
5/5/09
7
5/5/09
+
15
The 8-Puzzle
N
1
2
4
7
3
6
5
8
S
E
W
1
2
3
4
5
6
7
8
1
3
4
2
6
7
5
8
1
2
3
4
6
5
8
7
1
2
4
6
7
5
1
4
N
7
W
3
3
6
5
8
1
3
4
2
6
7
5
8
1
3
4
2
6
7
5
8
E
8
Lecture 3: OOP
+
2
2/17/09
Implementing the 8-Puzzle
We can implement a Graphical User Interface
version of the 8-Puzzle
 
Let’s first start
with the static
layout
 
This layout
consists of:
 
 
9 JLabels in a
JPanel located in
the Center of a
BorderLayout
4 JButtons in the
North, East,
South and West
Lecture 9: Graphical User Interface Dynamics
5/5/09
8
5/5/09
+
BorderLayout
This layout to positions components
or containers in five locations,
depending on what you specify
when you add the component. The
size of the component expands to fill
the available space, with the
“Center” component occupying the
most space.
Lecture 7: Graphical User Interface Statics
Lecture 9: Graphical User Interface Dynamics
5/5/09
5/5/09
9
5/5/09
+
Handling Events
1. 
Implement the ActionListener
interface
2. 
Add the ActionListener to the
buttons
Lecture 9: Graphical User Interface Dynamics
5/5/09
+
Questions?
Contact
Melissa R. Ho
[email protected]
Office Hours: Tuesdays 3-5, or by appt
ICS, Office 1
Note: These lecture notes are based on lectures from the CS211 course
taught at Cornell University during Spring 2008, co-taught by Dexter
Kozen, Rich Caruana, and David Schwarz.
5/5/09
Lecture 9: Graphical User Interface Dynamics
10