SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

Model View Controller

virginiacurtis avatar
virginiacurtis
58 diapositives · 602 Views · Dec 20, 2019

Learn how to create user interface objects like an object editor using the Model-View-Controller pattern. Discover how to reuse code among different user interfaces and simultaneously create multiple interfaces for the same object. Explore different views for the same user and different views for different users sharing the same object.

#model view controller #model view controller ppt #powerpoint #presentation
Model View Controller - slide 1
1 / 58

Télécharger la présentation

Model View Controller
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  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); } }