Upload
suzan-mcdaniel
View
225
Download
1
Tags:
Embed Size (px)
Citation preview
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 self-explanatory! 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
method 1method 2method 3 -------- --------method n
method 1method 2method 3 -------- --------method n
Do method 1
then method 3
Do method 2
then method 1
thenmethod 3
Do method 2
everysecond
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…
y
x
0,0
OK
2
1
50,350
1250,950
Moral… use automated Layout!
Moral… use automated Layout!
OK
2
1
LayoutManager demo…See also LayoutManager Visual Guide
AWT Applications - Frame Frame is a container for components
Frame with normal window
controlsOptional Menu
Three containers in Frame with
Border Layout
UI-components inside
containers each with own layout
AWTEvent
Font
FontMetrics
Component
Graphics
Object Color
Canvas
Button
TextComponent
Label
List
CheckBoxGroup
CheckBox
Choice
Container Panel Applet
Frame
Dialog FileDialog
Window
TextField
TextArea
MenuComponent MenuItem
MenuBar
Menu
Scrollbar
LayoutManager
AWT classes
Understanding the GUI UI-containers
have list of UI-components
Each UI-component is a class with paint method & lists of
Event listeners
{Frame}
{label}
{textfield}
{button}
components
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 Possibly override paint method
UI-components added to components list Painting Frame
1.paints Frame borders2.calls Frame paint method3.calls paint method of each object in component list
Hint: Employ layout managers
to arrange components in
containers
(2) Add interaction…
Events & Event Handling
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, …)
Eventlistenerobject
(executesmethod)
EventObjectEvent
cause(mouse,
keyboard, timer, …)
EventSourceobject
Event handling…
{Thermostat}
set of AlarmListeners
{AlarmListener}
handleAlarm(-)
+addAlarmListener(-)
{AlarmInfo}
sourcereading
{AlarmListener}
handleAlarm(-)
{AlarmBell}
{AlarmListener}
handleAlarm(-)
{AirConditioner}
{Heater}{AlarmListener}
Recall…
Event handling…
{Thermostat}
set of AlarmListeners
{AlarmListener}
handleAlarm(-)
+addAlarmListener(-) {Heater}
{AlarmInfo}
sourcereading
{Button}
set of ActionListeners
{ActionListener}
actionPerformed(-)
+addActionListener(-) {MyPanel}
{ActionEvent}
source…
Event handling…
{Button}
set of ActionListeners
{ActionListener}
actionPerformed(-)
+addActionListener(-) {MyPanel}
{ActionEvent}
source…
{ActionListener}
actionPerformed(-)
{ActionEvent}
source…
{MyActionListener}
Event handling…
{Button}
set of ActionListeners
{ActionListener}
actionPerformed(-)
+addActionListener(-) {MyPanel}
{ActionEvent}
source…
{ActionListener}
actionPerformed(-)
{MyActionListener}
{ActionEvent}
source…
{TextField}
set of ActionListeners
+addActionListener(-)
{ActionEvent}
source…
Event handling…
{Frame}
set of WindowListeners
windowClosing(-)
+addWindowListener(-)
{MyWindowListener}
{WindowEvent}
source…
{WindowListener}
{WindowAdapter}
windowClosingwindowClosed
windowIconifiedwindowDeiconified
windowOpenedetc.
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
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
{Frame}
{label}
{textfield}
{button}
components
ActionListeners
ActionListenersactionPerformed
{MyListener}
actionPerformed
WindowListeners
windowClosing
Event Classes
AWTEvent EventObject
AdjustmentEvent
ComponentEvent
TextEvent
ItemEvent
ActionEvent
InputEvent
WindowEvent
MouseEvent
KeyEvent
ContainerEvent
FocusEvent
PaintEvent
ListSelectionEvent
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(well sort of…!)
Add components to JFrame’s contentPane(v1.5+ no longer explicitly needed)
Override paintComponent, not paint(except for Jframe, JApplet & JDialog)(also, must call super.paintComponent)
AWT & Swing classes
AWTEvent
Fon t
FontMetrics
Component
Graphics
Object Color
Container
Panel Applet
Frame
Dialog
Window
JComponent
JApplet
JFrame
JDialog
Swing Components in the javax.swing package
Classes in thejava.awt package
1
LayoutManager
*
Lightweight
Heavyweight
.
JButton
JMenuItem
JCheckBoxMenuItem
AbstractButton
JComponent
JMenu
.JRadioButtonMenuItem
.JToggleButton JCheckBox
JRadioButton
.JComboBox
.JInternalFrame .JLayeredPane
.JList .JMenuBar .JOptionPane
.JPopupMenu
.JProgressBar
.JPane
.JFileChooser .JScrollBar .JScrollPane
.JSeparator
.JSplitPane
.JSlider .JTabbedPane
.JTable
.JTableHeader
.JTextField .JTextComponent
.JEditorPane
.JTextArea
.JToolBar
.JToolTip
.JTree
.JRootPane
.JPanel
.JPasswordField
.JColorChooser
.JLabel
Swing - JComponents
See this Visual Guide to Swing Components
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
model
controller
ViewViewMultipleViews
14:30
Half past two
hours: 14mins: 30secs: 25
1 sec.timer
Reset
Design Tips Think & design first
Use layout managers
Use OOP• 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
• begin with Panel rather than Frame/Applet• then add instance(s) to whichever you want
THE FUTURE… JAVAFX?
The Java Frame class By default:
Invisible Zero size Empty Has BorderLayout Plain background Doesn’t close!
setVisible( true);
setSize( width, height); or pack();
add( new Button() );
setLayout( new FlowLayout() );
setBackground( Color.GREEN);
& override paint(Graphics)…oops
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;
f = new MyFrame();
new MyFrame();}
}
import java.awt.*;
public class MyFrame extends Frame{
public MyFrame(){
setLayout( new FlowLayout() );setSize( 300, 250);
add( new Button( “OK”) );
setVisible( true);}
}
Frames in Java (3)import java.awt.*;
public class GUIPlay{
public static void main( String[] args){
Frame f;
f = new MyFrame();
new MyFrame();}
}
import java.awt.*;
public class MyFrame extends Frame{
public MyFrame(){
setLayout( new FlowLayout() );setSize( 300, 250);
add( new MyPanel() );add( new MyPanel() );
setVisible( true);}
}
import java.awt.*;
public class MyPanel extends Panel{
public MyPanel(){
Button b;
setBackground( Color.GREEN );setPreferredSize(
new Dimension( 200, 150) );
b = new Button( “OK”);add( b);
add( new Label( “Welcome”) );add( new TextField(20) );
} }
Frames in Java (4)import java.awt.*;
public class GUIPlay{
public static void main( String[] args){
Frame f;
f = new MyFrame();
new MyFrame();}
}
import java.awt.*;
public class MyFrame{
public MyFrame(){
setLayout( new FlowLayout() );setSize( 300, 250);
add( new MyPanel() );add( new MyPanel() );
setVisible( true);}
}
import java.awt.*;
public class MyPanel extends Panel{
public MyPanel(){
Button b;
setBackground( Color.GREEN );setPreferredSize(
new Dimension( 200, 150) );
b = new Button( “OK”);b.addActionListener(
new MyActionListener() );add( b);
add( new Label( “Welcome”) );add( new TextField(20) );
}}
import java.awt.event.*;
public class MyActionListener implements ActionListener
{public void actionPerformed(
ActionEvent e){
System.out.println( “Button pressed”);}
}