background image

Programming Languages

Lecture 9

Graphical User Interface

R. Pełka – Wojskowa Akademia Techniczna

background image

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

background image

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

background image

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

background image

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)

background image

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

).

background image

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.

background image

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)

background image

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

background image

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

background image

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.

background image

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

background image

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

background image

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

background image

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!

background image

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

background image

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

background image

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

background image

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 

background image

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?

background image

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.

background image

R. Pełka:  Programming Languages

22

JFrame

JPanel (in the ContentPane
of the JFrame)

JButton

JTextField

JLabel

Components in the GUI

background image

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)

background image

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

background image

R. Pełka:  Programming Languages

25

Implementation in BlueJ

background image

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;

   ...

background image

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

));

   } ...

background image

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);

   }
   ...

background image

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 !

background image

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);
    }
}

background image

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);
   }
}

background image

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 !!

background image

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

background image

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

background image

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

background image

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

   }

}

 

background image

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());
      //...

background image

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);
            }
                                           }
                      );

background image

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

background image

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

background image

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.

background image

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?

background image

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

)

background image

R. Pełka:  Programming Languages

44

NetBeans

background image

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


Document Outline