EE2E1.

JAVA Programming

Lecture 6

Event handling and building user

interfaces with Swing
Contents
Introduction
Javas event delegation model event sources and
event listeners
Event classes
Example a mouse tracker
Building GUIs
Layout within a GUI layout managers
Example 1
Example 2
And finally..how do we build our own
GUIs?
Introduction
Most modern applications come with a
sophisticated user interface comprising
Push buttons

Selection boxes

Dialog boxes

Pull down menus

etc

Interacting with a user interface component

generates an event which must be handled by the
application program
Therefore, in order to be able to create our own user
interfaces, we must understand the Java event
model
Javas event delegation model
event sources and event listeners
Different languages handle event programming in
different ways
In Visual Basic, each user interface component
generates a specific event which a particular piece
of code handles
Simple but rather inflexible
In C, all events are treated equally and added to an
event queue for processing
Complex to code and requires access to the
event queue
 Java allows objects to be designated event
listeners which can listen for for specific types of
events (for example a mouse button click)
Unlike VB, the listener is not predetermined
Unlike C, objects have to only handle specific
types of events
The diagram below shows how objects are
designated listeners for specific event sources
Event listeners are registered with the particular
event sources whose events they handle
One object can be a listener for several sources
Event source
click Listener
Mouse button object 1

Listener
object 2
click
Event source
push
Push button

Listener
push object 3
 In terms of Java objects and methods, event
handling works as follows :
An event source registers all listener
objects
The event source sends out event objects
to all registered listener objects
Each listener object uses information
encapsulated in the event object to call
the appropriate listener method
 The following example shows a simple user
interface to select the background colour
This has been implemented as an applet so that
it can be run with a web browser
The normal JFrame class has been replaced
with a JApplet class
Other small changes required
http://www.eee.bham.ac.uk/spannm/Java%20St
uff/ButtonTestApplet/ButtonTestApplet.html
Class ButtonPanel is the panel containing the
push buttons and the event handling (key parts
emboldened)
class ButtonPanel extends JPanel implements
ActionListener
{
public ButtonPanel()
{
// Create buttons and add listeners
}

public void actionPerformed(ActionEvent evt)

{
// Handle button press events
}

private JButton yellowButton;

private JButton blueButton;
private JButton redButton;
}
public ButtonPanel()
{
yellowButton = new JButton("Yellow");
blueButton = new JButton("Blue");
redButton = new JButton("Red");
add(yellowButton);
add(blueButton);
add(redButton);
yellowButton.addActionListener(this);
blueButton.addActionListener(this);
redButton.addActionListener(this);
}
public void actionPerformed(ActionEvent evt)
{
Object source = evt.getSource();
Color color = getBackground();
if (source == yellowButton) color = Color.yellow;
else if (source == blueButton) color = Color.blue;
else if (source == redButton) color = Color.red;
setBackground(color);
repaint();
}
 class ButtonPanel extends JPanel implements
ActionListener
The panel object implements the ActionListener
interface and an implementation of the method
ActionPerformed(), which is the event handling
method which must be provided
yellowButton.addActionListener(this);
The JButton object yellowButton registers the
ButtonPanel object as a listener for button
presses
yellowButton.addActionListener(this)

Yellow Blue Red

ButtonPanel
 ButtonPanel.actionPerformed(ActionEvent evt) is
called automatically when one of the buttons is
pressed
evt is an ActionEvent object which can be used
to determine which of the buttons was pressed

Object source = evt.getSource();

This returns the object which was the source of

the event
Object is the super class so an object of any
class can be assigned to it
Event classes
Event classes are arranged in an inheritance
tree with the base class being EventObject
Event classes are in the package
java.awt.event
Event objects encapsulate information about
the event such as the event source
Each event class has a corresponding event
listener class
 We have already seen two examples of events and
corresponding listeners
ActionEvent with listener ActionListener
generated by (amongst other things) a button
press
WindowEvent with listener WindowListener
generated when a user tries to close a window
Events are also generated by keyboard presses and
mouse drags and clicks which are handled by
appropriate listeners
Some events (such as a PaintEvent) are generated
automatically when a window is moved/resized so
that it is repainted
Example a mouse tracker
A mouse tracker program keeps track of the
motion of the mouse and mouse clicks
Uses event listeners
MouseListener

Listens for mouse button clicks

MouseMotionListener

Listens for mouse moves and drags

We need to implement the following methods in

the listener interfaces
 MouseListener interface
Methods :

mousePressed

mouseReleased

mouseEntered

mouseExited

mouseClicked

MouseMotionListener
Methods :

mouseDragged

mouseMoved
 http://www.eee.bham.ac.uk/spannm/Java%2
0Stuff/MouseTrackerApplet/MouseTracker
Applet.html
 The program has been implemented as an
applet
The implementation of the event handlers is
straighforward
Uses event.getX() and event.getY() to
determine the mouse position
mouseEntered() puts up a diaglog box

(see later) so that the user can select when

ready to track
public class MouseTrackerApplet extends JApplet implements
MouseListener, MouseMotionListener
{
public MouseTrackerApplet()
{
getContentPane().add(new Jlabel(), BorderLayout.SOUTH);
addMouseListener(this);
addMouseMotionListener(this);
}
public void mouseClicked(MouseEvent event) {..}
public void mousePressed(MouseEvent event) {..}
public void mouseReleased(MouseEvent event) {..}
public void mouseEntered(MouseEvent event) {..}
public void mouseExited(MouseEvent event) {..}
public void mouseDragged(MouseEvent event) {..}
public void mouseMoved(MouseEvent event) {..}
.
.
}
public void mouseClicked(MouseEvent event)
{
statusBar.setText("Clicked at [" + event.getX() + ", " +
event.getY() + "]");
}

public void mouseEntered(MouseEvent event)

{
if (!entered)
{
JOptionPane.showMessageDialog(null,"Mouse in
window");
entered=true;
}
}
Building GUIs
Swing has a large number of classes for GUI
components
Text input
JTextField

Labels

JLabel

Buttons

JButton

Check boxes (for choosing options)

JCheckBox
 Radio buttons (for choosing 1 from several
options)
JRadioButton

Lists

JList

Drop down boxes (combo boxes)

JComboBox

Scroll bars

JScrollBar
 Menus ( a bit more involved)
JMenuBar, JMenu, JMenuItem
Diaog boxes (quite a bit more involved!)
JOptionPane
File chooser dialog box (very useful!)
JFileChooser
 We will implement a couple of examples of
creating GUIs containing some of these
components
You can see all of these components in action
(plus a few more) at
http://www.eee.bham.ac.uk/spannm/Java%20St
uff/SwingSetApplet/SwingSetApplet.html
Before we start building simple GUIs, it is
important to know about layout management (how
GUI components are spatially arranged)
Layout within a GUI layout
managers
Layout managers control how GUI
components are spatially arranged within a
container
Its important to understand the basics of
layout even though many development
environments come with pick and place
type layout tools
Flow layout
We have seen how we created a simple GUI by
adding buttons to a panel
The default layout manager for panels is a flow
layout manager
Components (such as buttons) are arranged left
to right top to bottom
When the panel is re-sized, the buttons are re-
flowed to fill the space
More buttons are added to the right of the
existing row and a new row of buttons is started
if there is no more space for the current row
Yellow Blue Red

Orange Purple ..
Border layout
This is the default layout manager for the JFrame
class
Partitions the available space
North

West Centre East

South

Unless we specify, components are added to the

centre partition
Normal to add buttons etc. to panels in flow layout
and then add the panels to the outer frame
More sophisticated layout managers
We can specify more precise positioning of GUI
components
Grid layout

Components arranged in rows and columns

(for example, calculator buttons)
Grid Bag layout

Flexible grid layout where rows columns can

have variable sizes
Box layout

Layout comprises a single row (column) for

a horizontal (vertical) box
Example 1
A GUI to select the font size and style of a
label string
Uses a check box to select bold/italic
Uses a combo box to select font size
http://www.eee.bham.ac.uk/spannm/Java%2
0Stuff/FontChangeApplet/FontChangeAppl
et.html
 The following code adds the check box and
combo box to a panel
JPanel p = new JPanel();
JCheckBox bold = new JCheckBox("Bold");
bold.addActionListener(this);
p.add(bold);
JCheckBox italic= new JCheckBox(Italic");
italic.addActionListener(this);
p.add(italic);
JComboBox fontsize = new JComboBox();
fontsize.setEditable(true);
fontsize.addItem("10");
fontsize.addItem("16");
fontsize.addItem("20");
fontsize.addActionListener(this);
p.add(fontsize);
 A second FontChangePanel contains the string
Every time the font is changed, repaint() is

called to repaint the string in the panel

The two panels are added to the centre and south
portion of the frame
getContentPane().add(p, "South");
panel = new FontChangePanel();
getContentPane().add(panel, "Center");

I want to be

Bold Italic 10
 The following is the code for the actionPerformed()
method of the outer JFrame (or JApplet) class

JComboBox.getSelectedItem() returns the item

selected (it is of type Object so has to be cast to a
string)

JCheckBox.isSelected() returns the state of the

checkbox (true for selected, false otherwise)

font and size are fields of the outer JFrame (or

JApplet) which hold the current font and fontsize of
the string
public void actionPerformed(ActionEvent evt)
{
Object source=evt.getSource();
if (source==fontsize)
{
String fsize=(String)
((JComboBox)source).getSelectedItem();
size=Integer.valueOf(fsize).intValue();
panel.setFont(font, size);
}
else
{
font=(bold.isSelected() ? Font.BOLD : 0) +
(italic.isSelected() ? Font.ITALIC : 0);
panel.setFont(font,size);
}
}
Example 2
A simple shape drawing/manipulation GUI
Uses :
A menu button to select the shape
A list to select the colour
A slider to select the size
This GUI could be the basis of a more sophisticated
drawing package
http://www.eee.bham.ac.uk/spannm/Java%20Stuff/
DrawShapesApplet/DrawShapesApplet.html
 Code to add the menu is straightforward
JMenuBar mbar=new JMenuBar();
setJMenuBar(mbar);

JMenu ShapeMenu=new JMenu("Shape");

JMenuItem RectItem=new JMenuItem("Draw Rectangle");
RectItem.addActionListener(this);
ShapeMenu.add(RectItem);
ShapeMenu.addSeparator();

JMenuItem OvalItem=new JMenuItem("Draw Oval");

OvalItem.addActionListener(this);
ShapeMenu.add(OvalItem);
ShapeMenu.addSeparator();

mbar.add(ShapeMenu);
JMenu JMenuBar

Shape

Draw Rectangle
JMenuItem
Draw Oval
 The event handler for selecting a menu item is also
straightforward
A separate DrawPanel class is defined with a
draw() method
class DrawPanel extends JPanel
{
public void setColour(Color c) {}
public void paintComponent(Graphics g) {}
public void setSize(int size) {}
public void draw(int drawShape) {}
}
Methods draw(), setSize() and setColour() set the
current shape, size and colour and then call repaint()
which automatically calls paintComponent()
public void actionPerformed(ActionEvent evt)
{
if (evt.getSource() instanceof JMenuItem)
{
String arg=evt.getActionCommand();
if (arg.equals("Draw Rectangle"))
{
/***
* Draw a rectangle
***/
panel.draw(DrawPanel.RECTANGLE);
}
else if (arg.equals("Draw Oval"))
{
/***
* Draw an oval
***/
panel.draw(DrawPanel.OVAL);
}
}
}
 The list and slider are added using the following
code
shapeColourList=new JList(colorNames);
sizeSlider=new JSlider(SwingConstants.HORIZONTAL,
0,200,100);
sizeSlider.setMajorTickSpacing(20);
sizeSlider.setPaintTicks(true);
JPanel ColourListPanel=new JPanel();
ColourListPanel.add(new JScrollPane(shapeColourList));
container.add(ColourListPanel,"East");
container.add(sizeSlider,"South");
ColourNames is an string array of colours
{Black, Blue, Cyan .}
 The final step is to add event handlers for
the list and slider
The listener for list selection events is

ListSelectionListener
The listener for slider events is
ChangeListener
Have created listeners as anonymous inner
classes
An alternative to having the outer frame
(or applet) as the listener
shapeColourList.addListSelectionListener(
// anonymous inner class
new ListSelectionListener()
{
public void valueChanged(ListSelectionEvent evt)
{
panel.setColour(colors[shapeColourList.getSelectedIndex()]);
}
}
);
sizeSlider.addChangeListener(
//anonymous inner class
new ChangeListener()
{
public void stateChanged(ChangeEvent e)
{
panel.setSize(sizeSlider.getValue());
}
}
);
 The valueChanged() and stateChanged() methods
of the ListSelectionListener and ChangeListener
interfaces respectively are defined inside the inner
class
A key point is that methods inside inner classes
can access the private instance fields of objects of
the outer class
panel is private instance field of the outer class
The syntax looks messy but you soon get used to
it!
 JFrame (JApplet) object

object implementing
ListSelectionListener interface
public valueChanged() {}

Can access

private DrawPanel panel;

.
.
And finally..how do we build
our own GUIs?
There has been a lot of detail in this lecture
There are dozens of GUI component classes and
hundreds of methods which we cant possibly
hope to memorise
How do we build our own GUIs?
Drag and drop GUI builders are becoming a
feature of Java IDEs
Using JavaBeans enables powerful
functionality to be added
 The swing component set web page is a
useful online help for finding out about
GUI classes and methods
http://java.sun.com/docs/books/tutorial/ui
swing/components/components.html