Download The MVC and Observable patterns

The MVC and Observable patterns
Lecture 11: OOP, autumn 2003
Reading:
MVC: http://www.javaworld.com/javaworld/jw-04-1998/jw-04-howto_p.html
Observer:
Liskov, Chap. 15.7
http://www.javaworld.com/javaworld/jw-10-1996/jw-10-howto_p.html
Swing:
Thinking in Java, Chap. 13
http://java.about.com/library/swing/bl-Swing-Book.htm
The MVC pattern
„
„
„
„
„
„
MVC = model/view/controller pattern
Idea: separate appearance, behavior, state
Promotes reuse and flexibility
First introduced in Smalltalk-80
Typically used for the whole application GUI
In Java used for each GUI element (button, window,
etc.)
2
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 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
MVC Example: HTML editor
4
MVC interactions
5
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)
6
The observer pattern
„
Problem:
„
„
„
„
Solution:
„
„
„
One change affects one or many objects.
Many object behaviors depends on one object state.
Need broadcast communication
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
Observer structure
8
Observer in Java (1)
„
Event delegation model:
„
„
„
„
„
event source (e.g. button) is the Observable
event 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 changes
Observable.notifyObservers() calls
Observer.update()
9
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();
. . .
10
Observer in Java (3):
extend an observable
import 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;}
}
11
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());
}
}
}
12
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();
}
}
13
Observer sequence diagram
14
Java GUI with Swing
„
The Java Foundation Classes - collection of APIs for
developing GUIs
„
„
„
„
„
„
„
AWT - original Java toolkit for developing user interfaces
„
„
„
„
„
„
Abstract Window Toolkit (AWT)
Java 2D API
Swing Components
Accessibility API
Drag and Drop API
Java Look (appearance) and Feel (behavior)
Only provides a single pen size for graphical operations
Lacks many components you would expect
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
AWT ‘heavyweight’ components
„
„
„
„
„
Implemented on top of native peer
component classes
Written in native code for each OS
Hard to port and extend
Thus lowest-common-denominator approach
Limited number of simple GUI components
16
Lightweight components
„
Can be any shape and be transparent!
„
„
„
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’
„
„
must be rendered in a heavyweight component – frames, applets,
windows and dialogs
E.g. JTextArea, JButton
Swing has many advanced components such as internal frames,
tabbed panes, toolbars, color chooser, table, trees, dialog boxes…
17
18
19
Swing containment hierarchy
„
„
Implements the composites pattern
Top-level container:
„
„
„
Intermediate container:
„
„
„
place for other Swing components to paint themselves
e.g., JFrame, JDialog, Japplet
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
20
Models, views and controllers in Java
„
„
„
„
Swing listeners are MVC controllers
Swing components merge views and models
into one
The communication is via events
Event listeners register with event sources
(components)
„
Clean separation of interface and implementation
21
Listeners
„
„
„
„
We register our interest in a GUI event by calling the
JComponent’s addActionListener() method
The addActionListener method expects an object of
type ActionListener
An object of type ActionListener implements the
ActionListener interface which means it must provide
an implementation for the actionPerformed() method
This method will be called when e.g. a button is
pressed
(this type of behaviour is often called a “callback”)
22