EE2E1. JAVA Programming

Lecture 6Lecture 6

Event handling and building user Event handling and building user interfaces with Swinginterfaces with Swing

Contents IntroductionIntroduction Java’s event delegation model – event sources Java’s event delegation model – event sources

and event listenersand event listeners Event classesEvent classes Example – a mouse trackerExample – a mouse tracker Building GUI’sBuilding GUI’s Layout within a GUI – layout managersLayout within a GUI – layout managers ExampleExample And finally……..how do we build our own And finally……..how do we build our own

GUI’s?GUI’s?

Introduction Most modern applications come with a sophisticated user interface Most modern applications come with a sophisticated user interface

comprisingcomprising Push buttonsPush buttons Selection boxesSelection boxes Dialog boxesDialog boxes Pull down menusPull down menus etcetc

GUI’s gives an application a distinctive “look” and “feel”GUI’s gives an application a distinctive “look” and “feel” Provides users with basic level of familiarityProvides users with basic level of familiarity Built from GUI components (controls, widgets, etc.)Built from GUI components (controls, widgets, etc.)

User interacts with GUI component via mouse, keyboard, etcUser interacts with GUI component via mouse, keyboard, etc

Introduction

Scroll bar

Textbox

Menu itemCombo box

Button

Label

Frame

Menu bar

Java’s event delegation model – event sources and event listeners Interacting with a user interface component generates Interacting with a user interface component generates

an an eventevent which must be handled by the application which must be handled by the application programprogram

Therefore, in order to be able to create our own user Therefore, in order to be able to create our own user interfaces, we must understand the Java interfaces, we must understand the Java event modelevent model

Java allows objects to be designated Java allows objects to be designated event listenersevent listeners which can listen for which can listen for specific specific types of events (for types of events (for example a mouse button click)example a mouse button click) Event listeners are Event listeners are registeredregistered with the particular with the particular

event sourcesevent sources whose events they handle whose events they handle

One object can be a listener for several sourcesOne object can be a listener for several sources

Mouse button

Push button

click Listener object 1

Listener object 2

click

push

Listener object 3push

Event source

Event source

In terms of Java objects and methods, event In terms of Java objects and methods, event handling works as follows :handling works as follows :

An event source registers all listener An event source registers all listener objectsobjects

The event source sends out The event source sends out event objectsevent objects to all registered listener objectsto all registered listener objects

Each listener object uses information Each listener object uses information encapsulated in the event object to call encapsulated in the event object to call the appropriate listener methodthe appropriate listener method

8

Three Parts of a GUI Application

1.1. Components that make up the Graphical Components that make up the Graphical User Interface User Interface

2.2. Listeners that receive the events and Listeners that receive the events and respond to them respond to them

3.3. Application code that does useful work for Application code that does useful work for the user the user

The following example shows a simple user interface to select The following example shows a simple user interface to select the background colourthe background colour

This has been implemented as an applet so that it can be run This has been implemented as an applet so that it can be run with a web browserwith a web browser

The normal The normal JFrame JFrame class has been replaced with a class has been replaced with a JApplet JApplet classclass

Other small changes requiredOther small changes required

http://www.eee.bham.ac.uk/spannm/Java%20Stuff/http://www.eee.bham.ac.uk/spannm/Java%20Stuff/ButtonTestApplet/ButtonTestApplet.html ButtonTestApplet/ButtonTestApplet.html

Class Class ButtonPanel ButtonPanel is the panel containing the push buttons is the panel containing the push buttons and the event handling (key parts emboldened)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();}

Blue RedYellow

yellowButton.addActionListener(this)

ButtonPanel

Event classes Event classes are arranged in an inheritance Event classes are arranged in an inheritance

tree with the base class being tree with the base class being EventObjectEventObject Event classes are in the package Event classes are in the package

java.awt.eventjava.awt.event Event objects encapsulate information Event objects encapsulate information

about the event such as the event sourceabout the event such as the event source Each event class has a corresponding event Each event class has a corresponding event

listener classlistener class

We have already seen two examples of events and We have already seen two examples of events and corresponding listenerscorresponding listeners ActionEventActionEvent with listener with listener ActionListenerActionListener generated generated

by (amongst other things) a button pressby (amongst other things) a button press WindowEventWindowEvent with listener with listener WindowListenerWindowListener

generated when a user tries to close a windowgenerated when a user tries to close a window Events are also generated by keyboard presses and Events are also generated by keyboard presses and

mouse drags and clicks which are handled by mouse drags and clicks which are handled by appropriate listenersappropriate listeners

Some events (such as a Some events (such as a PaintEventPaintEvent) are generated ) are generated automatically when a window is moved/resized so automatically when a window is moved/resized so that it is repaintedthat it is repainted

16

Events Generated by Swing ComponentsAct that results in the event Listener type

User clicks a button, presses Return while typing in a text field, or chooses a menu item

ActionListener

User closes a frame (main window) WindowListener

User presses a mouse button while the cursor is over a component

MouseListener

User moves the mouse over a component

MouseMotionListener

Component becomes visible ComponentListener

Component gets the keyboard focus FocusListener

Table or list selection changes ListSelectionListener

Example – a mouse tracker A mouse tracker program keeps track of the motion A mouse tracker program keeps track of the motion

of the mouse and mouse clicksof the mouse and mouse clicks Uses event listenersUses event listeners

MouseListenerMouseListenerListens for mouse button clicksListens for mouse button clicks

MouseMotionListenerMouseMotionListenerListens for mouse moves and dragsListens for mouse moves and drags

We need to implement the following methods in the We need to implement the following methods in the listener interfaceslistener interfaces

MouseListenerMouseListener interface interface Methods :Methods :

mousePressedmousePressedmouseReleasedmouseReleasedmouseEnteredmouseEnteredmouseExitedmouseExitedmouseClickedmouseClicked

MouseMotionListenerMouseMotionListener Methods :Methods :

mouseDraggedmouseDraggedmouseMovedmouseMoved

http://www.eee.bham.ac.uk/spannm/Javahttp://www.eee.bham.ac.uk/spannm/Java%20Stuff/MouseTrackerApplet/%20Stuff/MouseTrackerApplet/MouseTrackerApplet.html MouseTrackerApplet.html

The program has been implemented as an The program has been implemented as an appletapplet

The implementation of the event handlers is The implementation of the event handlers is straighforwardstraighforward Uses Uses event.getX() event.getX() and and event.getY()event.getY() to to

determine the mouse positiondetermine the mouse position mouseEnteredmouseEntered()() puts up a dialogputs up a dialog box so box so

that the user can select when ready to that the user can select when ready to tracktrack

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 GUI’s Swing has a large number of classes for GUI Swing has a large number of classes for GUI

componentscomponents Text inputText input

JTextFieldJTextField LabelsLabels

JLabelJLabel ButtonsButtons

JButtonJButton Check boxes (for choosing options)Check boxes (for choosing options)

JCheckBoxJCheckBox

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

JRadioButtonJRadioButton ListsLists

JListJList Drop down boxes (combo boxes)Drop down boxes (combo boxes)

JComboBoxJComboBox Scroll barsScroll bars

JScrollBarJScrollBar

Menus ( a bit more involved)Menus ( a bit more involved)JMenuBarJMenuBar, , JMenuJMenu, , JMenuItemJMenuItem

DiaogDiaog boxes (quite a bit more involved!)boxes (quite a bit more involved!)JOptionPaneJOptionPane

File chooser dialog box (very useful!)File chooser dialog box (very useful!)JFileChooserJFileChooser

26

Dialog Boxes

Used by applications to interact with the Used by applications to interact with the useruser

Provided by Java’s Provided by Java’s JOptionPaneJOptionPane class class Contains input dialogs and message Contains input dialogs and message

dialogsdialogs

27

Dialog Boxes

Note iconNote icon Other icons availableOther icons available

Message dialog type Icon Description

ERROR_MESSAGE

A dialog that indicates an error to the user.

INFORMATION_MESSAGE

A dialog with an informational message to the user.

WARNING_MESSAGE

A dialog warning the user of a potential problem.

QUESTION_MESSAGE

A dialog that poses a question to the user. This dialog normally requires a response, such as clicking a Yes or a No button.

PLAIN_MESSAGE no icon A dialog that contains a message, but no icon.

You can see all of these components in action You can see all of these components in action (plus a few more) at(plus a few more) at http://www.eee.bham.ac.uk/spannm/Javahttp://www.eee.bham.ac.uk/spannm/Java

%20Stuff/SwingSetApplet/%20Stuff/SwingSetApplet/SwingSetApplet.html SwingSetApplet.html

Before we start building simple GUI’s, it is Before we start building simple GUI’s, it is important to know about important to know about layout management layout management (how (how GUI components are spatially arranged)GUI components are spatially arranged)

Layout within a GUI – layout managers

Layout managersLayout managers control how GUI control how GUI components are spatially arranged within a components are spatially arranged within a containercontainer

Its important to understand the basics of Its important to understand the basics of layout even though many development layout even though many development environments come with ‘pick and place’ environments come with ‘pick and place’ type layout toolstype layout tools

Flow layout We have seen how we created a simple GUI by adding We have seen how we created a simple GUI by adding

buttons to a panelbuttons to a panel The default layout manager for panels is a The default layout manager for panels is a flow layout flow layout

managermanager Components (such as buttons) are arranged left to right Components (such as buttons) are arranged left to right

– top to bottom– top to bottom When the panel is re-sized, the buttons are ‘re-flowed’ When the panel is re-sized, the buttons are ‘re-flowed’

to fill the spaceto fill the space More buttons are added to the right of the existing row More buttons are added to the right of the existing row

and a new row of buttons is started if there is no more and a new row of buttons is started if there is no more space for the current rowspace for the current row

Border layout This is the default layout manager for the This is the default layout manager for the JFrame JFrame classclass Partitions the available spacePartitions the available space

Unless we specify, components are added to the centre partitionUnless we specify, components are added to the centre partition Normal to add buttons etc. to panels in flow layout and then add the panels Normal to add buttons etc. to panels in flow layout and then add the panels

to the outer frameto the outer frame

More sophisticated layout managers We can specify more precise positioning of GUI componentsWe can specify more precise positioning of GUI components

Grid layoutGrid layoutComponents arranged in rows and columns (for Components arranged in rows and columns (for

example, calculator buttons)example, calculator buttons) Grid Bag layout Grid Bag layout

Flexible grid layout where rows columns can have Flexible grid layout where rows columns can have variable sizesvariable sizes

Box layoutBox layoutLayout comprises a single row (column) for a horizontal Layout comprises a single row (column) for a horizontal

(vertical) box(vertical) box

Here are several common Java layout Here are several common Java layout managers:managers:

Layout managers

35

Complex layouts How would you create a complex window like this, using How would you create a complex window like this, using

the layout managers shown?the layout managers shown?

create panels within panelscreate panels within panels each panel has a different layout, and by each panel has a different layout, and by

combining the layouts, more complex / combining the layouts, more complex / powerful layout can be achievedpowerful layout can be achieved

example:example: how many panels?how many panels? what layout in each?what layout in each?

Solution: composite layout

Example

A GUI to select the font size and style of a A GUI to select the font size and style of a label stringlabel string

Uses a check box to select bold/italicUses a check box to select bold/italic Uses a combo box to select font sizeUses a combo box to select font size http://www.eee.bham.ac.uk/spannm/Javahttp://www.eee.bham.ac.uk/spannm/Java

%20Stuff/FontChangeApplet/%20Stuff/FontChangeApplet/FontChangeApplet.html FontChangeApplet.html

The following code adds the check box and The following code adds the check box and combo box to a panelcombo 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 A second FontChangePanel FontChangePanel contains the stringcontains the string Every time the font is changed, Every time the font is changed, repaint() repaint() is is

called to repaint the string in the panelcalled to repaint the string in the panel The two panels are added to the centre and south The two panels are added to the centre and south

portion of the frameportion of the framegetContentPane().add(p, "South");

panel = new FontChangePanel();

getContentPane().add(panel, "Center");

I want to be …

Bold Italic 10

The following is the code for the The following is the code for the actionPerformed()actionPerformed() method of the outer method of the outer JFrame JFrame (or (or JAppletJApplet)) classclass

JComboBox.getSelectedItem()JComboBox.getSelectedItem() returns the item selected (it is of type returns the item selected (it is of type Object Object so has to be cast to a string)so has to be cast to a string)

JCheckBox.isSelected()JCheckBox.isSelected() returns the state of the checkbox ( returns the state of the checkbox ( truetrue for selected, for selected, falsefalse otherwise) otherwise)

fontfont and and size size are fields of the outer are fields of the outer JFrame JFrame (or (or JAppletJApplet)) which hold the current font and fontsize of the stringwhich 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); } }

And finally……..how do we build our own GUI’s? There has been a lot of detail in this lectureThere has been a lot of detail in this lecture There are dozens of GUI component classes and There are dozens of GUI component classes and

hundreds of methods which we can’t possibly hope to hundreds of methods which we can’t possibly hope to memorisememorise

How do we build our own GUI’s?How do we build our own GUI’s? ‘‘Drag and drop’ GUI builders are becoming Drag and drop’ GUI builders are becoming

commonplacecommonplace‘‘Visual’ programmingVisual’ programmingThe programmer simply adds the event handlersThe programmer simply adds the event handlers

The swing component set web page is a The swing component set web page is a useful ‘online’ help for finding out about useful ‘online’ help for finding out about GUI classes and methodsGUI classes and methods Swing tutorialSwing tutorial