Model View Controller Pattern Patterns Model-View-Controller.
Model View Controller
description
Transcript of Model View Controller
![Page 2: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/2.jpg)
2
MVC and separation of concerns
• Model – State and logic
• View– Display state to user
• Controller – Translate user inputs into model logic
• Simple, yet so many variants …
![Page 3: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/3.jpg)
3
Outline
• Vanilla MVC• Reactive MVC• Web MVC• Game MVC
![Page 4: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/4.jpg)
4
VANILLA MVC
![Page 5: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/5.jpg)
5
Vanilla MVC
• Model– Unaware of the view(s) and controller(s)
• View– Display only when notified by the controller– Aware of the model’s structure
• Controller– Aware of the model’s structure– (Only works when receiving user inputs)
![Page 6: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/6.jpg)
6
MVC != main and subroutinesMVC Main and subroutines
Number of Components
3* 1 + N
Connectors Not specified – could be anything Must be procedure calls
Level of abstraction
Higher level (closer to the domain of “applications with GUI and user inputs”)
Lower level (closer to the code)
Concerns Separate rendering and user input from state and logic.
Break down a long program into self-contained and functionally meaningful subroutines.
* There may be multiple views or controllers, but only one model.
![Page 7: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/7.jpg)
7
REACTIVE MVC
![Page 8: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/8.jpg)
8
Reactive MVC
• Model– Smarter than usual: must be aware of the view(s)– Takes half of the controller’s job away
• View– Register for notifications from the model– Only called by the model
• Controller– Only updates the model– No more notifying the view
![Page 9: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/9.jpg)
9
Reactive programming (low level)
b = 1c = 2a = b + cprint a # 1+2=3b = 4print a # 4+2=6 !!
![Page 10: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/10.jpg)
10
Observer pattern (OO design pattern)
• Most languages are non-reactive• So they need a design pattern
![Page 11: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/11.jpg)
11
Observer pattern
• A pattern frequently used for GUI widgets• Lower-level of abstraction (code) than MVC
(overall system structure)• In reactive MVC, the view observes the model
![Page 12: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/12.jpg)
12
WEB MVC
![Page 13: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/13.jpg)
13
Web MVC
• Model– Usually very little logic (DB, data access objects, …)
• Views– A puppet in the controller’s hands
• Controller– Select which view will do the rendering– Fetch data from the model, and give it to the view– In other words: map each user input to a view, not
to a model logic
![Page 14: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/14.jpg)
14
Model 2/EJB-JSP-servlet
• 2000s: Java is the rage• Mixes Java (server) and
HTML (client) <p>Counting to three:</p> <% for (int i=1; i<4; i++) { %> <p> This number is <%= i %>. </p> <% } %> <p>OK.</p>
• 2010s: JavaScript is the rage, goodbye JSP!
![Page 15: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/15.jpg)
15
Web MVC
• HTML in your Java/python/C#• Or C#/python/Java in your HTML
• Either way: not good
![Page 16: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/16.jpg)
16
If you’re interested …
• iOS Cocoa MVC• Enterprise Java Bean – Java Server Page –
Servlet• ASP.NET MVC, Spring MVC, …• http://
msdn.microsoft.com/en-us/library/dd381412%28VS.98%29.aspx
• http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html
![Page 17: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/17.jpg)
17
GAME MVC
![Page 18: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/18.jpg)
18
Game MVC
• Vanilla MVC where the loop wakes up everyone
• Treat the loop/clock as a controller and you have vanilla MVC
![Page 19: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/19.jpg)
19
Main loop
m = Model()c = Controller(model)v = View(model)
while not m.game_over: sleep(0.02) c.poll() m.update() v.display()
![Page 20: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/20.jpg)
20
Model API
m = Model()c = Controller(model)v = View(model)
while not m.game_over: sleep(0.02) c.poll() m.update() v.display()
![Page 21: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/21.jpg)
21
Controller API
m = Model()c = Controller(model)v = View(model)
while not m.game_over: sleep(0.02) c.poll() m.update() v.display()
![Page 22: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/22.jpg)
22
View API
m = Model()c = Controller(model)v = View(model)
while not m.game_over: sleep(0.02) c.poll() m.update() v.display()
![Page 23: Model View Controller](https://reader036.fdocuments.us/reader036/viewer/2022062315/56816371550346895dd44d18/html5/thumbnails/23.jpg)
23
More refs
• http://bowling-bash.blogspot.com/2011/09/mvc-for-games.html