Transcript CS102_GUI slides

CS102 – GUI
AWT & Swing
•
•
•
•
Components & Containers,
Layout Managers,
Events & Listeners
MVC design pattern.
David Davenport
IMPORTANT…

Students…
This presentation is designed to be used in class as
part of a guided discovery sequence. It is not selfexplanatory! Please use it only for revision purposes
after having taken the class. Simply flicking through
the slides will teach you nothing. You must be actively
thinking, doing and questioning to learn!

Instructors…
You are free to use this presentation in your classes
and to make any modifications to it that you wish. All
I ask is an email saying where and when it is/was
used. I would also appreciate any suggestions you
may have for improving it.
thank you,
David.
Programming forms

Conventional/Procedural programming


code is always executed in same sequence.
characterised by input/process/output
Event-driven programming

code is executed upon activation of events.
sequence changes depending on order of events
Do
method 1
then
method 3
method 1
method 2
method 3
--------------method n
Do
method 2
then
method 1
then
method 3
Do
method 2
every
second
method 1
method 2
method 3
--------------method n
GUI USING AWT
GUI using AWT
AWT - Abstract Window Toolkit
 Must base


desktop programs on Frame
• constructor, paint, …

browser programs on Applet
• init, start, paint, stop, destroy, …

Can convert, but
better to base code on Panel
 then it add to Frame or Applet

Implementing GUIs

Two steps
(1) Create the interface
• By add components & containers
• & using layout managers
(2) Add interaction
• Create event listeners
• & “Wire-up” events
(1) Create the interface…
UI Component Layout…
x
0,0
50,350
y
1
2
1
OK
2
OK
See also
LayoutManager Visual Guide
Moral…
use automated
Layout!
1250,950
LayoutManager demo…
AWT Applications - Frame

Frame is a container for components
Optional Menu
Three
containers in
Frame with
Border Layout
UI-components
inside
containers each
with own layout
Frame with
normal window
controls
AWT classes
AWTEvent
Font
FontMetrics
Object
Color
Container
Panel
Applet
Button
Window
Frame
Label
Dialog
TextField
TextComponent
TextArea
Graphics
Component
List
Choice
CheckBox
LayoutManager
CheckBoxGroup
Canvas
MenuComponent
Scrollbar
MenuItem
MenuBar
Menu
FileDialog
Understanding the GUI

UI-containers


{label}
Each UI-component

{Frame}

components
{textfield}
{button}
have list of
UI-components

is a class
with paint method
& lists of
Event listeners
Setting up the GUI

Extend Frame class

In constructor
• Create instances of containers
& add them to Frame
• Create instances of components
& add them to containers or Frame

Hint: Employ
layout managers
to arrange
components in
containers
Possibly override paint method
 UI-components
 Painting
added to components list
Frame
1.paints Frame borders
2.calls Frame paint method
3.calls paint method of each object in component list
(2) Add interaction…
Events & Event Handling
Event
cause
(mouse,
keyboard,
timer, …)

Event
Source
object
Event
Object
Event
listener
object
(executes
method)
Example…




User clicks on a button
Button is source of event object
Event object passed to associated listener object
Listener object executes associated method
to perform desired task (save file, quit program, …)
Event handling…
Recall…
{AlarmInfo}
{Thermostat}
reading
source
{AlarmListener}
handleAlarm(-)
set of
AlarmListeners
{Heater}
+addAlarmListener(-)
handleAlarm(-)
handleAlarm(-)
{AlarmBell}
{AlarmListener}
{AirConditioner}
{AlarmListener}
{AlarmListener}
Event handling…
{AlarmInfo}
{Thermostat}
reading
source
{AlarmListener}
handleAlarm(-)
set of
AlarmListeners
+addAlarmListener(-)
{Button}
{Heater}
{ActionEvent}
…
source
{ActionListener}
actionPerformed(-)
set of
ActionListeners
+addActionListener(-)
{MyPanel}
Event handling…
{ActionEvent}
{Button}
…
source
{ActionListener}
actionPerformed(-)
set of
ActionListeners
+addActionListener(-)
{ActionEvent}
…
source
{MyPanel}
{ActionListener}
actionPerformed(-)
{MyActionListener}
Event handling…
{ActionEvent}
{Button}
…
source
{ActionListener}
actionPerformed(-)
set of
ActionListeners
+addActionListener(-)
{ActionEvent}
…
source
{ActionListener}
{TextField}
{ActionEvent}
set of
ActionListeners
+addActionListener(-)
{MyPanel}
actionPerformed(-)
…
source
{MyActionListener}
Event handling…
{WindowEvent}
{Frame}
…
source
{MyWindowListener}
windowClosing(-)
set of
WindowListeners
+addWindowListener(-)
windowClosing
windowClosed
windowIconified
windowDeiconified
windowOpened
etc.
{WindowAdapter}
{WindowListener}
Setting up Event Handling

Create listener class




Using new or existing class, simply
Implement desired event listener interface
Putting code for desired action in its methods
In application


(e.g. Frame)
Create instance of listener class
Add as listener of source object
• can have any number of listeners for each event
• Source & listener can be same object!
Understanding Events

When button is pressed

{label}

{Frame}
components
WindowListeners
{textfield}
windowClosing
actionPerformed

ActionListeners
actionPerformed method
of every item in button’s
actionListeners list called
Similarly for textfield
When Frame close button
is pressed

windowClosing method of
every item in Frame’s
windowListeners list called
{MyListener}
{button}
ActionListeners
actionPerformed
Event Classes
EventObject
AWTEvent
ListSelectionEvent
ActionEvent
ContainerEvent
AdjustmentEvent
FocusEvent
ComponentEvent
InputEvent
ItemEvent
PaintEvent
TextEvent
WindowEvent
MouseEvent
KeyEvent
GUI USING SWING
GUI using Swing

Advantages



OS independent
Prettier!
More sophisticated components & options
•
•
•
•


Pluggable “Look & feel”
Borders, Tooltips, etc.
Drag ‘n Drop
File & ColorChoosers, Tables, editors, etc.
Conceptually same as AWT
Still uses AWT events package
GUI using Swing

Few differences (from AWT)

Use javax.swing package
(equivalent Swing components start with “J”)

Frames can close automatically

Add components to JFrame’s contentPane

Override paintComponent, not paint
(well sort of…!)
(v1.5+ no longer explicitly needed)
(except for Jframe, JApplet & JDialog)
(also, must call super.paintComponent)
AWT & Swing classes
AWTEvent
Font
Classes in the
java.awt package
LayoutManager
Heavyweight
1
FontMetrics
Object
Color
Panel
Applet
JApplet
Window
Frame
JFrame
Dialog
JDialog
Graphics
Component
Container
*
JComponent
Swing Components in the
javax.swing package
Lightweight
Swing - JComponents
.
JCheckBoxMenuItem
AbstractButton
JMenuItem
JMenu
JButton
.JRadioButtonMenuItem
.JToggleButton
JCheckBox
See this Visual Guide
to Swing Components
JRadioButton
.JEditorPane
JComponent
.JTextComponent
.JTextField
.JPasswordField
.JTextArea
.JLabel
.JList
.JComboBox
.JMenuBar
.JPanel
.JOptionPane
.JScrollBar
.JScrollPane
.JPopupMenu
.JSeparator
.JSlider
.JTabbedPane
.JRootPane
.JPane
.JProgressBar
.JToolBar
.JSplitPane
.JTable
.JTree
.JColorChooser
.JInternalFrame
.JToolTip
.JLayeredPane
.JTableHeader
.JFileChooser
DESIGNING GUI’S…
Design Tips

GUI code can get very messy

Do not put everything in one class
(as many Visual IDE’s do)
Quick & dirty = impossible to change!
 Employ design patterns, e.g. MVC


Think Design first...
MVC - Design Pattern
View
View
Multiple
Views
View
14:30
Half past two
model
controller
hours: 14
mins: 30
secs: 25
1 sec.
timer
Reset
Design Tips

Think & design first


Use layout managers
Use OOP
• begin with Panel rather than Frame/Applet
• then add instance(s) to whichever you want
• What do you want?
• What existing class is closest?
• Extend it!
• digital clock view
- centered text in plain box, extend label
• analogue clock view
- graphics in plain box, extend panel
THE FUTURE…
JAVAFX?
The Java Frame class

By default:
setVisible( true);
Invisible
setSize( width, height); or pack();
 Zero size
add( new Button() );
 Empty
setLayout(
 Has BorderLayout
new FlowLayout() );
 Plain background
setBackground(
 Doesn’t close!
Color.GREEN);

…oops
& override paint(Graphics)
Frames in Java (1)
import java.awt.*;
public class GUIPlay
{
public static void main( String[] args)
{
Frame f;
f = new Frame();
f.setLayout( new FlowLayout() );
f.setSize( 300, 250);
f.add( new Button( “OK”) );
// pack();
f.setVisible( true);
}
}
Frames in Java (2)
import java.awt.*;
public class GUIPlay
{
public static void main( String[] args)
{
Frame f;
import java.awt.*;
f = new MyFrame();
public class MyFrame extends Frame
{
new MyFrame();
public MyFrame()
}
{
}
setLayout( new FlowLayout() );
setSize( 300, 250);
add( new Button( “OK”) );
setVisible( true);
}
}
Frames in Java (3)
import java.awt.*;
import java.awt.*;
public class GUIPlay
{
public class MyPanel extends Panel
public static void main( String[]
args)
{
{
public MyPanel()
import
java.awt.*;
Frame f;
{
Button b;
public
class
MyFrame
extends
Frame
f = new MyFrame();
{
setBackground( Color.GREEN );
public
MyFrame()
new MyFrame();
setPreferredSize(
{
}
new Dimension( 200, 150) );
setLayout(
new
FlowLayout()
);
}
setSize( 300, 250);
b = new Button( “OK”);
add( b);
add( new MyPanel() );
add( new MyPanel() );
add( new Label( “Welcome”) );
add( new TextField(20) );
setVisible( true);
}
}
}
}
Frames in Java (4)
import java.awt.*;
import java.awt.*;
import java.awt.event.*;
public class GUIPlay
public class MyPanel extends Panel
{
public args)
class MyActionListener
{
public
static void main( String[]
import
java.awt.*;
implements ActionListener
public MyPanel()
{
{
{ f;
Frame
public
class MyFrame
public void actionPerformed(
Button b;
{
ActionEvent e)
f = newMyFrame()
MyFrame();
public
{
setBackground( Color.GREEN
);
{
System.out.println( “Button pressed”);
setPreferredSize(
newsetLayout(
MyFrame();
new FlowLayout() );
}
new Dimension( 200,
150) );
}
setSize( 300, 250);
}
}
b = new Button( “OK”);
add( new MyPanel() );
b.addActionListener(
add( new MyPanel() );
new MyActionListener() );
add( b);
setVisible( true);
}
add( new Label( “Welcome”) );
}
add( new TextField(20) );
}
}