mvc / mvprtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ view (observer) / model (subject)...
TRANSCRIPT
![Page 1: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/1.jpg)
MVC / MVP Reid Holmes
[Image from: http://merroun.wordpress.com/2012/03/28/mvvm-mvp-and-mvc-software-patterns-againts-3-layered-architecture/ ]
![Page 2: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/2.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Background‣ MVC started w/ Smalltalk-80‣ Java UI frameworks & EJBs reignited interest‣ Also prevalent in GWT and .NET development
![Page 3: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/3.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
MVC Motivation‣ UI changes more frequently than business logic‣ e.g., layout changes (esp. in web applications)
‣ The same data is often displayed in different ways‣ e.g., table view vs chart view‣ The same business logic can drive both
‣ Designers and developers are different people‣ Testing UI code is difficult and expensive‣ Main Goal: Decouple models and views‣ Increase maintainability/testability of system‣ Permit new views to be developed
![Page 4: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/4.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Model‣ Contains application data‣ This is often persisted to a backing store
‣ Does not know how to present itself‣ Is domain independent‣ Are often Subjects in the Observer pattern
![Page 5: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/5.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
View‣ Presents the model to the user‣ Allows the user to manipulate the data‣ Does not store data‣ Is configurable to display different data
![Page 6: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/6.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Controller‣ Glues Model and View together‣ Updates the view when the Model changes‣ Updates the model when the user manipulates the
view‣ Houses the application logic‣ Loose coupling between Model and others‣ View tightly cohesive with its Controller
![Page 7: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/7.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Abstract topologyController
View
Model
<<updates state>>
<<changes>>
<<retrieves state>>
<<notifies of state changes>>
1
2
34
![Page 8: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/8.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Concrete topology
ViewController
MobileView
Model
BrowserView TabletView MockView
ViewController c = new ViewController(); IView v = c.createView(c); IModel m = c.loadModel(); m.addListener(v);
[Dependency injection would remove explicit new in c.createView()]
![Page 9: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/9.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Interaction mechanism‣ User interacts with the UI (View)‣ UI (View) notifies controller of changes‣ Controller handles notifications, processing them
into actions that can be performed on the model‣ Controller modifies the model as required‣ If the model changes, it fires modification events‣ The view responds to the modification events
![Page 10: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/10.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Benefits and tradeoffs‣ Pro:‣ Decouple view from model‣ Support multiple views [collaborative views]‣ Maintainability [add new views]‣ Split teams [relieve critical path]
‣ Testability [reduce UI testing]‣ Con:‣ Complexity [indirection, events]‣ Efficiency [frequent updates, large models]
![Page 11: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/11.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Compound Pattern‣ MVC (and other similar patterns) rely upon several
more basic design patterns ‣ In MVC:‣ View (strategy) / Controller (context) leverage the
strategy pattern‣ View is often uses a composite pattern (for nested
views)‣ View (observer) / Model (subject) interact through
the observer pattern‣ Other meta-patterns rely upon similar lower-level
design patterns
![Page 12: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/12.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
MVP Motivation‣ Take MVC a tiny bit further:‣ Enhance testability‣ Further separate Designers from Developers
‣ Leveraged by both GWT and .NET
![Page 13: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/13.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Model‣ Contains application data‣ This is often persisted to a backing store
‣ Does not know how to present itself‣ Is domain independent‣ Often fires events to an Event Bus
![Page 14: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/14.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
View‣ Thin UI front-end for controller‣ Does not store data‣ Can be interchanged easily‣ Does not ever see or manipulate Model objects‣ Only interacts with primitives‣ e.g., (setUser(String) instead of setUser(User))
![Page 15: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/15.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Controller‣ Glues Model and View together‣ Updates the view when the Model changes‣ Updates the model when the user manipulates the
view‣ Houses the application logic
![Page 16: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/16.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
MVP Topology
Presenter
View
Model
<<updates, retrieves state>>
<<notifies>> <<refresh>>
<<notifies of state changes>>
Event Bus
1
2 3
4
![Page 17: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/17.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Concrete MVP Topology
ViewController
MobileView
Model
BrowserView MockView
App Controller
OutlineController
OutlineView MockOutline
<<notifies of state changes>>
Event Bus
App Controller can build and tear down
controllers.
![Page 18: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/18.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Concrete Examplemain(String[] args) {
AppController ac = new AppController();IModel m = ac.setModel(Persist.loadModel());m.addListener(ac);ac.showMain();
}
AppController::showMain() { ViewController vc = new ViewController(this);
v.showMain();}ViewController::ViewController(AppController ac) {
_controller = ac;_controller.getModel().addListener(vc);IView v = createView();v.setPresenter();
}[Dependency injection should be used
in ViewController.createView()]
public interface IView {public void setPresenter(Presenter p);public void showMain();
public interface Presenter {void onCancel();void onAction(String action);public IView createView();
}}
Views and presenters are tightly bound:
![Page 19: MVC / MVPrtholmes/teaching/2015t1/cpsc410/slides/410_25... · ‣ View (observer) / Model (subject) interact through the observer pattern ‣ Other meta-patterns rely upon similar](https://reader034.vdocument.in/reader034/viewer/2022042222/5ec95cac18fe0851113bae06/html5/thumbnails/19.jpg)
REID HOLMES - CPSC 410: Advanced Software Engineering
Benefits and tradeoffs‣ Same as MVC with improved:‣ Decoupling of views from the model‣ Split teams [relieve critical path]
‣ Testability [reduce UI testing]‣ A little less complex than MVC [fewer events]