6 The MVC model Main concepts to be

6 The MVC model

Main concepts to be covered • Design patterns • The Observer design pattern • The Model View Controller architecture Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 2

Using design patterns • Inter-class relationships are important, and can be complex. • Some relationship recur in different applications. • Design patterns help clarify relationships, and promote reuse. Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 3

Pattern structure • A pattern name. • The problem addressed by it. • How it provides a solution: – Structures, participants, collaborations. • Its consequences. – Results, trade-offs. Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 4

Design pattern: Observer • Supports separation of internal model from a view of that model. • Observer defines a one-to-many relationship between objects – publisher - subscriber • The object-observed notifies all Observers of any state change. • Example Simulator. View in the foxes-andrabbits project. Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 5

Observers Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 6

Main classes of interest • class java. util. Observable – Subclasses inherit basic functionality for reporting state changes to observing objects. – Independent of the observer’s logic • interface java. util. Observer – Subclasses implement update funtionality. – Many objects can connect to the same observable object. Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 7

Class relationships Observable * Observer • No particular owner-owned relationship – Observers do not own the observed objects. – Observed objects are unaware of observers. – The relation is navigable in both directions • Observers know what they observe. • Observables must be able to update observers (weak dependency). Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 8

Typical configuration o 1 : Observer obj : Observable o 2 : Observer o 3 : Observer . . . Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 9

class Observable public class Observable { - Add observer o to the set of observers for this object public void add. Observer(Observer o) - Mark this object as changed public void set. Changed() - If this object has changed, then notify all of it’s observers public void notify. Observers() } Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 10

interface Observer public interface Observer { An observable object calls it’s inherited notify. Observers method to have all the object's observers notified of a state change. notify. Observers then calls update for each observer. Parameters: o - the observable object who initiated the call. arg - the argument that was passed to the notify. Observers method by the observable object. notify. Observers forwards this argument to update. void update(Observable o, Object arg); } Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 11

Observer registration obj : Observable o 1 : Observer o 2 : Observer o 3 : Observer add. Observer(o 1) add. Observer(o 2) add. Observer(o 3) Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 12

An update scenario obj : Observable o 1 : Observer o 2 : Observer o 3 : Observer some. State. Change() set. Changed() notify. Observers(x) update(obj, x) Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 13

Typical Observable class public class Obsrvbl extends Observable { private Some. Type x; } public void some. Mutator() {. . . x =. . . ; // x has changed, inform observers set. Changed(); notify. Observers(x. clone()); . . . } Pass some information to the observers. Maybe a copy of x, or something else. Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 14

Typical Observer class public class Obsrvr implements Observer {. . . public void update(Observable o, Object arg) { if ( o instanceof Obsrvbl && arg instanceof Some. Type) { Some. Type x = (Some. Type)arg; // take some appropriate action // based on the value of x } else. . . Several objects of different types may be observed } by the same observer. Moreover, each observed } object may, depending on the situation, pass arguments of different types to update. Hence a case analysis may be necessary. Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 15

Observer registration Observable obj = new Obsrvbl(); Observer o 1 = new Obsrvr(); Observer o 2 = new Obsrvr(); Observer o 3 = new Obsrvr(); obj. add. Observer(o 1); obj. add. Observer(o 2); obj. add. Observer(o 3); Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Observer registration Förel 6 16

Alternative observer registration public class Obsrvr implements Observer { public Obsrvr(Observable x) {. . . x. add. Observer(this); . . . } Observer registration public void update(Observable o, Object arg) {. . . } } Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 17

Alternative observer registration Observable obj = new Obsrvbl(); Observer o 1 = new Obsrvr(obj); Observer o 2 = new Obsrvr(obj); Observer o 3 = new Obsrvr(obj); Observer registration Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 18

The MVC architecture • • Reenskaug 1979 (Smalltalk-80) Model (content) View (appearance) Controller (user actions) Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 19

Model • Model classes take care of data storing and processing – business logic – domain logic – the “database” Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 20

View • View classes take care of visual aspects – – Visualization User interface “Model rendering” A model can have many views Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 21

Controller • Controller classes take care of the control flow between model and view – – User actions Event handling Control flow Communication Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 22

Model (2) • Model objects are – observable – unaware of controller and view part • The model is decoupled from the view Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 23

View (2) • View objects are – observers of model objects – weakly dependent on model and controller Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 24

Controller (2) • Controller objects – update the model with information obtained from the view – manage over all control flow, timing, etc • Example: control flow in a game Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 25

Variations • Variations of the MVC pattern are possible. • More or less coupling between model, view and controller: – View observes model directly. – or: Controller mediates all communication between model and view. Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 26

MVC architecture 4. update 1. e m pu 2. ge ti te ut co View np 3. ve nt Model Con troll er Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 27

MVC class diagram MVC Observable << interface >> +add. Observer(): void +set. Changed(): void +notify. Observers(): void Observer Controller Model +compute. Something(): void Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 +update(): void View << update >> +update(): void Förel 6 28

Consequences + Model is completely independent of view. – View is more or less dependent of model – the view must often have some domain knowledge. Eg. Syntax checking in forms. – Controllers are dependent of model (and sometimes of view). Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 29

Example: Number series calculator • A (very) simple calculator for exploring the prime number and Fibonacci number series. • Program design based on the MVC pattern. • Explore the mvc _Observer project! Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 30

The calculator GUI : JFrame : class User. Interface : JButton next : JText. Field 29 34 : JButton reset : JPanel : class Number. Pane Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 : class Number. Pane Förel 6 31

Control flow Model compute. Next() : Next. Button. Controller 2 button pushed/ action. Performed() View 1 next : Number generator 3 update(digits)/set. Text(digits) reset() 2 1 : Reset. Button. Controller Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 button pushed/ action. Performed() Förel 6 32

Class design Observable <<abstract>> Number. Generator + compute. Next() + reset() + get. Value() Prime. Generator + compute. Next() + reset() + get. Value() Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Fibonacci. Generator + compute. Next() + reset() + get. Value() Förel 6 33

Class design (cont. ) <<interface>> Observer + update() JFrame User. Interface Number. Pane 2 + update() Prime. Generator JPanel 2 JButton JText. Field Fibonacci. Generator Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 34

Class design (cont. ) update 2 s ate crea JButton cre JText. Field tes Number. Pane Action. Listener Next. Button. Controller Fibonacci. Generator Reset. Button. Controller Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 35

Java’s Property. Change. Support • Since Java forbids multiple inheritance, subclasses to Observable cannot inherit an additional class. • An alternative is to use: – class Property. Change. Support – interface Property. Change. Listener – defined in package java. beans • Explore the mvc_property. Change project! Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 36

class Property. Change. Support Methods void add. Property. Change. Listener(Property. Change. Listener li) – adds listener li void remove. Property. Change. Listener(Property. Change. Listener li) – removes listener li void fire. Property. Change(String property. Name, Object old. Value, Object new. Value) – signals to observers that something has happened, by creating an event of type Property. Change. Event. To take effect old. Value and new. Value must be different. • This class is used by the Model Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 37

interface Property. Change. Listener Methods void property. Change(Property. Change. Event evt) – This method is called when a Property. Change. Event occurs. • This class is used by the View Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 38

class Property. Change. Event Methods Object get. New. Value() – Returns the new value for the property, expressed as an Object. May be null if multiple properties have changed. Object get. Old Value() – Returns the old value for the property, expressed as an Object. May be null if multiple properties have changed. String get. Property. Name() – Returns the programmatic name of the property that was changed. May be null if multiple properties have changed. String to. String() – Returns a string representation of the object. Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 39

MVC class diagram Abstract. Model is not a subclass of Property. Change. Support but delegates to it. Hence Abstract. Model may inherit some other class, if needed. Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 40

Review • The degree of dependency between components is called coupling. • Aim for less coupling! • The observer design pattern decreases coupling. • The MVC architectural pattern decouples the business logic from GUI issues – thus easy to modify or replace GUI! Objektorienterade applikationer, DAT 055, DAI 2, 18/19, lp 3 Förel 6 41