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 saying where and when it is/was used. I would also appreciate any suggestions you may have for improving it. thank you, David. David

Programming forms F Conventional/Procedural programming F code is always executed in same sequence. characterised by input/process/output F Event-driven programming F code is executed upon activation of events. sequence changes depending on order of events method 1 method 2 method method n method 1 method 2 method method n Do method 1 then method 3 Do method 2 then method 1 then method 3 Do method 2 every second

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 , ,950 Moral… use automated Layout! OK 2 1 LayoutManager demo… See also LayoutManager Visual Guide LayoutManager Visual Guide

AWT Applications - Frame Frame is a container for components Frame with normal window controls Optional Menu Three containers in Frame with Border Layout UI-components inside containers each with own layout

AWTEvent Font FontMetrics Component Graphics ObjectColor Canvas Button TextComponent Label List CheckBoxGroup CheckBox Choice ContainerPanelApplet Frame DialogFileDialog 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 borders 2. calls Frame paint method 3. 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, …) Event listener object (executes method) Event Object Event cause (mouse, keyboard, timer, …) Event Source object

Event handling… {Thermostat} set of AlarmListeners {AlarmListener} handleAlarm(-) +addAlarmListener(-) {AlarmInfo} source reading {AlarmListener} handleAlarm(-) {AlarmBell} {AlarmListener} handleAlarm(-) {AirConditioner} {Heater} {AlarmListener} Recall…

Event handling… {Thermostat} set of AlarmListeners {AlarmListener} handleAlarm(-) +addAlarmListener(-) {Heater} {AlarmInfo} source reading {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} windowClosing windowClosed windowIconified windowDeiconified windowOpened etc.

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 actionPerformed {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 Font FontMetrics Component Graphics Object Color Container Panel Applet Frame Dialog Window JComponent JApplet JFrame JDialog Swing Components in the javax.swing package Classes in the java.awt package 1 LayoutManager * Lightweight Heavyweight

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 View Multiple Views 14:30 Half past two hours: 14 mins: 30 secs: 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?

OK Junk… OK 2 1

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