Model-View-Controller Model-View-Controller ArchitectureArchitecture

22

Give someone a program, you frustrate them for a day; teach them how to program, you frustrate them for a lifetime.

— David Leinweber

Model

View

Controller

Model-View-ControllerModel-View-Controller

Architecture for interactive appsArchitecture for interactive apps• introduced by Smalltalk developers at PARCintroduced by Smalltalk developers at PARC

Partitions application so that it isPartitions application so that it is• scalablescalable• maintainablemaintainable

What is MVC?What is MVC?

55

The ModelThe Model

Most programs are supposed to do work, not just be Most programs are supposed to do work, not just be ““another pretty faceanother pretty face””• but there are some exceptionsbut there are some exceptions• useful programs existed long before GUIsuseful programs existed long before GUIs

The The ModelModel is the part that does the work--it is the part that does the work--it modelsmodels the actual problem being solvedthe actual problem being solved

The Model should be independent of both the The Model should be independent of both the Controller and the ViewController and the View• But it provides services (methods) for them to useBut it provides services (methods) for them to use

Independence gives flexibility, robustnessIndependence gives flexibility, robustness

ModelView

Controller

66

The ViewThe View

Typically, the user has to be able to see, or Typically, the user has to be able to see, or viewview, what , what the program is doingthe program is doing

The View shows what the Model is doingThe View shows what the Model is doing• The View is a passive observer; it should not affect the modelThe View is a passive observer; it should not affect the model

The Model should be independent of the View, but (but The Model should be independent of the View, but (but it can provide access methods)it can provide access methods)

The View should The View should notnot display what the Controller display what the Controller thinksthinks is happeningis happening

ModelView

Controller

77

The ControllerThe Controller

The The ControllerController decides what the model is to do decides what the model is to do Often, the user is put in control by means of a GUIOften, the user is put in control by means of a GUI

• in this case, the GUI and the Controller are often the samein this case, the GUI and the Controller are often the same The Controller and the Model can almost always be The Controller and the Model can almost always be

separated (what to do versus how to do it)separated (what to do versus how to do it) The design of the Controller depends on the ModelThe design of the Controller depends on the Model The Model should The Model should notnot depend on the Controller depend on the Controller

ModelView

Controller

Controller CommunicationController Communication

Communicates with view Communicates with view • determines which objects are being manipulateddetermines which objects are being manipulated

e.g., which object was selected with mouse clicke.g., which object was selected with mouse click Calls model methods to make changesCalls model methods to make changes

• model makes change and notifies views to model makes change and notifies views to updateupdate

ModelView

Controller

AdvantagesAdvantages Input processing is separated from output Input processing is separated from output

processing.processing. Controllers can be interchanged, allowing different Controllers can be interchanged, allowing different

user interaction modes.user interaction modes. Multiple views of the model can be supported easily.Multiple views of the model can be supported easily.

Other waysOther ways

Combining Controller and ViewCombining Controller and View• Small programsSmall programs• May be highly interdependentMay be highly interdependent• Never mix modelNever mix model

ModelView

Controller

Other WaysOther Ways

• No Model-View interactionNo Model-View interaction• All interaction happens through controllerAll interaction happens through controller• Controller talks to Model and ViewController talks to Model and View• Your projectYour project

Model

View

Controller

Why MVC?Why MVC?

Provides a logical structure for Provides a logical structure for heavily interactive systemheavily interactive system

Adheres to good engineering design Adheres to good engineering design principles and practicesprinciples and practices• Information hiding, less coupling, Information hiding, less coupling,

simplicity, etc.simplicity, etc.• Delegated control styleDelegated control style

Why MVC?Why MVC?

Combining MVC into one class or using Combining MVC into one class or using global variables will global variables will not not scale. Why?scale. Why?• model may have more than one viewmodel may have more than one view

each different & needing update on model changeseach different & needing update on model changes Separation eases maintenance. Why?Separation eases maintenance. Why?

• easy to add a new view later easy to add a new view later may need new model info, but old views still workmay need new model info, but old views still work

• can change a view latercan change a view later e.g., draw shapes in 3-d e.g., draw shapes in 3-d

• recall that the view handles selectionrecall that the view handles selection

WhatWhat’’s the point?s the point?

It’s just plain easier It’s just plain easier • (even if it doesn(even if it doesn’’t look it)!t look it)!

Studies show that most introductory CS Studies show that most introductory CS college students tend to clump a UI college students tend to clump a UI program into one big monolithic main program into one big monolithic main classclass

Unfamiliarity stems from student Unfamiliarity stems from student tendency to program according to styles tendency to program according to styles presented in textbooks and not being presented in textbooks and not being introduced to design principles earlyintroduced to design principles early