CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design...

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}


{ActionListener}

actionPerformed(-)


{ActionEvent}

source…

{ActionListener}

actionPerformed(-)

{ActionEvent}

source…

{MyActionListener}

Event handling…

{Button}


{ActionListener}

actionPerformed(-)


{ActionEvent}

source…

{ActionListener}

actionPerformed(-)

{MyActionListener}

{ActionEvent}

source…

{TextField}


+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.*;



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);}

}




Frame f;

f = new MyFrame();

new MyFrame();}

}

import java.awt.*;

public class MyFrame extends Frame{

public MyFrame(){


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) );

} }




Frame f;

f = new MyFrame();

new MyFrame();}

}

import java.awt.*;

public class MyFrame{

public MyFrame(){


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”);}

}

CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design...

Documents

Transcript of CS102 – GUI AWT & Swing Components & Containers, Layout Managers, Events & Listeners MVC design...