1. GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002

2. Java GUI Programming2 Overview GUI Packages & Technologies GUI program layout Components Swing event-driven programming model Useful(?) Examples (all the way through) GUI component layout

3. Java GUI Programming3 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. Java GUI Programming4 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. Java GUI Programming5 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. Java GUI Programming6 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); } Import the AWT and Swing classes Make the frame visible Make the program executable Create a top-level frame

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

8. Java GUI Programming8 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

9. Java GUI Programming9 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

10. Java GUI Programming10 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

11. Java GUI Programming11 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?

12. Java GUI Programming12 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);

13. Java GUI Programming13 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.

14. Java GUI Programming14 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. Java GUI Programming15 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).

16. Java GUI Programming16 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. Java GUI Programming17 BorderLayout NORTH SOUTH WESTEASTCENTER

18. Java GUI Programming18 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. Java GUI Programming19 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. Java GUI Programming20 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 :-)

21. Java GUI Programming21 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)

22. Java GUI Programming22 Analogy ‘User interface’? ‘Listener’? ‘Application code’? Dial Variable resistor Volume changes

23. Java GUI Programming23 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. Java GUI Programming24 A Diagram Handler processesEvent occurs Interaction with widget Listener receives EventObject generated Automatic method call Code executed Wait for event Initialise Quit

25. Java GUI Programming25 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

26. Java GUI Programming26 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

27. Java GUI Programming27 Event examples JButton ActionEvent generated (left click) Container (right click) MouseEvent generated Currently, these events fire off into space…

28. Java GUI Programming28 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.

29. Java GUI Programming29 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

30. Java GUI Programming30 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. Java GUI Programming31 Event handling in WidgetDemo comboBox = 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