model view controller prasun dewan comp 114. model view controller pattern issue –how to create...
Post on 19-Dec-2015
244 views
TRANSCRIPT
![Page 1: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/1.jpg)
Model View Controller
Prasun Dewan
Comp 114
![Page 2: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/2.jpg)
Model View Controller Pattern
• Issue– How to create user-interface objects like
object editor
• Model-View-Controller Pattern– Observer sub-pattern
![Page 3: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/3.jpg)
User Interface Objects• How to reuse code among different user
interfaces?
• How to simultaneously create multiple user interfaces to same object?– Different views for same user.
• Slide sorter vs. Outline
– How to create same or different view for each user sharing an object
• Distributed presentation
![Page 4: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/4.jpg)
Counter
• Can add arbitrary positive/negative value to an integer.
• Different user interfaces.
![Page 5: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/5.jpg)
Console Input and Output
![Page 6: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/6.jpg)
Console Input and JOption Output
![Page 7: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/7.jpg)
Console Input,Output and JOption Output
![Page 8: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/8.jpg)
Implementation Constraint
• Re-use as much code as possible in the three implementations
![Page 9: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/9.jpg)
Pattern-free Implementation
public class ConsoleUI { static int counter = 0; public static void main(String[] args) {
while (true) { int nextInput = readInt(); if (nextInput == 0) return; counter += nextInput; System.out.println("Counter: " + counter);}
}}
![Page 10: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/10.jpg)
Pattern-free Implementationpublic class ConsoleUI { static int counter = 0; public static void main(String[] args) {
while (true) { int nextInput = readInt(); if (nextInput == 0) return; counter += nextInput;
JOptionPane.showMessageDialog(null, "Counter: " + counterValue);
} }}
Counter code duplicated
![Page 11: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/11.jpg)
Model/Interactor Separation
AConsoleUI
AMixedUI
Counter AMultipleUI
Model
Model has no UI code and only semantics!
Interactor
Interactor
Interactor
![Page 12: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/12.jpg)
Composing Model and Interactor
public static main (String args[]) (new AConsoleUI()).edit (new ACounter());}
![Page 13: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/13.jpg)
Counter Modelpackage models;public class ACounter implements Counter {
int counter = 0;public void add (int amount) {
counter += amount;}public int getValue() {
return counter;}
}
• Code reusability• Less duplication• Fewer changes
![Page 14: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/14.jpg)
Console Interactor
package interactors;public class AConsoleUI implements ConsoleUI { public void edit (Counter counter) {
while (true) { int nextInput = readInt(); if (nextInput == 0) return; counter.add(nextInput); System.out.println("Counter: " + counter.getValue());}
}}
Shared model code
Input
Output
![Page 15: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/15.jpg)
Mixed Interactorpackage interactors;public class AConsoleUI implements ConsoleUI { public void edit (Counter counter) {
while (true) { int nextInput = readInt(); if (nextInput == 0) return; counter.add(nextInput); JOptionPane.showMessageDialog(null,
"Counter: " + counter.getValue());}
}}
Shared model code
Input
Output
![Page 16: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/16.jpg)
Multiple Interactorpackage interactors;public class AConsoleUI implements ConsoleUI { public void edit (Counter counter) {
while (true) { int nextInput = readInt(); if (nextInput == 0) return; counter.add(nextInput); System.out.println("Counter: " + counter.getValue()); JOptionPane.showMessageDialog(null,
"Counter: " + counter.getValue());}
}}
Shared model code
Input
Output
![Page 17: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/17.jpg)
Drawbacks of Monolithic UI
AConsoleUI
AMixedUI
AMultipleUI
ACounter
Duplicated input code
Duplicated output code
![Page 18: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/18.jpg)
Model/Interactor Pattern
Interactor
Model
Arbitrary UI unaware methods
Computation code
UI Code
![Page 19: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/19.jpg)
MVC Pattern
Controller View
Model
Per
form
s In
put
Per
form
s O
utpu
t
Write methods
Read methods
![Page 20: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/20.jpg)
Controller View
MVC Pattern in Counter
Modeladd() getValue()
Per
form
s In
put
Per
form
s O
utpu
t
![Page 21: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/21.jpg)
Multiple Views and Controllers
Model
Controller 1
Controller 2
Controller 3
Controller M
View 1
View 2
View 3
View N
![Page 22: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/22.jpg)
Syncing Controllers & View
Model
Controller 1
Controller 2
Controller 3
Controller M
View 1
View 2
View 3
View N
![Page 23: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/23.jpg)
Observer/Observable Pattern
Model
Changed object notifies views
ObservableObserver
Controller 1
Controller 2
Controller 3
Controller M
View 1
View 2
View 3
View N
![Page 24: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/24.jpg)
Observer/Observable Pattern
Observable 1
Observer 1
Observer 2
Observer 3
Observer NObservable 2
![Page 25: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/25.jpg)
Observer with multiple Observables
• A single battle simulation view observing– Multiple planes– Multiple tanks
![Page 26: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/26.jpg)
Notification Scheme
Observable 1
• Each observer is registered with observable.
• Each write method in observable calls a notification method in each observer.
•Notification method in observer reads model .
Observable 2
• Each student is registered with professor’s listserv.
• When web page is updated mail sent to students.
•Student reads web page.
Observer 1
Observer 2
Observer 3
Observer N
![Page 27: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/27.jpg)
General Notification Scheme•Observers may have multiple observerables with common notification method.
•Notification method parameter indicates which observable.
Observable 1
Observable 2
Observer 1
Observer 2
Observer 3
Observer N
![Page 28: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/28.jpg)
MVC Pattern
Controller View
Model
Per
form
s In
put
Per
form
s O
utpu
t
Write methods
Read methods
Notification method
![Page 29: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/29.jpg)
Implementation dependent issues
• How does controller know about model?– Model connection method invoked on it.– By model or some other program
• Main
• How is observable registered with observer.– It registers itself if it knows about observable.– Model registers it if it knows about observer.– Some other code registers it
• Main
![Page 30: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/30.jpg)
Model, View and Controller (MVC)
ControllerView
Model
Performs Input Performs Output
Write method
Read method
Notification method
Model connection
method
Observer registration
method
![Page 31: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/31.jpg)
Counter Observable and Observer?
package models;public interface ObservableCounter extends Counter {
}
package models;public interface CounterObserver {
}
![Page 32: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/32.jpg)
Counter Observable and Observer
package models;public interface ObservableCounter extends Counter {
public void addObserver(CounterObserver observer);public void removeObserver(CounterObserver observer);
}
package models;public interface CounterObserver {
public void update(ObservableCounter counter);}
Called whenever model is updated Updated model
Console View, JOption View
Common interface of all views
![Page 33: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/33.jpg)
Counter Model
package models;import java.util.Vector;public class AnObservableCounter extends ACounter implements ObservableCounter {
Vector observers = new Vector();public void addObserver(CounterObserver observer) {
observers.addElement(observer);observer.update(this);
}public void removeObserver(CounterObserver observer) {
observers.removeElement(observer);}void notifyObservers() { for (int observerNum = 0; observerNum < observers.size(); observerNum++)
((CounterObserver) observers.elementAt(observerNum)).update(this);}public void add (int amount) {
super.add(amount);notifyObservers();
}}
Each write method notifies all.
Give this observable initial
value
![Page 34: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/34.jpg)
Console View
package views;public class ACounterConsoleView implements CounterObserver {
public void update(ObservableCounter counter) {System.out.println("Counter: " + counter.getValue());
}}
![Page 35: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/35.jpg)
Console View
package views;import models.ObservableCounter;import models.CounterObserver;public class ACounterConsoleView implements CounterObserver {
public void update(ObservableCounter counter) {System.out.println("Counter: " + counterValue);
}}
![Page 36: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/36.jpg)
JOption View
package views;import models.ObservableCounter;import models.CounterObserver;import javax.swing.JOptionPane;public class ACounterJOptionView implements CounterObserver {
public void update(ObservableCounter counter) { JOptionPane.showMessageDialog(null, "Counter: " +
counterValue);}
}
![Page 37: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/37.jpg)
Console Controller Interface
package controllers;import models.Counter;public interface CounterController {
public void setModel (Counter theCounter);public void processInput();
}
![Page 38: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/38.jpg)
Console Controllerpackage controllers;import java.io.BufferedReader;import java.io.InputStreamReader;import models.Counter;import java.io.IOException;public class ACounterController implements CounterController {
Counter counter;public void setModel (Counter theCounter) {
counter = theCounter;}public void processInput() {
while (true) {int nextInput = readInt();if (nextInput == 0) return;counter.add(nextInput);
}}//readInt() …
}
Output method not called directly
![Page 39: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/39.jpg)
Console Mainpublic static main (String args[]) Counter model = new ACounter(); model.addObserver (new ACounterConsoleView()); CounterController controller = new ACounterController(); controller.setModel(model); controller.processInput();}
![Page 40: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/40.jpg)
Console and JOption Mainpublic static main (String args[]) Counter model = new ACounter(); model.addObserver (new ACounterJOptionView()); CounterController controller = new ACounterController(); controller.setModel(model); controller.processInput();}
Input Code Shared
![Page 41: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/41.jpg)
Console Mainpublic static main (String args[]) Counter model = new ACounter(); model.addObserver (new ACounterConsoleView()); CounterController controller = new ACounterController(); controller.setModel(model); controller.processInput();}
![Page 42: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/42.jpg)
public static main (String args[]) Counter model = new ACounter(); model.addObserver(new AConsoleJOptionView()); model.addObserver (new ACounterConsoleView()); CounterController controller = new ACounterController(); controller.setModel(model); controller.processInput();}
Mixed UI Main
Composition code duplicated
![Page 43: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/43.jpg)
Facade
Façade Pattern
Controller View
ModelWrite methods
Read methods
Notification method
Interactor
![Page 44: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/44.jpg)
Facade pattern
Component1
Component2
ComponentN
Facade
![Page 45: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/45.jpg)
Façade: Compose objects into a single unit exposing methods relevant to that unit
• E.g. scanner, parser, program tree, code generator objects combined into one compiler object– Takes program text as input– Produces code as output– Passes text to scanner, which passes tokens to parser, which creates
program tree, which is processed by code generator, which produces output
• Compiler user not aware of internal components• Componentizing code is a pain as components must be combined• Facades removes this problem, creating a simple façade to complex
internals
![Page 46: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/46.jpg)
Interactor Facade
• Provides a single edit() method taking model as argument
• Instantiates controller and view.• Makes view observer of model• Connects controller to model.• Starts controller.
![Page 47: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/47.jpg)
ConsoleControllerAndView Facadepackage interactors;import models.ObservableCounter;import models.CounterObserver;import controllers.ACounterController;import controllers.CounterController;import views.ACounterConsoleView;public class AConsoleControllerAndView implements CounterInteractor {
public void edit(ObservableCounter model) {CounterObserver view = new ACounterConsoleView();model.addObserver(view);CounterController controller = new ACounterController();controller.setModel(model);controller.processInput();
}}
Must be last action
![Page 48: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/48.jpg)
Console Controller And JOption View Main
package main;import models.AnObservableCounter;import facades.AConsoleControllerAndJOptionView;public class ACounterMain {
public static void main(String[] args) { (new AConsoleContollerAndJOptionView()).edit(new
AnObservableCounter());}
}
![Page 49: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/49.jpg)
AConsoleControllerAndView
Console View + Controller
AnObservableCounter
ACounterController ACounterConsole View
ACounterJOptionView
![Page 50: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/50.jpg)
AConsoleControllerAndJView
Console Controller + JOptionView
AnObservableCounter
ACounterController ACounterConsole View
ACounterJOptionView
![Page 51: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/51.jpg)
AConsoleControllerAndViewAndJOptionViewAConsoleControllerAndView
ACounterJOptionView
(Console Controller + View) + JOption View
AnObservableCounter
ACounterController ACounterConsole View
![Page 52: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/52.jpg)
Facade over facade
package interactors;import models.ObservableCounter;import models.CounterObserver;import views.ACounterJOptionView;public class AConsoleContollerAndViewAndJOptionView implements CounterInteractor {
public void edit(ObservableCounter model) {model.addObserver(new ACounterJOptionView());(new AConsoleContollerAndView()).edit(model);
}}
![Page 53: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/53.jpg)
Main with two views and OEpackage main;import models.AnObservableCounter;import bus.uigen.ObjectEditor;import facades.AConsoleControllerAndViewAndJOptionView;public class ACounterMain { public static void main(String[] args) { ObservableCounter model = new AnObservableCounter(); (new ObjectEditor()).edit(model);
(new ConsoleControllerAndViewAndJOptionView()).edit(model);
}}
![Page 54: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/54.jpg)
Observers that are not views
• Spreadsheet cell observes cells on which it depends.
• Monitoring of appliance usage– Each time I do setChannel() on TV event
logged.
• Any big brother app!
• Counter observer?
![Page 55: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/55.jpg)
Rocket Observer
Rocket added observer before view
![Page 56: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/56.jpg)
AConsoleControllerAndView
Instances created and composed
AnObservableCounter
ACounterController ACounterConsole View
ARocket
ARocketLauncher
![Page 57: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/57.jpg)
Rocket Interface
package models;import models.CounterObserver;public interface Rocket extends CounterObserver {
public void launch() ;}
![Page 58: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/58.jpg)
Rocket Launching Facade
package models;import models.ObservableCounter;public class ARocket implements Rocket {
public void update(ObservableCounter counter) {if (counter.getValue() == 0)
launch();}public void launch() {
System.out.println("LIFT OFF!!!");}
}
![Page 59: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/59.jpg)
Rocket Launching Facade
package interactors;import models.ObservableCounter;import models.CounterObserver;import models.ARocket;import facades.AConsoleContollerAndView;public class ARocketLaunchCountDown implements CounterInteractor {
public final int INITIAL_COUNTER_VALUE = 10;public void edit(ObservableCounter counter) {
counter.add(INITIAL_COUNTER_VALUE);CounterObserver rocket = new ARocket();counter.addObserver(rocket);(new AConsoleContollerAndView()).edit(counter);
}}
![Page 60: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/60.jpg)
Rocket launching mainpackage main;import models.AnObservableCounter;import models.ARocketLauncher;import facades.ARocketLaunchCountDown;public class ACounterMain {
public static void main(String[] args) { (new ARocketLaunchCountDown()).edit(new AnObservableCounter());
}}
![Page 61: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/61.jpg)
Counter Observable and Observer
package models;public interface ObservableCounter extends Counter {
public void addObserver(CounterObserver observer);public void removeObserver(CounterObserver observer);
}
package models;public interface CounterObserver {
public void update(ObservableCounter counter);}
Called whenever model is updated Updated model
Console View, JOption View
Common interface of all views
![Page 62: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/62.jpg)
Basic Notification
Observable 1
• Each observer is registered with observable.
• Each write method in observable calls a notification method in each observer.
•Parameter indicates observervable
•Notification method in observer reads model . Observable 2
Observer 1
Observer 2
Observer 3
Observer N
![Page 63: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/63.jpg)
Basic Notification
package models;public interface CounterObserver {
public void update(ObservableCounter counter);}
Called whenever observer is updated Updated observable
![Page 64: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/64.jpg)
Implicit Observer
package models;public interface CounterObserver {
public void setObservable(ObservableCounter counter);public void update();
}
Implicit observable
![Page 65: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/65.jpg)
Notification with Change Description
package models;public interface CounterObserver {
public void update(ObservableCounter counter, int newCounterVal);}
No need to call read method after notification
![Page 66: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/66.jpg)
Java Observable and Observerpackage java.util;public class Observable {
public void addObserver(Observer observer) {…}’public void deleteObserver(Observer observer) {…}’void notifyObservers(Object arg) {…};…
}
package java.util;public interface Observer {
public void update(Observable o, Object arg);}
A notifying class can subclass from Observable
“Standard” observer interface
![Page 67: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/67.jpg)
Notification with Changed Value
package models;public interface CounterObserver {
public void update(ObservableCounter counter, int newCounterVal);}
New value of observable attribute
![Page 68: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/68.jpg)
• Observer may display change to user.
• Observer interested in change does not need to keep old value to determine change
• Observer interested in absolute value must keep old value
package models;public interface CounterObserver {
public void update(ObservableCounter counter, int counterIncrement);}
Difference between new and old value of observable attribute
Notification with Change
![Page 69: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/69.jpg)
• Observer interested in change does not need to keep old value to determine change
• Observer interested in absolute value need not keep old value
• Makes observable harder to code
package models;public interface CounterObserver {
public void update (ObservableCounter counter, int oldCounterValue, int newCounterValue);}
Notification with New and Old Value
Old and new value of observable attribute
![Page 70: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/70.jpg)
package models;public interface CounterObserver {
public void update(CounterChangeEvent event);}
Notification with Single Event Object
package models;public interface CounterChangeEvent {
ObservableCounter getCounter(); int getOldCounterValue(); int getNewCounterValue();}
• Easy to pass single object to different methods handling event.
• Can make event info very elaborate– Time when event occurred– Unique ID for event– ….
• Don’t have to declare parameters for event information fields not of interest.
• Can return object from a function.
![Page 71: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/71.jpg)
Java TextField and ActionListenerpackage java.awt;public class TextField {
public void addActionListener(ActionListener l) {…};public void removeActionListener(ActionListener l) {…}; …
}
package java.awt.Event;public interface ActionListener {
public void actionPerformed(ActionEvent e);} Button, MenuItem and
other components also define these methods
Should have been put in an interface
![Page 72: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/72.jpg)
Java TextField and ActionListenerpackage java.awt.event;public class ActionEvent extends java.awt.AWTEvent {
public String getActionCommand() {…};public paramString() {…};
long getWhen() {…};….
}
package java.awt.event;public class AWTEvent extends java.util.EventObject {
int getID() {…};….
}
package java.util;public class EventObject {
Object getSource() {…};String toString() {…};
}
![Page 73: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/73.jpg)
Observing multiple attributes
package bmi;public interface BMISpreadsheet {
public double getHeight(); public void setHeight (double newVal); public double getWeight() ;public void setWeight(double newWeight) ;public double getBMI();
}
![Page 74: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/74.jpg)
package bmi;public interface BMIObserver { public void updateHeight (BMISpreadsheet bmi, int oldHeight, int newHeight);
public void updateWeight(BMISpreadsheet bmi, int oldWeight, int newWeight); public void updateBMI(BMISpreadsheet bmi, double oldBMI, double newBMI);}
Multiple update methods
package bmi;public interface BMISpreadsheet {
public double getHeight(); public void setHeight (double newVal); public double getWeight() ;public void setWeight(double newWeight) ;public double getBMI();
}
![Page 75: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/75.jpg)
package bmi;public interface BMIObserver { public void update (BMISpreadsheet bmi, String propertyName, Object oldValue, Object newValue);}
Single update method
package bmi;public interface BMISpreadsheet {
public double getHeight(); public void setHeight (double newVal); public double getWeight() ;public void setWeight(double newWeight) ;public double getBMI();
}
• Not type safe• New methods not
needed as new properties added
• Can be generalized for arbitrary bean objects“Wght”
“One”
![Page 76: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/76.jpg)
package java.beans;public class PropertyChangeEvent extends java.util.EventObject { public PropertyChangeEvent (Object source, String propertyName, Object oldValue, Object newValue) {…} public Object getNewValue() {…} public Object getOldValue() {…} public String getPropertyName() {…} ….}
Property Changes
package java.beans;public interface PropertyChangeListener extends java.util.EventListener { public void propertyChange (PropertyChangeEvent evt);}
package bmi;public class AnObservableBMISpreadsheet extends ABMISpreadsheet{ public void
addPropertyChangeListener(PropertyChangeListener l) { …} …}
Must notify in write methods
![Page 77: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/77.jpg)
Property Changes
• If Object defines– addPropertyChangeListener(PropertyChangeListener l)
{ …}• ObjectEditor automatically calls it to register itself.• Setter method can can now call in listeners
– public void propertyChange PropertyChangeEvent evt);• ObjectEditor reacts by updating display of property
– Does not have to do polling refresh by calling all getter methods when a setter is invoked.
– Can disable this polling refresh by invoking ViewAuto Refresh command
![Page 78: Model View Controller Prasun Dewan Comp 114. Model View Controller Pattern Issue –How to create user-interface objects like object editor Model-View-Controller](https://reader031.vdocuments.site/reader031/viewer/2022032015/56649d3a5503460f94a14e48/html5/thumbnails/78.jpg)
Multiple Observer/Observable Interfaces
• An observable may need to register and notify multiple kinds of observers
• An observer may need to interact with multiple kinds of observables. Observable 1
Observable 2
Observer 1
Observer 2
Observer 3
Observer N