Programming Languages

Lecture 9

Graphical User Interface

R. Pełka – Wojskowa Akademia Techniczna

R. Pełka: Programming Languages

2

Guido van Rossum

 Designer of Python

 Dutch computer programmer, now at Google

 Some facts

 Development began in 1996
 Interpreted scripting language descended

from ABC

 Predecessor, ABC, was inspired by SETL



Lambert Meertens spent year with SETL group

at NYU

 Popular and successful, influential at Google

About the origin of Python, Van Rossum wrote in 1996: Over six years ago, in December
1989, I was looking for a "hobby" programming project that would keep me occupied
during the week around Christmas. My office … would be closed, but I had a home
computer, and not much else on my hands. I decided to write an interpreter for the new
scripting language I had been thinking about lately: a descendant of ABC that would appeal
to Unix/C hackers. I chose Python as a working title for the project, being in a slightly
irreverent mood and a big fan of Monty Python's Flying Circus

R. Pełka: Programming Languages

3

Outline

 Graphical User Interface

 Idea and properties
 Containers
 Components
 Events

 Tools for GUI design

 AWT – Application Windowing Toolkit
 Swing – new Java GUI classes
 SWT (Standard Widget Toolkit - Eclipse)

 Simple GUI design

R. Pełka: Programming Languages

4

GUI Principles



GUI

– Graphical User Interface

 GUI’s are a good target for OO design
 GUI’s main elements



Components

: GUI building blocks.



buttons, menus, sliders, etc.



Layout

: arranging components to

form a usable GUI.



using layout managers.



Events

: reacting to user input.



button presses, menu selections, etc.

 There are some tools for convenient GUI-based design



JBuilder, Eclipse, NetBeans

R. Pełka: Programming Languages

5

Java GUI classes



AWT

(Abstract Window Toolkit) (java.awt.*)

 old GUI framework for Java (Java 1.1)
 some reliance on native code counterparts
 platform independence problems



Swing

(javax.swing.*)

 new GUI framework first introduced in Java 1.2
 includes AWT features plus many enhancements
 pure Java components (no reliance on native code)
 pluggable look and feel architecture



SWT

(Standard Widget Toolkit; from Eclipse)

R. Pełka: Programming Languages

6

AWT and Swing

AWT

was the original platform-dependent

layer of Java to build GUI’s.

Swing

(platform independent layer) was

added later. Swing is part of JFC (

Java

Framework Collection

).

R. Pełka: Programming Languages

7

Event-driven programming

 GUIs are

event-driven programs

: external events

cause methods to be executed



Components

: objects we create which have a

screen presence (e.g. controls, window panes),
and with which the user interacts (e.g. buttons).



Events

: when a user interacts with a component,

Java creates an event object (which records the
source)



Listeners

: Objects we create which respond to

events. A listener has a handler method, which
Java invokes when the event occurs.

R. Pełka: Programming Languages

8

Components

 Components include buttons, textfields, scrollbars,

windows, pop-up menus, menu items, etc

 Example:

javax.swing.JButton



constructor, e.g.:

JButton btn =

new

JButton("Click here!");



instance methods, e.g.:

String

str = btn.getText();

btn.setText("Click again!");



Containers

are components that contain others



instance methods allowing you to add (and position)
components (e.g. button) to the container (e.g. window)

R. Pełka: Programming Languages

9

Event Objects

 different user actions correspond to different event

classes (both low level and high level)

 example:

java.awt.event.ActionEvent



created by Java when (e.g.) a user clicks a button



instance methods:

 getSource() – returns a reference to the source of the event

(i.e.the button, textfield etc that generated it)

 getActionCommand() – returns a String associated with the

source (e.g. the button's text)



constructor methods exist, but it is unlikely that we would
call them

R. Pełka: Programming Languages

10

Listener Objects

 we delegate to Listener objects the task of

responding to certain events for certain
components

 objects contain handler methods that run in

response – we do not normally invoke the handlers
ourselves; Java does it for us when the events occur

 Listeners can be any class of object we like, but

must implement certain interfaces to guarantee
inclusion of appropriately named handlers

 e.g. "listening" for button clicks



implements ActionListener



must include a definition of actionPerformed method

R. Pełka: Programming Languages

11

Registering Listeners

 how does Java know which listener object will

respond to a component's events?

 we must register one or more listeners with the

component

 e.g. if

btn

is a

JButton

and

lstnr1

and

lstnr2

are

listeners (both

implements ActionListener

)

btn.addActionListener(lstnr1);
btn.addActionListener(lstnr2);
...
btn.removeActionListener(lstnr2);

 When the user interacts with the button, Java invokes

the handler methods in each registered listener.

R. Pełka: Programming Languages

12

Container (window) with
component (button)

All this for one button click ...

user

user clicks
button

event object
is generated

ae:ActionEvent

event is
queued
for action

Listener objects

... do something

event dispatch

loop: remove from

queue, invoke

handlers in

registered

listeners

R. Pełka: Programming Languages

13

... which requires:

 In the program:

 write a class that creates a window and a JButton, adds the

JButton to the window, makes the window visible

 write listener classes (implements ActionListener) with

handler method (actionPerformed)

 create listener objects and register them with the JButton

 At runtime:

 user clicks the button
 Java creates the ActionEvent object
 Java adds object to a queue of events
 Java repeatedly



takes object from queue



identifies their listeners



invokes each listener's handler with event as input

R. Pełka: Programming Languages

14

A first GUI ...

import

java.awt.*;

import

java.awt.event.*;

import

javax.swing.*;

public

class

SimplePanel

extends

JPanel {

private

JButton btn;

public

SimplePanel() {

super

();

btn =

new

JButton("Click me!");

add(btn);
ActionListener lstnr =

new

SimpleButtonListener();

btn.addActionListener(lstnr);
}

import AWT, AWT.event
and Swing packages

import AWT, AWT.event
and Swing packages

call to JPanel constructor

call to JPanel constructor

create a button

create a button

add it to the panel

add it to the panel

create a listener

create a listener

register it with the button

register it with the button

R. Pełka: Programming Languages

15

public

static

void

main(String[] args) {

JFrame frm =

new

JFrame("A simple GUI");

Container contentPane = frm.getContentPane();
JPanel pnl =

new

SimplePanel();

contentPane.add(pnl);
frm.setBounds(100, 300, 400, 200);
frm.setVisible(true);
}

}

SimplePanel continued

create a frame

create a frame

get a handle on it

get a handle on it

create a panel

create a panel

add panel to frame

add panel to frame

position it on screen

position it on screen

make it visible!

make it visible!

R. Pełka: Programming Languages

16

SimpleButtonListener

import

java.awt.event.*;

public class

SimpleButtonListener

implements

ActionListener {

private

int

count;

public

SimpleButtonListener() {

}

public

void

actionPerformed(ActionEvent ae) {

count++;
System.out.println(count);
}
}

tell Java it
is a Listener

tell Java it
is a Listener

state what happens
when the button is
pressed

state what happens
when the button is
pressed

R. Pełka: Programming Languages

17

That’s it ...

try do it in BlueJ yourself

you can also use JDK ...
no changes in source code needed

after 10 clicks

R. Pełka: Programming Languages

18

Observations

 no low level details (trapping the mouse

click, queuing the event object, etc.)

 a component may have any number of

listeners attached to it, including zero

 we did not need to invoke the handler

actionPerformed

– Java does it for us

 handlers should not involve a lot of

computation

R. Pełka: Programming Languages

19

Converting Centigrade to
Fahrenheit



construct a simple GUI

allowing a user to

convert temperatures between

centigrade

and

fahrenheit

 the user should be able to input



a temperature in fahrenheit, then click to convert, and
see the corresponding centigrade reading



a temperature in centigrade, then click to convert, and
see the corresponding fahrenheit reading

 Suggestion – always display both readings in the

GUI, and provide two buttons for the user to
choose the conversion

R. Pełka: Programming Languages

20

Outline plan for GUI

 a frame for the GUI ...



... containing a panel in its content pane ...



... which contains two buttons



... and two boxes for displaying
temperatures



... with appropriate labels

 the buttons will need Listeners, which will



read the appropriate input



compute the appropriate conversion



write the result to the appropriate box

 does the frame need a Listener?

R. Pełka: Programming Languages

21

Components in the GUI

 the GUI needs 2

JButton

s, a subclass of

JPanel

, and



javax.swing.JTextField



allows display / entry / edit of a line of text



constructor specifies initial value (and number of
columns)



has methods

setText(...), getText(...),

etc.



javax.swing.JLabel



allows display of text / images



user cannot edit them



constructor supplies initial text



has methods

setText(...), getText(...),

etc.

R. Pełka: Programming Languages

22

JFrame

JPanel (in the ContentPane
of the JFrame)

JButton

JTextField

JLabel

Components in the GUI

R. Pełka: Programming Languages

23

GUI Containers

 some components are

containers



can have other components added to them

 JPanel

is a container – it has

JButton

s added to it



a container can have other containers added to it

 JFrame

is a container – it has a

JPanel

added to it

(via its content pane)

 (in fact, in Swing, all components are

containers)

R. Pełka: Programming Languages

24

Layout Managers

 you can specify the position in a container at which a

component will be placed (e.g.

setLocation(...)

),

but this is not sensitive to resizing or to different
platforms

 each container has an instance variables which holds

a layout manager object, which you can set and get

 when you add components to the container, the

layout manager positions them and sizes them
automatically

 the default for

JPanel

is

FlowLayout

, which places

them sequentially, left-to-right, top-to-bottom

 others include

BorderLayout

,

CardLayout

,

GridLayout

,

GridBagLayout

and

BoxLayout

R. Pełka: Programming Languages

25

Implementation in BlueJ

R. Pełka: Programming Languages

26

class TempConversionGUI

import

javax.swing.*;

import

java.awt.*;

public class

TempConversionGUI

extends

JPanel {

// constants definition

public

static final String DEGREES_FAHRENHEIT = "Degrees Fahrenheit";

public

static final String DEGREES_CENTIGRADE = "Degrees Centigrade";

public

static final String COMPUTE_FAHRENHEIT = "Compute Fahrenheit";

public

static final String COMPUTE_CENTIGRADE = "Compute Centigrade";

private

static final String INIT_FAHR = "212";

private

static final String INIT_CENT = "100";

private

static final

int

TFCOLS = 6;

// components defininition

private

JLabel fahrLabel;

private

JTextField fahrField;

private

JLabel centLabel;

private

JTextField centField;

private

JButton compFahrBtn;

private

JButton compCentBtn;

...

R. Pełka: Programming Languages

27

class TempConversionGUI

ctnd.

// construct Frame and all components

public

TempConversionGUI() {

super

();

fahrLabel =

new

JLabel(DEGREES_FAHRENHEIT);

fahrField =

new

JTextField(INIT_FAHR, TFCOLS);

centLabel =

new

JLabel(DEGREES_CENTIGRADE);

centField =

new

JTextField(INIT_CENT, TFCOLS);

compFahrBtn =

new

JButton(COMPUTE_FAHRENHEIT);

compCentBtn =

new

JButton(COMPUTE_CENTIGRADE);

add(fahrLabel);
add(fahrField);
add(centLabel);
add(centField);
add(compFahrBtn);
add(compCentBtn);

// add Listeners

compFahrBtn.addActionListener(

new

CompFahrBtnLstnr(

this

));

compCentBtn.addActionListener(

new

CompCentBtnLstnr(

this

));

} ...

R. Pełka: Programming Languages

28

class TempConversionGUI

ctnd.

// methods for getting and setting values in TextFields

public void

setFahrField(

int

theFahr) {

fahrField.setText("" + theFahr);
}

public void

setCentField(

int

theCent) {

centField.setText("" + theCent);
}

public int

getFahrField() {

String str = fahrField.getText().trim();

return

Integer.parseInt(str);

}

public int

getCentField() {

String str = centField.getText().trim();

return

Integer.parseInt(str);

}
...

R. Pełka: Programming Languages

29

class TempConversionGUI

ctnd.

// main method

public static void

main(String[] args) {

TempConversionGUI gui =

new

TempConversionGUI();

JFrame frm =

new

JFrame("Temperature Conversions");

Container contentPane = frm.getContentPane();
contentPane.add(gui);
frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frm.setBounds(50, 75, 300, 150);
frm.setVisible(true);
}
}

Class

TempConversionGUI

is ready !

R. Pełka: Programming Languages

30

class CompFahrBtnLstnr

import

java.awt.event.*;

public class

CompFahrBtnLstnr

implements

ActionListener {

// private variable gui

private

TempConversionGUI gui;

// constructor

public

CompFahrBtnLstnr(TempConversionGUI theGUI) {

gui = theGUI;
}

// method for cent to fahr conversion

public void

actionPerformed(ActionEvent ae) {

int

cent = gui.getCentField();

int

fahr = (

int

) Math.round(cent * 9.0 / 5.0 + 32);

gui.setFahrField(fahr);
}
}

R. Pełka: Programming Languages

31

class CompCentBtnLstnr

import

java.awt.event.*;

public class

CompCentBtnLstnr

implements

ActionListener {

// private variable gui

private

TempConversionGUI gui;

// constructor

public

CompCentBtnLstnr(TempConversionGUI theGUI) {

gui = theGUI;
}

// method for fahr to cent conversion

public void

actionPerformed(ActionEvent ae) {

int

fahr = gui.getFahrField();

int

cent = (

int

) Math.round((fahr - 32) * 5.0 / 9.0);

gui.setCentField(cent);
}
}

R. Pełka: Programming Languages

32

class GenericWindowLstnr

import

java.awt.event.*;

public class

GenericWindowLstnr

implements

WindowListener {

// constructor

public

GenericWindowLstnr() { }

// methods

public void

windowOpened(WindowEvent we) { }

public void

windowActivated(WindowEvent we) { }

public void

windowDeactivated(WindowEvent we) { }

public void

windowIconified(WindowEvent we) { }

public void

windowDeiconified(WindowEvent we) { }

public void

windowClosing(WindowEvent we) {

System.exit(0);
}

public void

windowClosed(WindowEvent we) { }

}

verify this project

yourself in BlueJ !!

R. Pełka: Programming Languages

33

Discussion

 in our program, the buttons have listeners, but the

textfields do not



they could have listened for an 'Enter' and then invoked a
handler method

 there is a clean separation between the GUI class,

which handles the I/O, and the classes that do the real
processing

 the listeners are given a reference to the GUI class so

that they can send messages

 we have ignored problems with illegal input
 JFrame also has a listener


now, we will consider 7 possible improvements of our
GUI

R. Pełka: Programming Languages

34

1. The Window Listener

 we mentioned that we could associate a listener

with the JFrame

 the WindowListener interface specifies 7 methods,

which respond to changes in a window's state:

 windowActivated(...)

: window is set to be active

 windowClosed(...)

: window is closed by program

 windowClosing(...)

: window closed by user

 windowDeactivated(...)

: window is no longer active

 windowDeiconified(...)

: window is restored to normal

 windowIconified(...)

: window is minimised

 windowOpened(...)

: window opened for first time

R. Pełka: Programming Languages

35

2. Using WindowAdapter

 instead of laboriously typing default methods for

the

WindowListener

, we can instead inherit from

WindowAdapter

:



implements

WindowListener



supplies 7 default methods

 all we need to do is override the particular methods

we want

R. Pełka: Programming Languages

36

Nested classes

 a

nested class

is one defined

inside

another



use if the inside class only makes sense in the
context of the outer one, or if it must have access to
the outer class variables in order to work

public class Outer {

//constructors, variables, methods etc for Outer

class NestedClass {

//constructors, variables, methods, etc

//for NestedClass

}

}

R. Pełka: Programming Languages

37

3(a). WindowListener as nested

class

 Nested classes can be static or non-static

public class TempConversionGui {

//...

static class MyAdapter extends WindowAdapter {
public void windowClosing(WindowEvent we) {

System.exit(0);

}
}
public static void main(String[] args) {

//...

frm.addWindowListener(new MyAdapter());
//...

R. Pełka: Programming Languages

38

3(b). … or as Anonymous class

 we only used the nested class in a single line
 instead of giving a full named class definition, we can use an

anonymous

class:

 is defined at same point instance is created
 extends a superclass or implements an interface
 has no name or constructor of its own

 listeners are commonly implemented as anonymous classes

frm.addWindowListener(new WindowAdapter() {

public void windowClosing(WindowEvent we)
{
System.exit(0);
}
}
);

R. Pełka: Programming Languages

39

4. Combining the listeners

 use a single listener to responds to either

button click

 need to determine which button has been

clicked



the event is passed in as an

ActionEvent ae



use

ae.getActionCommand()

to get the text of the

button



decide which computation to do, and which textfield
to update

 fewer classes, but the code is more complex

and less cohesive

R. Pełka: Programming Languages

40

5. Make the GUI its own
listener

 make the GUI class implement

ActionListener

 provide its own

actionPerformed

method

 the

actionPerformed

method is simpler – it

has direct access to the variables of the GUI

 no need for separate

BtnLstnr

classes

R. Pełka: Programming Languages

41

6. Responsive Text Fields

 instead of having fields to enter and display

text, and buttons to initiate action, we could
have the text fields respond to the "Enter" key

 the ActionEvent ae is then the "Enter" key

 use

ae.getActionCommand()

to report which

text field, and then update the appropriate
field

 no need for buttons on the GUI, so should

change the initial size.

R. Pełka: Programming Languages

42

Discussion

 we have seen 7 different version of the

temperature conversion program (and the
first 6 give identical GUIs)

 these are different design decisions that

you the programmer must make



more classes means a slower start-up to the
program



(but anonymous classes are still classes!)



a single class has less coupling, but less
cohesion in its methods



which version is easiest to design, implement
and maintain?

R. Pełka: Programming Languages

43

Good news for GUI developers



Even simple GUI seems to be very complicated to
develop in Java



Fortunetely, we have a number of IDEs
(

Integrated Development Environments

) to do it

using a mouse and „drag and pop” method

 Eclipse
 NetBeans (

Oracle

)

R. Pełka: Programming Languages

44

NetBeans

R. Pełka: Programming Languages

45

Summary

 Graphical User Interface

 Idea and properties
 Containers
 Components
 events

 Tools for GUI design

 AWT – Application Windowing Toolkit
 Swing – new Java GUI classes
 SWT (Standard Widget Toolkit - Eclipse)

 Simple GUI design