1

Model View Controller

INF 123 – Software architecturetdebeauv@uci.edu

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 …

3

Outline

• Vanilla MVC• Reactive MVC• Web MVC• Game MVC

4

VANILLA MVC

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)

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.

7

REACTIVE MVC

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

9

Reactive programming (low level)

b = 1c = 2a = b + cprint a # 1+2=3b = 4print a # 4+2=6 !!

10

Observer pattern (OO design pattern)

• Most languages are non-reactive• So they need a design pattern

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

12

WEB MVC

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

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!

15

Web MVC

• HTML in your Java/python/C#• Or C#/python/Java in your HTML

• Either way: not good

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

17

GAME MVC

18

Game MVC

• Vanilla MVC where the loop wakes up everyone

• Treat the loop/clock as a controller and you have vanilla MVC

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()

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()

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()

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()

23

More refs

• http://bowling-bash.blogspot.com/2011/09/mvc-for-games.html