GUI Programming

Graham Hardman(gph@comp.leeds.ac.uk)

12th June 2002

Java GUI Programming 2

Overview• GUI Packages & Technologies

• GUI program layout

• Components

• Swing event-driven programming model

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

• GUI component layout

Java GUI Programming 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

Java GUI Programming 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

Java GUI Programming 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

Java GUI Programming 6

A (uselessly) Basic GUI Programimport java.awt.*;

import javax.swing.*;

public class Hello

{

public static void main(String args[])

{

JFrame frame = new JFrame(“Hello world”);

frame.setVisible(true);

}

}

Import the AWT and Swing classes

Make the frame visible

Make the program executable

Create a top-level frame

Java GUI Programming 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, let’s look at some widgets

Java GUI Programming 8

Some Basic Components

• JLabel Displaying text or icon• JTextField A text type-in box

• JComboBox A drop-down option list

• JPanel Groups other components

• JSlider Allow selection from range

• JButton A simple push-button

• JFrame Visible window on screen

Java GUI Programming 9

JFrame

• Very important in most Swing applications – without it you won’t 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

Java GUI Programming 10

JFrame (continued 1)• JFrame uses the concept of a content pane to keep

hold of and arrange (most) components :

Different layers for other component types (to accommodate overlap etc.)

Menu bar

Pane to handle mouse events etc.

Content pane

Java GUI Programming 11

Using Simple Components

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

setText(“fish”);

setSize(123,321);

setEnabled(true);

setForeground(Color.red);

setBackground(Color.blue);

setIcon(new ImageIcon(“fish.jpg”));

setLocation(15,50);

setVisible(false);

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

Java GUI Programming 12

JFrame (continued 2)

• frame.add(widget);

• frame.getContentPane().add(widget);

Wrong – program compiles, but error occurs at runtime

This is the correct method

• Frequently the code looks slightly different…

Container c = frame.getContentPane();c.add(widget1);c.add(widget2);

Java GUI Programming 13

JPanel

• 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.

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

Java GUI Programming 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.

Java GUI Programming 15

Layout Managers

• While we can work without using any of Java’s predefined layout managers…

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

• We’ll look at three provided with AWT – FlowLayout, BorderLayout and GridLayout

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

Java GUI Programming 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

Java GUI Programming 17

BorderLayout

NORTH

SOUTH

WEST EASTCENTER

Java GUI Programming 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

Java GUI Programming 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

Java GUI Programming 20

Taking stock

• So far we’ve 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 :-)

Java GUI Programming 21

Anatomy of a GUI Program

• Graphical components

• Listeners

• Application code

(Visible bits which generate actions)

(Listen for actions and respond in a useful way)

(Performs the donkey work)

Java GUI Programming 22

Analogy

• ‘User interface’?

• ‘Listener’?

• ‘Application code’?

Dial

Variable resistor

Volume changes

Java GUI Programming 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

Java GUI Programming 24

A Diagram

Handler processes Event occurs

Interaction with widget

Listener receivesEventObject generated

Automatic method call

Code executed

Wait for event

Initialise Quit

Java GUI Programming 25

Events• Common events are keystrokes, mouse clicks and

mouse cursor movement across components (also known as rollovers)

• Programmer doesn’t (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

Java GUI Programming 26

Some Events

• ActionEvent – when a JButton is clicked

• ItemEvent – when a list item is selected

• KeyEvent – a key stroke

• MouseEvent –mouse movement or click

• ChangeEvent – when a JSlider is moved

Java GUI Programming 27

Event examples

JButtonActionEvent generated

(left click)

Container

(right click)

MouseEvent generated

• Currently, these events fire off into space…

Java GUI Programming 28

Event Listeners• Events are useless to us if we don’t know they’ve

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 event’s getSource( ) method, which returns a reference to the widget.

Java GUI Programming 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

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

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

Java GUI Programming 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)

Java GUI Programming 31

Event handling in WidgetDemocomboBox = new JComboBox(names);

frame.add(comboBox);

comboBox.addItemListener (

new ItemListener()

{

public void itemStateChanged(ItemEvent ie)

{

changeLandF(selectedName);

}

}

);

changeLandF(arg)

{

UIManager.setLookAndFeel(arg);

}

Define and register listener

Define application method

Initialise component

Call application method when event occurs