GUI Programming

1
GUI Programming

• Graham Hardman
• (gph_at_comp.leeds.ac.uk)
• 12th June 2002

2
Overview

• GUI Packages Technologies

• Components

• GUI component layout

• GUI program layout

• Swing event-driven programming model

• Useful(?) Examples (all the way through)

3
Abstract Windowing Toolkit

• GUI package in original SDK

• Platform-dependent (heavyweight) components
  contains native components which rely on
  underlying window manager

• Provides components, and methods for laying them
  out within containers

4
Swing

• Became part of core API in JDK 1.2

• Platform-independent (lightweight) components, as
  Swing is written in Java

• Consistent look-and-feel across platforms

• Built on top of AWT

5
AWT vs Swing

• Swing designed to complement AWT rather than
  replace it (completely)

• Swing components offer more functionality

• Swing components still being developed /
  enhanced, AWT API (probably) complete

• Swing components offer built-in support for
  accessibility (eg braille readers), which is
  becoming more significant

6
A (uselessly) Basic GUI Program
import java.awt. import javax.swing. public
class Hello public static void main(String
args) JFrame frame new
JFrame(Hello world) frame.setVisible(true
)
7
GUI Components

• Swing provides a rich set of widgets

• (Almost) all inherit from one superclass

• so much of the API is consistent across widgets

• Without further ado, lets look at some widgets

8
Some Basic Components

• JButton A simple push-button

• JLabel Displaying text or icon

• JTextField A text type-in box

• JComboBox A drop-down option list

• JSlider Allow selection from range

• JPanel Groups other components

• JFrame Visible window on screen

9
JFrame

• Very important in most Swing applications
  without it you wont see anything!

• Many Swing apps are subclasses of JFrame,
  therefore taking advantage of its methods

• A heavyweight Swing component relies on OS
  windowing system for appearance

10
JFrame (continued 1)

• JFrame uses the concept of a content pane to keep
  hold of and arrange (most) components

Menu bar
Content pane
Different layers for other component types (to
accommodate overlap etc.)
Pane to handle mouse events etc.
11
Using Simple Components

• Often the GUI appearance can be achieved by
  calling the same few methods on each widget

setText(fish)
setEnabled(true)
setSize(123,321)
setIcon(new ImageIcon(fish.jpg))
setBackground(Color.blue)
setLocation(15,50)
setForeground(Color.red)
setVisible(false)

• and of course frame.add(widget). Correct?

12
JFrame (continued 2)

• frame.add(widget)

Wrong program compiles, but error occurs at
runtime

• frame.getContentPane().add(widget)

This is the correct method

• Frequently the code looks slightly different

13
JPanel

• Designed specifically as a container for
  displaying other components together in logical
  groups.

• Invisible by default, but its appearance can be
  tailored in the same way as any other component.

• Can be treated in pretty much the same way as the
  main content pane for example, the setLayout( )
  and add( ) methods are identical.

14
JPanel (continued)

• Much of the power and usefulness of the JPanel
  lies in its ability to contain other JPanels

• which, when combined with carefully-chosen
  layout managers, provides almost infinite
  flexibility in terms of GUI appearance

• JPanel also recognises low-level events such as
  mouse motion and clicking, so it can be used as a
  canvas to support mouse-intensive tasks such as
  drawing shapes by following the mouse pointer.

15
Layout Managers

• While we can work without using any of Javas
  predefined layout managers

• they do make it easier to add extra widgets,
  resize windows etc. without too much disruption
  to code or interface.

• Well look at three provided with AWT
  FlowLayout, BorderLayout and GridLayout

• (There are others, but sophisticated enough GUIs
  can be made without them, so well ignore them).

16
BorderLayout

• Default layout for JFrame and JApplet

• Display is divided into 5 regions

• Each region holds one visible component (only the
  last component is seen if more than one is added
  to a single region)

• Each component expands to fill the entire region
  by default

17
BorderLayout
NORTH
WEST
EAST
CENTER
SOUTH
18
FlowLayout

• Default layout for JPanel

• Components arranged from left to right, top to
  bottom, as they are added

• Components can be centered, or aligned to the
  left or the right of the container

19
GridLayout

• Container is logically divided into a grid

• Components can be laid out in the order they are
  added (default), or any arbitrary order by using
  an overloaded add( ) method

• All grid cells are of equal size, and each
  component expands to fill its cell

20
Taking stock

• So far weve looked at how we can make GUIs look
  the way we want them to

• but we also need to look at how we can make
  them work the way we want.

• End of lecture 1. More later -)

21
Anatomy of a GUI Program

• Graphical components

(Visible bits which generate actions)

• Listeners

(Listen for actions and respond in a useful way)

• Application code

(Performs the donkey work)
22
Analogy

• User interface?

Dial

• Listener?

Variable resistor

• Application code?

Volume changes
23
Event-driven Programming

• Order of execution is governed by user

• Program responds to events generated by user
  interaction with GUI components

• Swing achieves this by using events, event
  listeners and event handlers

24
A Diagram
Handler processes
Event occurs
Listener receives
25
Events

• Common events are keystrokes, mouse clicks and
  mouse cursor movement across components (also
  known as rollovers)

• Programmer doesnt (usually) need to create them
  by hand

• Swing generates events automatically for all
  common interactions with GUI components

• we just need to know what kind of event is
  generated for each action, and how to listen for
  it

26
Some Events

• ActionEvent when a JButton is clicked

• ChangeEvent when a JSlider is moved

• ItemEvent when a list item is selected

• KeyEvent a key stroke

• MouseEvent mouse movement or click

27
Event examples

• Currently, these events fire off into space

28
Event Listeners

• Events are useless to us if we dont know theyve
  occurred (seems obvious, but is a common gotcha)

• For each component we expect to generate an
  event, we register an event listener to deal with
  it (one listener can handle one or more
  components).

• Listener can then execute useful methods
  depending on the type of event

• The listener can also tell which widget generated
  the event by calling the events getSource( )
  method, which returns a reference to the widget.

29
Event Listeners (continued)

• Each listener must implement certain method(s),
  which are automatically called when the relevant
  event is generated

• Example ActionListeners must implement the
  actionPerformed( ) method, which is called
  whenever the listener detects an ActionEvent

• See the examples on the web page for more
  in-depth information

• We are now at the stage where we can create GUIs
  that do more than just look nice. Almost

30
Event Handlers

• Event handlers are just pieces of code that do
  useful things (no different to standard code in
  appearance)

• the difference is they are only executed when
  specific events occur (ie the user determines the
  execution path)

• Event handler code must be called by a listener,
  or included within a listener method, or once
  again, events are useless to us (another common
  gotcha)

31
Event handling in WidgetDemo
comboBox new JComboBox(names) frame.add(comboBo
x) comboBox.addItemListener ( new
ItemListener() public void
itemStateChanged(ItemEvent ie)
changeLandF(selectedName)
) changeLandF(arg) UIManager.setLookAndFe
el(arg)