Model View Controller

1. Model View Controller Prasun Dewan Comp 114

2. Model View Controller Pattern • Issue • How to create user-interface objects like object editor • Model-View-Controller Pattern • Observer sub-pattern

3. 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 different view for different views sharing same object • Distributed presentation

4. Example: Counter • Can add arbitrary positive/negative value to it. • Different UIs sharing component. • Multiple UIs

5. Example: Counter package models; publicclass ACounter implements Counter { int counter = 0; publicvoid add (int amount) { counter += amount; } publicint getValue() { return counter; } }

6. Console Input and Output

7. Console Input and JOption Output

8. Console Input,Output and JOption Output

9. AConsoleUIMain AMixedUIMain ACounter AMultipleUIMain Benefits of Object/UI Separation

10. Model/Interactor Pattern UI Code Interactor Arbitrary UI unaware methods Model Computation code

11. Monolithic Main for Console I/O publicclass ACounterWithConsoleControllerAndView { publicstaticvoid main(String[] args) { Counter counter = new ACounter(); appendToConsole(counter.getValue()); processInput(counter); } staticvoid appendToConsole(int counterValue) { System.out.println("Counter: " + counterValue); } publicstaticvoid processInput(Counter counter) { while (true) { int nextInput = readInt(); if (nextInput == 0) return; counter.add(nextInput); appendToConsole (counter.getValue()); } } //readInt() ... }

12. Monolithic Main for Mixed I/O publicclass ACounterWithConsoleControllerAndJOptionView { publicstaticvoid main(String[] args) { Counter counter = new ACounter(); displayMessage(counter.getValue()); processInput(counter); } staticvoid displayMessage(int counterValue) { JOptionPane.showMessageDialog(null, "Counter: " + counterValue); } publicstaticvoid processInput(Counter counter) { while (true) { int nextInput = readInt(); if (nextInput == 0) return; counter.add(nextInput); displayMessage (counter.getValue()); } } //readInt() ... }

13. Monolithic Main for Mixed I/O publicclass ACounterWithConsoleControllerAndViewAndJOptionView { publicstaticvoid main(String[] args) { Counter counter = new ACounter(); displayOutput(counter.getValue()); processInput(counter); } staticvoid appendToConsole(int counterValue) { System.out.println("Counter: " + counterValue); } staticvoid displayMessage(int counterValue) { JOptionPane.showMessageDialog(null, "Counter: " + counterValue); } staticvoid displayOutput(int counterValue) { appendToConsole(counterValue); displayMessage(counterValue); } publicstaticvoid processInput(Counter counter) { while (true) { int nextInput = readInt(); if (nextInput == 0) return; counter.add(nextInput); displayOutput(counter.getValue()); } } //readInt() ... }

14. AConsoleUIMain AMixedUIMain ACounter AMultipleUIMain Duplicated input code Duplicated output code Drawbacks of Monolithic UI

15. Model/Interactor Pattern UI Code Interactor Arbitrary UI unaware methods Model Computation code

16. Performs Input Performs Output Model, View and Controller (MVC) View Controller Read methods Model Write methods

17. Performs Input Performs Output Interactor Pattern Special Case View Controller Interactor Facade Read methods Model Write methods

18. Example: Counter package models; publicclass ACounter implements Counter { int counter = 0; publicvoid add (int amount) { counter += amount; } publicint getValue() { return counter; } }

19. Performs Input Performs Output Counter with MVC Pattern View Controller Model getValue() add()

20. Multiple Views and Controllers Controller 1 View 1 Controller 2 View 2 Model Controller 3 View 3 Controller M View N

21. Could be instances of same class (multiple users) Views and Controllers are instances Controller 1 View 1 Controller 2 View 2 Model Controller 3 View 3 Controller M View N

22. Syncing Controllers & View Controller 1 View 1 Controller 2 View 2 Model Controller 3 View 3 Controller M View N Syncing Controllers and Views?

23. Observer Observable Observer/Observable Pattern Controller 1 View 1 Controller 2 View 2 Model Controller 3 View 3 Changed object notifies views Controller M View N

24. Observable 2 Observer/Observable Pattern Observer 1 Observer 2 Observable 1 Observer 3 Observer N

25. Observer with multiple Observables • A single battle simulation view observing • Multiple planes • Multiple tanks

26. Observable 2 Notification Scheme • Each observer is registered with observable. • Each write method in observable calls a notification method in each observer. • Notification method in observer reads model . Observer 1 Observer 2 Observable 1 Observer 3 • Each student is registered with professor’s listserv. • When web page is updated mail sent to students. • Student reads web page. Observer N

27. Observable 2 General Notification Scheme • Observers may have multiple observerables with common notification method. • Notification method parameter indicates which observable. Observer 1 Observer 2 Observable 1 Observer 3 Observer N

28. Performs Input Performs Output Notification method Write method Read method Model, View and Controller (MVC) View Controller Model

29. Implementation dependent issues • How does controller know about model? • Model connection method invoked on it. • By model or some other program • Main • Façade • 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 • Facade

30. Performs Input Performs Output Model connection method Observer registration method Notification method Write method Read method Model, View and Controller (MVC) View Controller Model

31. Counter Observable and Observer (edit) package models; publicinterface ObservableCounter extends Counter { } package models; publicinterface CounterObserver { }

32. Counter Observable and Observer (edited) package models; publicinterface ObservableCounter extends Counter { public void register(CounterObserver counterObserver); public void unregister(CounterObserver counterObserver); } package models; publicinterface CounterObserver { public void notified(ObservableCounter counter); }

33. Console View, JOption View Common interface of all views Updated model Called whenever model is updated Counter Observable and Observer package models; publicinterface ObservableCounter extends Counter { publicvoid addObserver(CounterObserver observer); publicvoid removeObserver(CounterObserver observer); } package models; publicinterface CounterObserver { publicvoid update(ObservableCounter counter); }

34. Each write method notifies all. Give this observable initial value Counter Model package models; import java.util.Vector; publicclass AnObservableCounter extends ACounter implements ObservableCounter { Vector observers = new Vector(); publicvoid addObserver(CounterObserver observer) { observers.addElement(observer); observer.update(this); } publicvoid removeObserver(CounterObserver observer) { observers.removeElement(observer); } void notifyObservers() { for (int observerNum = 0; observerNum < observers.size(); observerNum++) ((CounterObserver) observers.elementAt(observerNum)).update(this); } publicvoid add (int amount) { super.add(amount); notifyObservers(); } }

35. Console View package views; import models.ObservableCounter; import models.CounterObserver; publicclass ACounterConsoleView implements CounterObserver { publicvoid update(ObservableCounter counter) { appendToConsole (counter.getValue()); } void appendToConsole(int counterValue) { System.out.println("Counter: " + counterValue); } }

36. JOption View package views; import models.ObservableCounter; import models.CounterObserver; import javax.swing.JOptionPane; publicclass ACounterJOptionView implements CounterObserver { publicvoid update(ObservableCounter counter) { displayMessage(counter.getValue()); } void displayMessage(int counterValue) { JOptionPane.showMessageDialog(null, "Counter: " + counterValue); } }

37. Console Controller Interface package controllers; import models.Counter; publicinterface CounterController { publicvoid setModel (Counter theCounter); publicvoid processInput(); }

38. Output method not called directly Console Controller package controllers; import java.io.BufferedReader; import java.io.InputStreamReader; import models.Counter; import java.io.IOException; publicclass ACounterController implements CounterController { Counter counter; publicvoid setModel (Counter theCounter) { counter = theCounter; } publicvoid processInput() { while (true) { int nextInput = readInt(); if (nextInput == 0) return; counter.add(nextInput); } } //readInt() … }

39. Classes we have AnObservable Counter ACounterJOptionView ACounterConsole View ACounterController

40. AConsoleControllerAndView Instances created and composed AnObservable Counter ACounterJOptionView ACounterConsole View ACounterController

41. Classes we have AnObservable Counter ACounterJOptionView ACounterConsole View ACounterController

42. AConsoleControllerAndJView Instances created and composed AnObservable Counter ACounterJOptionView ACounterConsole View ACounterController

43. Classes we have AnObservable Counter ACounterJOptionView ACounterConsole View ACounterController

44. AConsoleControllerAndView AConsoleControllerAndViewAndJOptionView Instances created and composed AnObservable Counter ACounterJOptionView ACounterConsole View ACounterController

45. Console Controller And View Main package main; import models.AnObservableCounter; import facades.AConsoleControllerAndView; publicclass ACounterMain { publicstatic void main(String[] args) { (new AConsoleControllerAndView()).edit(new AnObservableCounter()); } }

46. Must be last action ConsoleControllerAndView Facade package facades; import models.ObservableCounter; import models.CounterObserver; import controllers.ACounterController; import controllers.CounterController; import views.ACounterConsoleView; publicclass AConsoleControllerAndView implements CounterInteractor { publicvoid edit(ObservableCounter model) { CounterObserver view = new ACounterConsoleView(); model.addObserver(view); CounterController controller = new ACounterController(); controller.setModel(model); controller.processInput(); } }

47. Console Controller And JOption View Main package main; import models.AnObservableCounter; import facades.AConsoleControllerAndJOptionView; publicclass ACounterMain { publicstatic void main(String[] args) { (new AConsoleContollerAndJOptionView()).edit(new AnObservableCounter()); } }

48. ConsoleControllerAndJView Facade package facades; import models.ObservableCounter; import models.CounterObserver; import controllers.ACounterController; import controllers.CounterController; import views.ACounterJOptionView; publicclass AConsoleControllerAndJOptionView implements CounterInteractor { publicvoid edit(ObservableCounter model) { CounterObserver view = new ACounterJOptionView(); model.addObserver(view); CounterController controller = new ACounterController(); controller.setModel(model); controller.processInput(); } }

49. Main with two views package main; import models.AnObservableCounter; import facades.AConsoleControllerAndViewAndJOptionView; publicclass ACounterMain { publicstatic void main(String[] args) { (new AConsoleControllerAndViewAndJOptionView()).edit(new AnObservableCounter()); } }

50. Facade over facade package facades; import models.ObservableCounter; import models.CounterObserver; import views.ACounterJOptionView; publicclass AConsoleContollerAndViewAndJOptionView implements CounterInteractor { publicvoidedit(ObservableCounter model) { model.addObserver(new ACounterJOptionView()); (new AConsoleContollerAndView()).edit(model); } }