GUI Programming

GUI Programming

Graham Hardman([email protected])

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


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


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


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


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


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


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


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


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


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?


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


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.


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.


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


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


BorderLayout

NORTH

SOUTH

WEST EASTCENTER


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


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


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


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)


Analogy

• ‘User interface’?

• ‘Listener’?

• ‘Application code’?

Dial

Variable resistor

Volume changes


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


A Diagram

Handler processes Event occurs

Interaction with widget

Listener receivesEventObject generated

Automatic method call

Code executed

Wait for event

Initialise Quit


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


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


Event examples

JButtonActionEvent generated

(left click)

Container

(right click)

MouseEvent generated

• Currently, these events fire off into space…


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.


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


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)


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

Documents

GUI Programming