1 / 23

MVC and multiple views

MVC and multiple views. CMPT 381. Overview. Review of MVC Listener-based view updates Example 1: direct connection Multiple view systems Example 2: listener, one view Example 3: listener, two views Example 4: listener, three views MVC in Tcl / Tk ?

ashely-freeman
Download Presentation

MVC and multiple views

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MVC and multiple views CMPT 381

  2. Overview Review of MVC Listener-based view updates Example 1: direct connection Multiple view systems Example 2: listener, one view Example 3: listener, two views Example 4: listener, three views MVC in Tcl/Tk? Storing the selection in the model

  3. Easy listbox .list .list insert 0 {saskatoon 36} {regina18} \ {yorkton 7} {aberdeen 40} scrollbar .s -command ".list yview" .list configure -yscrollcommand ".s set" pack .s -side right -fill y pack .list -side left

  4. Harder listbox .list set cities {{saskatoon 36}{regina18} {yorkton 7}{aberdeen 40}} scrollbar .s -command ".list yview" .list configure -yscrollcommand ".s set" pack .s -side right -fill y pack .list -side left proc redisplay {} { global cities .list delete 0 end foreach city $cities { .list insert end $city } }

  5. Now… • Show the names in sorted order • Show the names sorted by temperature • Show a map view in addition to the list • Show only the map view

  6. Blue circles: 4 Red squares: 2 How to store this data in the UI?

  7. View Model Controller Model-View-Controller • An architecture for interactive applications • introduced by Smalltalk developers at PARC • Partitions application so that it is: • scalable • maintainable

  8. View Model Controller The model • The information that the application manipulates • “The data” • E.g. the circuit in a design program • Logic gates and wires connecting them • E.g. a drawing in a drawing program • Shapes, locations, colour

  9. View Model Controller The view • A visual display of the model • There may be multiple views • View is redrawn when the model changes

  10. Shape view Numerical View Blue circles: 4 Red squares: 2 Multiple views

  11. Multiple views

  12. View Model Controller The controller • Deals with application-level input events • Communicates with view • e.g. which object was selected with mouse click • Calls model methods to make changes

  13. View Model Controller Combined view and controller • View and controller are tightly coupled • Almost always occur in pairs • each view needs a separate controller • Some architectures combine them into one class

  14. Why MVC? • Alternate (bad) approaches • Storing your data in your UI • Combining all of MVC into one class • Using global variables • Separation simplifies scalability • A model may need/want more than one view • Separation simplifies maintenance • Adding new views or changing views • Adding to or changing the model

  15. Blue circles: 4 Red squares: 2 Adding views later depth view

  16. Adding views later

  17. Blue circles: 0 Red squares: 0 MVC event flow • Creating a new shape • Assume “circle tool” selected • User: • Controller: • View: • Model: • Toolkit:

  18. Blue circles: 0 Red squares: 0 MVC event flow • User: • click mouse at location • Toolkit: • forward event to handler • Controller: • receive mouse click event • check mode  “circle” • call model.addCircle(x,y)

  19. Blue circles: 0 Red squares: 0 MVC event flow • Model: • model.addCircle adds the shape to a data structure • model notifies its list of views that a change has occurred • drawing area view • text summary view • View: • call toolkit.repaint( ) ortoolkit.repaint (rectangle)

  20. Blue circles: 0 Red squares: 0 MVC event flow • View: • returns to model • Model: • returns to controller • Controller: • returns to toolkit • Toolkit: • notices repaint request • is the area visible? • schedules call to view’s paint method

  21. Blue circles: 1 Red squares: 0 MVC event flow • View: • request needed information from model • redraw view • Toolkit: • bitblt rectangle onto screen

  22. Controller-Model communication • Direct connection • UI controller has visibility to model • Do we want real model-view separation? • Changing the model • Controller pattern • A gatekeeper for talking to the model • UI controller can only see the gatekeeper View Model Controller

  23. View Model Controller Model-View communication • Direct connection • Model or controller calls view methods directly • Publish-subscribe • Views register for notifications from model objects • Event approach • Use the actual event system to do the communication

More Related