Software System/Design & Architecture

Eng.Muhammad Fahad Khan Assistant Professor Department of Software Engineering

Todays lecture Model View Controller (MVC)

Copyright 2012 @ M.Fahad Khan

Model-View-Controller Pattern MVC variants examples Responsibilities of MVC Advantages of MVC

Copyright 2012 @ M.Fahad Khan

Question Answer Session Lecture 7

Copyright 2012@ M.Fahad Khan

MVC
Copyright 2012 @ M.Fahad Khan

What is MVC?
ModelViewController (MVC) is an architecture that separates the representation of information from the user's interaction with it. The model consists of application data and business rules, and the controller mediates input, converting it to commands for the model or view. A view can be any output representation of data, such as a chart or a diagram. Multiple views of the same data are possible, such as a pie chart for management and a tabular view for accountants.

Copyright 2012 @ M.Fahad Khan

Model-View-Controller Pattern
MVC consists of three kinds of objects: Model the application object View UI (screen presentation) Controller defines the way the UI reacts to user inputs

Copyright 2012 @ M.Fahad Khan

Page 7

Copyright 2012 @ M.Fahad Khan

10 Million Question

Copyright 2012 @ M.Fahad Khan

Component interactions

In addition to dividing the application into three kinds of components, the MVC design defines the interactions between them. A controller can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). It can send commands to the model to update the model's state (e.g., editing a document). A model notifies its associated views and controllers when there has been a change in its state. This notification allows the views to produce updated output, and the controllers to change the available set of commands. A passive implementation of MVC omits these notifications, because the application does not require them or the software platform does not support them. A view requests from the model the information that it needs to generate an output representation.

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Component interactions
Model. The model manages the behavior and data of the application domain, responds to requests for information about its state (usually from the view), and responds to instructions to change state (usually from the controller). View. The view manages the display of information. Controller. The controller interprets the mouse and keyboard inputs from the user, informing the model and/or the view to change as appropriate.

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

The Controller
Users interact with the controller. It interprets mouse movement, clicks, keystrokes, etc Communicates those activities to the model eg: delete row, insert row, etc Its interaction with the model indirectly causes the View(s) to update Controllers are a little more complicated. They act as an intermediary between the view objects and the model objects. When a value changes in a model, the controller is responsible for updating the view. Likewise, the controller knows when theres some user input and can update the model data accordingly. Controller objects are often responsible for setup tasks. The models and views must be loaded and initialized at some point, and the central role of the controller makes it a natural candidate for this work.
Copyright 2012 @ M.Fahad Khan

Page 15

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

The ControllerExample
To give you an idea of how this works, imagine an application that plots stock prices: 1. The user clicks a button (view) to refresh the graph. This action is sent to the controller. 2. The controller, in turn, tells the model to load new stock data. 3. The model opens a network connection and begins downloading data. 4. After the stock data is loaded, the model notifies the controller that new data has arrived. 5. The controller passes the new data onto the view, and the user sees the results.

Copyright 2012 @ M.Fahad Khan

Page 18

The Model
The MODEL contains the data Has methods to access and possibly update its contents. Often, it implements an interface which defines the allowed model interactions. Implementing an interface enables models to be pulled out and replaced without programming changes. Models are your applications heart and soul because theyre responsible for managing its data. Unlike views, models know nothing about the actions the user is performing or what theyre seeing on the display. A models only function is to manipulate and process the users data within the application. Models often implement internal logic that provides these basic behaviors.

Copyright 2012 @ M.Fahad Khan

Page 19

Copyright 2012 @ M.Fahad Khan

The Model Example

For example, whenever you use the built-in Contacts application, youre working with model objects that represent the people in your address book. If you update your applications settings, youre modifying another kind of model object. An application that downloads stock data from the Internet would use a model object to store the price history.

Copyright 2012 @ M.Fahad Khan

Page 21

Copyright 2012 @ M.Fahad Khan

The View
The VIEW provides a visual representation of the model. There can be multiple views displaying the model at any one time. For example, a companies finances over time could be represented as a table and a graph. These are just two different views of the same data. When the model is updated, all Views are informed and given a chance to update themselves.

Copyright 2012 @ M.Fahad Khan

Page 23

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

The View.(contd)
You know all those buttons, scrolling lists, web browsers, and everything else that appears on your iPhone screen? Those are all views. Views know how to present your applications data. Some views also know how to react to user input. In many applications, youll create your own views for displaying specific data. For example, theres no standard widget for displaying stock graphs, so if you want to do that, youll have to come up with your own solution.

Copyright 2012 @ M.Fahad Khan

Page 26

Copyright 2012 @ M.Fahad Khan

The View.(contd)
Likewise, many designers and developers want to customize the look of their application. Whether your motivation is product branding or just wanting to stand out in a crowd, creating a unique look for your app involves building new views based on standard UIView and UIControl classes.

Copyright 2012 @ M.Fahad Khan

Page 28

Example

Model-View-Controller talks about the three parts that most websites can be broken down into Controller Entry point of the application. Handles IO. PHP files View Templates displayed to the user. HTML files with PHP Model Functions that interact with the database or perform complex operations. SQL queries in PHP

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

DETAILED VISUAL EXAMPLE OF MVC

Copyright 2012 @ M.Fahad Khan

Page 32

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

Page 44

Why use MVC?

Makes it very easy to have multiple different displays of the same information. For example: a graph and a table could both display and edit the same data. Essentially provides greater control over the UI and its behaviour.

Copyright 2012 @ M.Fahad Khan

Page 45

Multiple different displays

ModelViewController (MVC) is an architecture, for software development

This architecture separates the application logic that the user sees from the user interface. It improves the software development cycle in terms of quality, testing, extensibility and maintenance. The model is manages information and user notifications when information changes. The model is domain-specific to the data which the application operates upon. Domain logic adds functionality to the data. When a model changes its state, it notifies the associated views so they can be updated.

Copyright 2012 @ M.Fahad Khan

Page 47

Copyright 2012 @ M.Fahad Khan

MVC Communication Rules

Model = What your application is (but not how it is displayed) Controller = How your Model is presented to the user (UI logic) View = Your Controllers minions. Contollers can always talk directly to their Model. Controllers can also talk directly to their View. The Model and View should never speak to each other. Communication between the View and Controller is blind and structured. The Controller can drop a target on itself, then hand out an action to the View.

Copyright 2012 @ M.Fahad Khan

Page 49

MVC Communication Rules..(cntd..)

The View sends the action when things happen in the UI. Sometimes the View needs to synchronize with the Controller. The Controller sets itself as the Views delegate. The delegate is set via a protocol (i.e. its blind to class). Views do not own the data they display. So, if needed, they have a protocol to acquire it. Controllers are almost always that data source (not Model!). Controllers interpret/format Model information for the View.

Copyright 2012 @ M.Fahad Khan

Page 50

MVC Communication Rules..(cntd..)

The Model is (should be) UI independent and should NEVER talk directly to the Controller. If the Model has information (e.g. an update) it uses a radio station like broadcast mechanism that Controllers (or another Model) can tune in to for stuff theyre interested in. A View might tune in to a station, but probably not to a Models. Stick to these rules when building your application and you will have a much better chance of understanding the monster youve created(!).

Copyright 2012 @ M.Fahad Khan

Page 51

Copyright 2012 @ M.Fahad Khan

MVC Variants

Copyright 2012 @ M.Fahad Khan

Three Tier Model

Copyright 2012 @ M.Fahad Khan

Page 55

N tier Architecture
3 Tier architecture:
Presentation Layer Presentation Layer is the layer responsible for displaying user interface. Business Tier Business Tier is the layer responsible for accessing the data tier to retrieve, modify and delete data to and from the data tier and send the results to the presentation tier. This layer is also responsible for processing the data retrieved and sent to the presentation layer. - BLL and DAL Often this layer is divided into two sub layers: the Business Logic Layer (BLL), and the Data Access Layers (DAL). Business Logic Layers are above Data Access Layers, meaning BLL uses DAL classes and objects. DAL is responsible for accessing data and forwarding it to BLL. Data Tier Data tier is the database or the source of the data itself.

Common mistakes tightly coupling layers in technology and writing business logic in presentation tier
Copyright 2012 @ M.Fahad Khan

Page 56

Copyright 2012 @ M.Fahad Khan

Advantages of MVC

Page 58

Copyright 2012 @ M.Fahad Khan

Advantages of MVC
Separating Model from View (that is, separating data representation from presentation)
easy to add multiple data presentations for the same data facilitates adding new types of data presentation as technology develops. Model and View components can vary independently enhancing maintainability, extensibility, and testability.

The main advantage of adopting a design pattern like MVC is that it allows the code in each unit to be decoupled from the others, making it more robust and immune to changes in other code.

Copyright 2012 @ M.Fahad Khan

Page 60

Advantages of MVC design Pattern

Separating Controller from View (application behavior from presentation) - 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 action on the Controller to application functions on the Model.

Copyright 2012 @ M.Fahad Khan

Page 61

Consequences or Benefits
We make changes without bringing down the server. We leave the core code alone We can have multiple versions of the same data displayed We can test our changes in the actual environment. We have achieved separation of concerns

Copyright 2012 @ M.Fahad Khan

Page 62

Summary of MVC
Model - the model represents enterprise data and the business rules that govern access to and updates of this data View -the view renders the contents of a model. It accesses enterprise data through the model and specifies how that data should be presented Controller - the controller translates interactions with the view into actions to be performed by the model

Copyright 2012 @ M.Fahad Khan

Page 63

More Information
Copious amounts of information on MVC pattern available on Internet. Examples of MVC (Delegate style) all throughout Swing see JDK doc for details Hope the overview was useful to you! More tutorials, Source-code, etc available at our company web site, www.SocketSoftware.com We consult and develop applications in many languages, including Java and Microsoft.NET Australian based, Programming world-wide

Copyright 2012 @ M.Fahad Khan

Page 64

References
Home of the patterns community
http://hillside.net/

Adaptability home page

http://www.utdallas.edu/~chung/adaptability.html

Quickest road to understanding the concepts non-software examples

http://www.agcs.com/supportv2/techpapers/patterns/papers/tutn otes/index.htm The Sun location for J2ee http://java.sun.com/j2ee/ Suns Java Pet store example used http://jboss.utdallas.edu:8080/estore
Copyright 2012 @ M.Fahad Khan

Page 65

Assignment 5
Design your own MVC Model for software Product .

Due Date : 19 Nov , 2012

COMING UP NEXT
Architecture-Based Testing and Analysis Software Architects: People and Teams

Copyright 2012 @ M.Fahad Khan

Copyright 2012 @ M.Fahad Khan

69