cs102 – gui awt & swing components & containers, layout managers, events & listeners...
TRANSCRIPT
![Page 1: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/1.jpg)
CS102 – GUI
AWT & Swing• Components & Containers, • Layout Managers, • Events & Listeners• MVC design pattern.
David Davenport
![Page 2: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/2.jpg)
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.
![Page 3: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/3.jpg)
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
![Page 4: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/4.jpg)
GUI USING AWT
![Page 5: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/5.jpg)
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
![Page 6: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/6.jpg)
Implementing GUIs Two steps
(1) Create the interface
• By add components & containers• & using layout managers
(2) Add interaction• Create event listeners• & “Wire-up” events
![Page 7: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/7.jpg)
(1) Create the interface…
![Page 8: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/8.jpg)
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
![Page 9: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/9.jpg)
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
![Page 10: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/10.jpg)
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
![Page 11: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/11.jpg)
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
![Page 12: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/12.jpg)
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
![Page 13: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/13.jpg)
(2) Add interaction…
![Page 14: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/14.jpg)
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
![Page 15: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/15.jpg)
Event handling…
{Thermostat}
set of AlarmListeners
{AlarmListener}
handleAlarm(-)
+addAlarmListener(-)
{AlarmInfo}
sourcereading
{AlarmListener}
handleAlarm(-)
{AlarmBell}
{AlarmListener}
handleAlarm(-)
{AirConditioner}
{Heater}{AlarmListener}
Recall…
![Page 16: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/16.jpg)
Event handling…
{Thermostat}
set of AlarmListeners
{AlarmListener}
handleAlarm(-)
+addAlarmListener(-) {Heater}
{AlarmInfo}
sourcereading
{Button}
set of ActionListeners
{ActionListener}
actionPerformed(-)
+addActionListener(-) {MyPanel}
{ActionEvent}
source…
![Page 17: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/17.jpg)
Event handling…
{Button}
set of ActionListeners
{ActionListener}
actionPerformed(-)
+addActionListener(-) {MyPanel}
{ActionEvent}
source…
{ActionListener}
actionPerformed(-)
{ActionEvent}
source…
{MyActionListener}
![Page 18: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/18.jpg)
Event handling…
{Button}
set of ActionListeners
{ActionListener}
actionPerformed(-)
+addActionListener(-) {MyPanel}
{ActionEvent}
source…
{ActionListener}
actionPerformed(-)
{MyActionListener}
{ActionEvent}
source…
{TextField}
set of ActionListeners
+addActionListener(-)
{ActionEvent}
source…
![Page 19: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/19.jpg)
Event handling…
{Frame}
set of WindowListeners
windowClosing(-)
+addWindowListener(-)
{MyWindowListener}
{WindowEvent}
source…
{WindowListener}
{WindowAdapter}
windowClosingwindowClosed
windowIconifiedwindowDeiconified
windowOpenedetc.
![Page 20: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/20.jpg)
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!
![Page 21: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/21.jpg)
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
![Page 22: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/22.jpg)
Event Classes
AWTEvent EventObject
AdjustmentEvent
ComponentEvent
TextEvent
ItemEvent
ActionEvent
InputEvent
WindowEvent
MouseEvent
KeyEvent
ContainerEvent
FocusEvent
PaintEvent
ListSelectionEvent
![Page 23: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/23.jpg)
GUI USING SWING
![Page 24: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/24.jpg)
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
![Page 25: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/25.jpg)
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)
![Page 26: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/26.jpg)
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
![Page 27: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/27.jpg)
.
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
![Page 28: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/28.jpg)
DESIGNING GUI’S…
![Page 29: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/29.jpg)
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...
![Page 30: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/30.jpg)
MVC - Design Pattern
View
model
controller
ViewViewMultipleViews
14:30
Half past two
hours: 14mins: 30secs: 25
1 sec.timer
Reset
![Page 31: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/31.jpg)
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
![Page 32: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/32.jpg)
THE FUTURE… JAVAFX?
![Page 33: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/33.jpg)
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
![Page 34: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/34.jpg)
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);
} }
![Page 35: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/35.jpg)
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);}
}
![Page 36: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/36.jpg)
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) );
} }
![Page 37: CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport](https://reader035.vdocuments.net/reader035/viewer/2022062408/56649f325503460f94c4d8de/html5/thumbnails/37.jpg)
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”);}
}