1. Model-View-ControllerModel-View-Controller
ArchitectureArchitecture
Hector Raphael MojicaHector Raphael Mojica

2. What is MVC?What is MVC?
 Architectural design pattern whichArchitectural design pattern which
works to separate data and UI for aworks to separate data and UI for a
more cohesive and modularizedmore cohesive and modularized
systemsystem

3. What is MVC?What is MVC?
 Model represents the data modelModel represents the data model
• ““Manages behavior and data of the applicationManages behavior and data of the application
domain”domain”
 View represents the screen(s) shown toView represents the screen(s) shown to
the userthe user
• ““Manages the graphical and/or textual outputManages the graphical and/or textual output
to the portion of the bitmapped display that isto the portion of the bitmapped display that is
allocated to its application”allocated to its application”
 Controller represents interactions from theController represents interactions from the
user that changes the data and the viewuser that changes the data and the view
• ““Interprets the mouse and keyboard inputsInterprets the mouse and keyboard inputs
from the user, commanding the model and/orfrom the user, commanding the model and/or
the view to change as appropriate” (Burbeck)the view to change as appropriate” (Burbeck)

4. How did it come about?How did it come about?
 Presented by Trygve Reenskaug inPresented by Trygve Reenskaug in
19791979
 First used in the Smalltalk-80First used in the Smalltalk-80
frameworkframework
• Used in making Apple interfaces (LisaUsed in making Apple interfaces (Lisa
and Macintosh)and Macintosh)

5. How does it work?How does it work?
 User inputs a commandUser inputs a command
 Controller handles input and updatesController handles input and updates
model or changes the viewmodel or changes the view
 View, which relies on model to showView, which relies on model to show
data to user, updates if necessarydata to user, updates if necessary
 Rinse and RepeatRinse and Repeat

6. What is MVC?What is MVC?

7. What’s the point?What’s the point?
 Provides a logical structure forProvides a logical structure for
heavily interactive systemheavily interactive system
 Adheres to good engineering designAdheres 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

8. What’s the point?What’s the point?
 Just plain easier (even if it doesn’t lookJust plain easier (even if it doesn’t look
it)!it)!
• Study shows that most introductory CSStudy shows that most introductory CS
college students tend to clump a UI programcollege students tend to clump a UI program
into one big monolithic main classinto one big monolithic main class
• Unfamiliarity stems from student tendency toUnfamiliarity stems from student tendency to
program according to styles presented inprogram according to styles presented in
textbooks and not being introduced to designtextbooks and not being introduced to design
principles early (Morse)principles early (Morse)

9. ConclusionConclusion
 MVC is a soundMVC is a sound architectural designarchitectural design
for almost any GUI applicationfor almost any GUI application

10. ReferencesReferences
 WikipediaWikipedia
 Fox, Christopher.Fox, Christopher. Introduction to SoftwareIntroduction to Software
Engineering DesignEngineering Design. Boston: Pearson, 2006.. Boston: Pearson, 2006.
 Burbeck, Steve. Applications Programming inBurbeck, Steve. Applications Programming in
Smalltalk-80(TM): How to use Model-View-Smalltalk-80(TM): How to use Model-View-
Controller (MVC).Controller (MVC).
http://st-www.cs.uiuc.edu/users/smarch/st-docs/mvchttp://st-www.cs.uiuc.edu/users/smarch/st-docs/mvc
 Morse, Scot F.Morse, Scot F. Introducing Application Design andIntroducing Application Design and
Software Engineering Principles in IntroductorySoftware Engineering Principles in Introductory
CS Courses: Model-View-Controller JavaCS Courses: Model-View-Controller Java
Application Framework.Application Framework.