gui programming graham hardman ([email protected]) 12 th june 2002
Post on 20-Dec-2015
218 views
TRANSCRIPT
![Page 2: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/2.jpg)
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
![Page 3: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/3.jpg)
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
![Page 4: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/4.jpg)
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
![Page 5: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/5.jpg)
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
![Page 6: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/6.jpg)
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
![Page 7: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/7.jpg)
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
![Page 8: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/8.jpg)
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
![Page 9: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/9.jpg)
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
![Page 10: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/10.jpg)
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
![Page 11: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/11.jpg)
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?
![Page 12: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/12.jpg)
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);
![Page 13: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/13.jpg)
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.
![Page 14: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/14.jpg)
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.
![Page 15: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/15.jpg)
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).
![Page 16: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/16.jpg)
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
![Page 17: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/17.jpg)
Java GUI Programming 17
BorderLayout
NORTH
SOUTH
WEST EASTCENTER
![Page 18: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/18.jpg)
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
![Page 19: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/19.jpg)
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
![Page 20: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/20.jpg)
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 :-)
![Page 21: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/21.jpg)
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)
![Page 22: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/22.jpg)
Java GUI Programming 22
Analogy
• ‘User interface’?
• ‘Listener’?
• ‘Application code’?
Dial
Variable resistor
Volume changes
![Page 23: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/23.jpg)
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
![Page 24: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/24.jpg)
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
![Page 25: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/25.jpg)
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
![Page 26: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/26.jpg)
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
![Page 27: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/27.jpg)
Java GUI Programming 27
Event examples
JButtonActionEvent generated
(left click)
Container
(right click)
MouseEvent generated
• Currently, these events fire off into space…
![Page 28: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/28.jpg)
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.
![Page 29: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/29.jpg)
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
![Page 30: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/30.jpg)
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)
![Page 31: GUI Programming Graham Hardman (gph@comp.leeds.ac.uk) 12 th June 2002](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d405503460f94a1aa34/html5/thumbnails/31.jpg)
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