Model-View-Controller (MVC) Pattern in Software Development
Slides adapted from Alex Mariakakis, with
material from Krysta Yousoufian and Kellen
Donohue
S
S
e
e
c
c
t
t
i
i
o
o
n
n
8
8
:
:
M
M
o
o
d
d
e
e
l
l
-
-
V
V
i
i
e
e
w
w
-
-
C
C
o
o
n
n
t
t
r
r
o
o
l
l
l
l
e
e
r
r
Agenda
•
MVC
•
MVC example 1: traffic light
•
MVC example 2: registration
•
HW8 info
MVC
•
The classic design pattern
•
Used for data-driven user applications
•
Such apps juggle several tasks:
•
Loading and storing the data – getting it in/out of storage on request
•
Constructing the user interface – what the user sees
•
Interpreting user actions – deciding whether to modify the UI or data
•
These tasks are largely independent of each other
•
Model, view, and controller each get one task
Model
provides abstraction
for data
representation,
storage, and
retrieval
View
asks model for data
and presents it in a
user-friendly format
Controller
listens for the user
to change data or
state in the UI,
notifying the model
or view accordingly
Structural Relationship
W
h
a
t
d
o
y
o
u
t
h
i
n
k
a
r
e
t
h
e
b
e
n
e
f
i
t
s
o
f
M
V
C
?
taken from
http://msdn.microsoft.com/en-us/library/ff649643.aspx
Communication Flow
p
u
s
h
v
s
p
u
l
l
Push vs. Pull Architecture
•
Push architecture
•
As soon as the model changes, it notifies all of the views
•
Pull architecture
•
When a view needs to be updated, it asks the model for new data
•
Advantages for push
•
Guaranteed to have latest data in case something goes wrong later
on
•
Advantages for pull
•
Avoid unnecessary updates, not nearly as intensive on the view
Callbacks
•
Synchronous callbacks:
•
Examples: HashMap calls its client’s hashCode, equals
•
Useful when the callback result is needed immediately by the
library
•
Asynchronous callbacks:
•
Examples: GUI listeners
•
Register to indicate interest and where to call back
•
Useful when the callback should be performed later, when some
interesting event occurs
Async Callbacks
•
Asynchronous callbacks:
•
Examples: GUI listeners
•
Register to indicate interest and
where to call back
•
Useful when the callback should be
performed later, when some
interesting event occurs
r
e
t
u
r
n
,
s
o
c
l
i
e
n
t
c
a
n
f
i
n
i
s
h
p
r
o
c
e
s
s
i
n
g
MVC in Webapps
•
Ruby on Rails and Django enforce MVC
•
In Ruby on Rails:
•
Model: Ruby class defining an object, database backend
•
Controller: Ruby code handling events and callbacks
•
View: html page displays
•
Which does Javascript belong to?
•
Languages enforcing MVC doesn’t necessarily guarantee
good design; you still have to make good choices
Benefits of MVC
•
Organization of code
•
Maintainable, easy to find what you need
•
Ease of development
•
Build and test components independently
•
Flexibility
•
Swap out views for different presentations of the same data (ex: calendar
daily, weekly, or monthly view)
•
Swap out models to change data storage without affecting user
MVC Example – Traffic Signal
•
Regulate valid traffic movements
•
Don’t let cars run into each other
•
Detect cars waiting to enter
intersection
•
Traffic lights to direct car traffic
•
Manual override for particular lights
•
Automatic green for fire trucks
•
Detect pedestrians waiting to cross
•
Pedestrian signals to direct
pedestrians
•
External timer which triggers changes
at set interval
Traffic Signal – MVC
Traffic Signal – MVC
Traffic Signal – MVC
Traffic Signal – MVC
Traffic Signal – MVC
Traffic Signal – MVC
Traffic Signal – MVC
Traffic Signal – MVC
Traffic Signal – Model
•
Stores current state of traffic flow
•
Knows current direction of traffic
•
Capable of skipping a light cycle
•
Stores whether there are cars and/or pedestrians
waiting
•
Example
•
TrafficModel
Traffic Signal – Views
•
Conveys information to cars and pedestrians in a
specific direction
•
Examples
•
CarLight – traffic light
•
PedestrianLight – pedestrian light
Traffic Signal – Controller
•
Aware of model’s current direction
•
Triggers methods to notify model that state should
change
•
Examples
•
PedestrianButton – notifies TrafficModel that there is a pedestrian waiting
•
CarDetector – notifies TrafficModel that there is a car waiting
•
LightSwitch – enables or disables the light
•
Timer – regulates time in some way, possibly to skip cycles
MVC Example – Registration
•
Registration system with web
interface
•
Advisors create classes, set
space, time, restrictions
•
Professors can see who’s signed
up for their class
•
Students can see available
classes and sign up for classes
•
Administrators can place holds on
student registration
•
Professors can be notified when a
student drops
•
Students can be notified when a
spot is available in a class they
want
Registration
•
Would you use push or pull?
•
What would change for interaction with an API or
mobile app?
•
If advisors can see what students are registered for
and change their registration, what changes?
HW8 Overview
•
Apply your generic graph & Dijkstra’s to campus map data
•
Given a list of buildings and walking paths
•
Produce routes from one building to another on the
walking paths
•
Distance in feet, compass directions
•
Command-line interface now
•
GUI in HW9
HW8 Data Format
•
List of buildings (abbreviation, name, loc in pixels)
BAG Bagley Hall (East Entrance) 1914.5103,1708.8816
BGR By George 1671.5499,1258.4333
•
List of paths (endpoint 1, endpoint 2, dist in feet)
1903.7201,1952.4322
1906.1864,1939.0633: 26.583482327919597
1897.9472,1960.0194: 20.597253035175832
1915.7143,1956.5: 26.68364745009741
2337.0143,806.8278
2346.3446,817.55768: 29.685363221542797
2321.6193,788.16714: 49.5110360968527
2316.4876,813.59229: 44.65826043418031
•
(0,0) is in the upper left
MVC in HW8
•
M
o
d
e
l
s
t
o
r
e
s
g
r
a
p
h
,
p
e
r
f
o
r
m
s
D
i
j
k
s
t
r
a
’
s
•
V
i
e
w
s
h
o
w
s
r
e
s
u
l
t
s
t
o
u
s
e
r
s
i
n
t
e
x
t
f
o
r
m
a
t
•
C
o
n
t
r
o
l
l
e
r
t
a
k
e
s
u
s
e
r
c
o
m
m
a
n
d
s
a
n
d
u
s
e
s
v
i
e
w
t
o
s
h
o
w
r
e
s
u
l
t
s
•
V
i
e
w
a
n
d
C
o
n
t
r
o
l
l
e
r
w
i
l
l
c
h
a
n
g
e
i
n
H
W
9
,
b
u
t
M
o
d
e
l
w
i
l
l
s
t
a
y
t
h
e
s
a
m
e
The Model-View-Controller (MVC) pattern is a fundamental design pattern used in building data-driven user applications. It separates the application into three interconnected components - the Model (for data representation), the View (for presenting data to users), and the Controller (for handling user actions). This separation allows for better organization, maintainability, and scalability of software projects.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Section 8: Model-View-Controller Slides adapted from Alex Mariakakis, with material from Krysta Yousoufian and Kellen Donohue
Agenda MVC MVC example 1: traffic light MVC example 2: registration HW8 info
MVC The classic design pattern Used for data-driven user applications Such apps juggle several tasks: Loading and storing the data getting it in/out of storage on request Constructing the user interface what the user sees Interpreting user actions deciding whether to modify the UI or data These tasks are largely independent of each other Model, view, and controller each get one task
Model provides abstraction for data representation, storage, and retrieval What objects does this data represent? What SQL query will get me the data I need?
View asks model for data and presents it in a user-friendly format Would this text look better blue or red? In the bottom corner or front and center? Should these items go in a dropdown list or radio buttons?
Controller listens for the user to change data or state in the UI, notifying the model or view accordingly The user just clicked the hide details button. I better tell the view. The user just changed the event details. I better let the model know to update the data.
Structural Relationship taken from http://msdn.microsoft.com/en-us/library/ff649643.aspx Model View Controller What do you think are the benefits of MVC?
Communication Flow View Model push vs pull Controller
Push vs. Pull Architecture Push architecture As soon as the model changes, it notifies all of the views Pull architecture When a view needs to be updated, it asks the model for new data Advantages for push Guaranteed to have latest data in case something goes wrong later on Advantages for pull Avoid unnecessary updates, not nearly as intensive on the view
Callbacks Synchronous callbacks: Examples: HashMap calls its client s hashCode, equals Useful when the callback result is needed immediately by the library Asynchronous callbacks: Examples: GUI listeners Register to indicate interest and where to call back Useful when the callback should be performed later, when some interesting event occurs
Async Callbacks Asynchronous callbacks: Examples: GUI listeners Register to indicate interest and where to call back Useful when the callback should be performed later, when some interesting event occurs return, so client can finish processing
MVC in Webapps Ruby on Rails and Django enforce MVC In Ruby on Rails: Model: Ruby class defining an object, database backend Controller: Ruby code handling events and callbacks View: html page displays Which does Javascript belong to? Languages enforcing MVC doesn t necessarily guarantee good design; you still have to make good choices
Benefits of MVC Organization of code Maintainable, easy to find what you need Ease of development Build and test components independently Flexibility Swap out views for different presentations of the same data (ex: calendar daily, weekly, or monthly view) Swap out models to change data storage without affecting user
MVC Example Traffic Signal Regulate valid traffic movements Don t let cars run into each other Detect cars waiting to enter intersection Traffic lights to direct car traffic Manual override for particular lights Automatic green for fire trucks Detect pedestrians waiting to cross Pedestrian signals to direct pedestrians External timer which triggers changes at set interval
Traffic Signal MVC Component Model View Controller Regulate valid traffic movements Detect cars waiting to enter intersection Traffic lights to direct car traffic Manual override for particular lights Detect pedestrians waiting to cross Pedestrian signals to direct pedestrians External timer which triggers changes at set interval
Traffic Signal MVC Component Model X View Controller Regulate valid traffic movements Detect cars waiting to enter intersection Traffic lights to direct car traffic Manual override for particular lights Detect pedestrians waiting to cross Pedestrian signals to direct pedestrians External timer which triggers changes at set interval
Traffic Signal MVC Component Model X View Controller Regulate valid traffic movements Detect cars waiting to enter intersection Traffic lights to direct car traffic Manual override for particular lights Detect pedestrians waiting to cross Pedestrian signals to direct pedestrians External timer which triggers changes at set interval X
Traffic Signal MVC Component Model X View Controller Regulate valid traffic movements Detect cars waiting to enter intersection Traffic lights to direct car traffic Manual override for particular lights Detect pedestrians waiting to cross Pedestrian signals to direct pedestrians External timer which triggers changes at set interval X X
Traffic Signal MVC Component Model X View Controller Regulate valid traffic movements Detect cars waiting to enter intersection Traffic lights to direct car traffic Manual override for particular lights Detect pedestrians waiting to cross Pedestrian signals to direct pedestrians External timer which triggers changes at set interval X X X
Traffic Signal MVC Component Model X View Controller Regulate valid traffic movements Detect cars waiting to enter intersection Traffic lights to direct car traffic Manual override for particular lights Detect pedestrians waiting to cross Pedestrian signals to direct pedestrians External timer which triggers changes at set interval X X X X
Traffic Signal MVC Component Model X View Controller Regulate valid traffic movements Detect cars waiting to enter intersection Traffic lights to direct car traffic Manual override for particular lights Detect pedestrians waiting to cross Pedestrian signals to direct pedestrians External timer which triggers changes at set interval X X X X X
Traffic Signal MVC Component Model X View Controller Regulate valid traffic movements Detect cars waiting to enter intersection Traffic lights to direct car traffic Manual override for particular lights Detect pedestrians waiting to cross Pedestrian signals to direct pedestrians External timer which triggers changes at set interval X X X X X X
Traffic Signal Model Stores current state of traffic flow Knows current direction of traffic Capable of skipping a light cycle Stores whether there are cars and/or pedestrians waiting Example TrafficModel
Traffic Signal Views Conveys information to cars and pedestrians in a specific direction Examples CarLight traffic light PedestrianLight pedestrian light
Traffic Signal Controller Aware of model s current direction Triggers methods to notify model that state should change Examples PedestrianButton notifies TrafficModel that there is a pedestrian waiting CarDetector notifies TrafficModel that there is a car waiting LightSwitch enables or disables the light Timer regulates time in some way, possibly to skip cycles
MVC Example Registration Registration system with web interface Advisors create classes, set space, time, restrictions Professors can see who s signed up for their class Students can see available classes and sign up for classes Administrators can place holds on student registration Professors can be notified when a student drops Students can be notified when a spot is available in a class they want
Registration Would you use push or pull? What would change for interaction with an API or mobile app? If advisors can see what students are registered for and change their registration, what changes?
HW8 Overview Apply your generic graph & Dijkstra s to campus map data Given a list of buildings and walking paths Produce routes from one building to another on the walking paths Distance in feet, compass directions Command-line interface now GUI in HW9
HW8 Data Format List of buildings (abbreviation, name, loc in pixels) BAG Bagley Hall (East Entrance) 1914.5103,1708.8816 BGR By George 1671.5499,1258.4333 List of paths (endpoint 1, endpoint 2, dist in feet) 1903.7201,1952.4322 1906.1864,1939.0633: 26.583482327919597 1897.9472,1960.0194: 20.597253035175832 1915.7143,1956.5: 26.68364745009741 2337.0143,806.8278 2346.3446,817.55768: 29.685363221542797 2321.6193,788.16714: 49.5110360968527 2316.4876,813.59229: 44.65826043418031 (0,0) is in the upper left
MVC in HW8 Model stores graph, performs Dijkstra s View shows results to users in text format Controller takes user commands and uses view to show results View and Controller will change in HW9, but Model will stay the same
