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.