The MVC pattern

„ MVC = model/view/controller pattern The MVC and Observable patterns „ Idea: separate appearance, behavior, state „ Promotes reuse and flexibility

Lecture 11: OOP, autumn 2003 „ First introduced in Smalltalk-80 Reading: „ Typically used for the whole application GUI MVC: http://www.javaworld.com/javaworld/jw-04-1998/jw-04-howto_p.html Observer: „ Liskov, Chap. 15.7 In Java used for each GUI element (button, window, http://www.javaworld.com/javaworld/jw-10-1996/jw-10-howto_p.html Swing: etc.) Thinking in Java, Chap. 13 http://java.about.com/library/swing/bl-Swing-Book.htm

2

The MVC pattern MVC Example: HTML editor

„ Organize user interface components using a triad of classes:

„ Model - the contents of a component (eg the state of a button, the text in a text field)

„ View - the visual appearance of the component

„ Controller - the behaviour of the component

„ MVC specifies how these classes interact

„ the model stores the contents and has no user interface

„ the view

„ may only display a portion of the content

„ there may be multiple possible views

„ the controller

„ handles interface events

„ decides whether to translate these into updates for the model or the view

3 4

MVC interactions Model-View Interaction

„ The model-view relationship indicates a design in which the model is decoupled from the view

„ But this relationship is more general:

„ a changed object can affect a set of other objects

„ without knowing their details

„ described by the Observer pattern (This is sometimes known as the publish–subscribe pattern)

5 6

1 The observer pattern Observer structure

„ Problem:

„ One change affects one or many objects.

„ Many object behaviors depends on one object state.

„ Need broadcast communication

„ Solution:

„ Decouple classes into observers and subjects

„ In Java: Observer and Observable

„ Communication modes

„ Pull mode - observers ask for information

„ Push mode - subjects send their state to the observers

7 8

Observer in Java (1) Observer in Java (2)

„ delegation model: „ Observer interface and Observable class in „ event source (e.g. button) is the Observable java.util: „ event listeners (e.g. Action object) is the Observer

„ Observable has a set of registered observers with public interface Observer { addObserver() public void update(Observable notifier, Object arg); „ The Observable (subject) notifies its observers when } its state changes public class Observable { public void addObserver(Observer obs); „ calls Observable.notifyObservers() public void notifyObservers(Object arg); Observer.update() protected void setChanged(); . . .

9 10

Observer in Java (3): Observer in Java (4): extend an observable implement an observer

import java.util.Observable; import java.util.Observer; public class ObservableValue extends Observable { import java.util.Observable; private int n = 0; public ObservableValue(int n) { public class TextObserver implements Observer { this.n = n; private ObservableValue ov = null; } public void setValue(int n) { public TextObserver(ObservableValue ov) { this.n = n; this.ov = ov; setChanged(); } notifyObservers(); } public void update(Observable obs, Object obj) { public int getValue() { return n;} if (obs == ov) { } System.out.println(ov.getValue()); } } } 11 12

2 Observer in Java (5): put them together Observer

public class Main { public Main() { ObservableValue ov = new ObservableValue(0); TextObserver to = new TextObserver(ov); ov.addObserver(to); }

public static void main(String [] args) { Main m = new Main(); } }

13 14

Java GUI with Swing AWT ‘heavyweight’ components

„ The Java Foundation Classes - collection of APIs for developing GUIs „ Implemented on top of native peer „ Abstract Window Toolkit (AWT) component classes „ Java 2D API „ Swing Components „ Written in native code for each OS „ Accessibility API „ Drag and Drop API „ Hard to port and extend „ Java Look (appearance) and Feel (behavior) „ AWT - original Java toolkit for developing user interfaces „ Thus lowest-common-denominator approach

„ Only provides a single pen size for graphical operations „ „ Lacks many components you would expect Limited number of simple GUI components

„ They don’t scale very well…. Heavy weight components „ 2D API provides other graphical rendering capabilities „ Swing - a set of lightweight components build on top of the AWT „ Swing components can change their look and feel 15 16

Lightweight components

„ Can be any shape and be transparent!

„ must be rendered in a heavyweight component – frames, applets, windows and dialogs

„ Swing has over 250 classes – mixture of components and classes and over 40 components

„ Swing components have class names that begin with the letter ‘J’

„ E.g. JTextArea, JButton

„ Swing has many advanced components such as internal frames, tabbed panes, toolbars, color chooser, table, trees, dialog boxes…

17 18

3 Swing containment hierarchy

„ Implements the composites pattern „ Top-level container:

„ place for other Swing components to paint themselves

„ e.g., JFrame, JDialog, Japplet „ Intermediate container:

„ simplify positioning of atomic components

„ e.g., JPanel, JSplitPane, JTabbedPane „ Atomic components:

„ self-sufficient components that present information to and get input from the user

„ e.g., JButton, JLabel, JComboBox, JTextField, JTable

19 20

Models, views and controllers in Java Listeners

„ Swing listeners are MVC controllers „ We register our interest in a GUI event by calling the JComponent’s addActionListener() method „ Swing components merge views and models into one „ The addActionListener method expects an object of type ActionListener „ The communication is via events „ An object of type ActionListener implements the „ Event listeners register with event sources ActionListener interface which means it must provide (components) an implementation for the actionPerformed() method „ This method will be called when e.g. a button is „ Clean separation of interface and implementation pressed (this type of behaviour is often called a “callback”)

21 22

4