4. PROBLEM DEFINITION
• User interfaces are especially prone to change
requests.
• Different user place conflicting requirements on the
user interface.
• Building a system with the required flexibility is
expensive and error-prone if the user interface is
tightly interwoven with the functional core.
5. PROBLEM DEFINITION
• The following forces influence the solution
– The same information is presented differently in different
windows, for example, in a bar or pie chart.
– The display and behavior of the application must reflect
data manipulations immediately.
– Changes to the user interface should be easy, and even
possible at run-time.
– Support different ‘look and feel’ standards or porting the
user interface should not affect code in the core of the
application.
7. What is MVC?
• MVC - Model-View-Controller - is a design pattern
for the architecture of web applications.
• It is a widely adopted pattern, across many languages
and implementation frameworks, whose purpose is to
achieve a clean separation between three components
of most any web application.
8. MVC Architecture
• The Model represents the structure of the data in the
application, as well as application-specific operations on
those data.
• The View renders the contents of a model. It specifies
exactly how the model data should be presented.
• The Controller translates user actions (mouse
motions, keystrokes, words spoken, etc.) and user input
into application function calls on the model, and selects
the appropriate View based on user preferences and
Model state.
9. Cond…
The MVC architecture divides an application (code)
required to manage a user interface into three parts:
• Data components maintain the raw application data
and application logic for the interface –model.
• Presentation components provide the visual
representation(s) of the data --view (usually to the
screen).
• Input-processing components handle input from the
user by modifying the model--controller.
11. MVC Actions
• Model
-- Notify view about data updates
• View
--Change rendering as needed
• Controller
--Select view to be rendered based on
event notifications and method invocations
12. MVC Interaction Order
1. User performs action, controller is notified.
2. Controller may request changes to model.
3. Controller may tell view to update.
4. Model may notify view if it has been modified.
5. View may need to query model for current data.
6. View updates display for user.
6
4 View
5
Model 3
1
2
Controller
13. MVC Pattern – Model
• Contains application & its data
• Provide methods to access & update data
• Interface defines allowed interactions
• Fixed interface enable both model & GUIs to be easily pulled out and
replaced
• Examples:-
– Text documents
– Spreadsheets
– Web browser
– Video games
14. MVC Pattern – View
Provides visual representation of model.
Multiple views can display model at same time.
When model is updated, all its views are informed & given
chance to update themselves.
15. MVC Pattern – Controller
• Users interact with the controller
• Interprets mouse movement, keystrokes, etc.
• Communicates those activities to the model
• Interaction with model indirectly causes view(s) to
update
16. model responsibilities
• store data in properties
• implement application methods
(e.g., ClockModel.setTime() or ClockModel.stop())
• provide methods to register/unregister views
• notify views of state changes
17. • view responsibilities
• create interface
• update interface when model changes
• forward input to controller
• controller responsibilities
• translate user input into changes in the model
• if change is purely cosmetic, update view
18. Advantages of MVC
Separating Model from View (that is, separating data
representation from presentation).
More robust
Easier to maintain
permits run-time selection of appropriate Views
based on workflow, user preferences, or Model state.
Separating Controller from Model (application behavior
from data representation)
allows configurable mapping of user actions on the
Controller to application functions on the Model.
19. Easy to add multiple data presentations for the same
data.
• Multi-view applications
(overview+detail, brushing,…)
• Different users
• Different UI platforms (mobile, client-
side, server-side,…)
• Alternate designs
GUI
Model
GUI
Model
GUI
20. Cond…
Facilitates adding new types of data presentation as
technology develops.
Model and View components can vary independently
enhancing maintainability ,extensibility, and
testability.
allows user interfaces (views) to be easily
added, removed, or changed
allows response to user input (controller) to be easily
changed
21. COND…
changes can happen dynamically at runtime
promotes code reuse (e.g., one view might be used
with different models)
allows multiple developers to simultaneously
update the interface, logic, or input of an
application without affecting other source code.