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)
Event 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 sequence diagram
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