The MVC and Observable patterns

Lecture 11: OOP, autumn 2003Reading:MVC: http://www.javaworld.com/javaworld/jw-04-1998/jw-04-howto_p.htmlObserver:Liskov, Chap. 15.7http://www.javaworld.com/javaworld/jw-10-1996/jw-10-howto_p.html

Swing:Thinking in Java, Chap. 13http://java.about.com/library/swing/bl-Swing-Book.htm

2

The MVC pattern

MVC = model/view/controller patternIdea: separate appearance, behavior, statePromotes reuse and flexibility

First introduced in Smalltalk-80Typically used for the whole application GUIIn Java used for each GUI element (button, window, etc.)

3

The MVC pattern

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 componentController - the behaviour of the component

MVC specifies how these classes interactthe model stores the contents and has no user interfacethe view

may only display a portion of the content there may be multiple possible views

the controllerhandles interface eventsdecides whether to translate these into updates for the model or the view

4

MVC Example: HTML editor

5

MVC interactions

6

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–subscribepattern)

7

The observer pattern

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 subjectsIn Java: Observer and Observable

Communication modesPull mode - observers ask for informationPush mode - subjects send their state to the observers

8

Observer structure

9

Observer in Java (1)

Event delegation model:event source (e.g. button) is the Observableevent listeners (e.g. Action object) is the Observer

Observable has a set of registered observers with addObserver()

The Observable (subject) notifies its observers when its state changesObservable.notifyObservers() calls Observer.update()

10

Observer in Java (2)

Observer interface and Observable class in java.util:

public interface Observer {public void update(Observable notifier, Object arg);

}public class Observable {public void addObserver(Observer obs);

public void notifyObservers(Object arg);protected void setChanged();

. . .

11

Observer in Java (3):extend an observableimport java.util.Observable;

public class ObservableValue extends Observable {private int n = 0;public ObservableValue(int n) {

this.n = n;}public void setValue(int n) {

this.n = n;setChanged();notifyObservers();

}public int getValue() { return n;}

}

12

Observer in Java (4):implement an observer

import java.util.Observer;import java.util.Observable;

public class TextObserver implements Observer {private ObservableValue ov = null;

public TextObserver(ObservableValue ov) {this.ov = ov;

}

public void update(Observable obs, Object obj) {if (obs == ov) {

System.out.println(ov.getValue());}

}}

13

Observer in Java (5):put them together

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

}

14

Observer sequence diagram

15

Java GUI with SwingThe Java Foundation Classes - collection of APIs for developing GUIs

Abstract Window Toolkit (AWT)Java 2D APISwing ComponentsAccessibility APIDrag and Drop APIJava Look (appearance) and Feel (behavior)

AWT - original Java toolkit for developing user interfacesOnly provides a single pen size for graphical operationsLacks many components you would expectThey don’t scale very well…. Heavy weight components

2D API provides other graphical rendering capabilitiesSwing - a set of lightweight components build on top of the AWTSwing components can change their look and feel

16

AWT ‘heavyweight’ components

Implemented on top of native peercomponent classesWritten in native code for each OSHard to port and extendThus lowest-common-denominator approachLimited number of simple GUI components

17

Lightweight componentsCan 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 classesand 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…

18

19

20

Swing containment hierarchy

Implements the composites patternTop-level container:

place for other Swing components to paint themselvese.g., JFrame, JDialog, Japplet

Intermediate container:simplify positioning of atomic componentse.g., JPanel, JSplitPane, JTabbedPane

Atomic components:self-sufficient components that present information to and get input from the usere.g., JButton, JLabel, JComboBox, JTextField, JTable

21

Models, views and controllers in Java

Swing listeners are MVC controllersSwing components merge views and models into oneThe communication is via eventsEvent listeners register with event sources (components)

Clean separation of interface and implementation

22

Listeners

We register our interest in a GUI event by calling theJComponent’s addActionListener() methodThe addActionListener method expects an object of type ActionListenerAn object of type ActionListener implements the ActionListener interface which means it must provide an implementation for the actionPerformed() methodThis method will be called when e.g. a button is pressed(this type of behaviour is often called a “callback”)