the mvc architecture

Jan-24-05 © 2001-2005 by David A. Carr 1 L

INSTITUTIONEN FÖRSYSTEMTEKNIK

LULEÅ TEKNISKA UNIVERSITET

The MVC Architecture

SMD158

Interactive Systems

Spring 2003


Overview

• Architecture’s place

• Dialog control

• Model-View-Controller Architecture

• Swing and MVC

• Architecture and the Event-Action-State Paradigm




Architecture’s Place


What is a Software Architecture?

A method by which software systems are decomposed into components and a specification of how these components interact.

The internal organization of software systems.


Remember - The Software Engineering Life Cycle

• Six phases:- Requirements definition- Specification- Implementation- Testing- Installation- Maintenance

• Software architecture is concerned with:- The specification phase- Internal design


Remember - An Interactive Systems View of theSoftware

Functional Core (FC) Dialog Control

Interaction Objects Window System

Device Drivers

• IS architecture is mostly about dialog control


Software Architecture

• Guides the process of function partition within thesystem

• Specifies the system’s division in to layers

• Specifies the interfaces between layers

• Must consider usability and system issues


Why is Architecture Important?

• Consider a dialog box for a long operation (e.g.,printing)

• If the need to cancel is discovered late,- How much extra work is it?

- What is it’s impact on the system design?

• You want to avoid: “We can’t do that!”- Decoupling patterns


Architecture without Cancel


Adding the Cancel Capability


Interactive System Issues

• Usability issues- Multiple representations

- Multi-threading

- Non-preemptive

- Reachable

- Observable

- Predictable

• System issues- Modifiable

- Portable




Dialog Control


Dialog Control

• Maps between:- Functional core

- Interaction objects

• Control interface dynamicbehavior

• Support incrementaldevelopment

• Design requirements- Interleaving

- Protocol with the functionalcore

- General services

+ Undo/redo

+ Cut/copy/paste

+ Help


Design Issues for Interleaving

• Operator-system styles- System driven

+ System in control

+ Good for casual use ofcomplex system (wizards)

- User driven

+ User in control

+ Flexible, but moredemanding

+ Harder to implement

• Among system Components- Where is control, FC, Dialog

Controller (DC), both?+ In FC ⇒ feedback like

rubber banding difficult+ In DC ⇒ semantic

feedback on drag-and-drop difficult


4 Issues in Dialog/Functional Core Messaging

• Correct level of abstractionfor data transfer

- Separation of FC andpresentation

⇒No presentation media

⇒In FC units

• Ownership of the data- FC, DC, both?

- Synchronization need if both

• Data Definition- Implicit by parameter set

- Explicit by data structure

⇒Easier modification

⇒Allows semanticdelegation

⇒Eases automatic UIgeneration

• Data access- Procedural (API)

- Declarative (Constraints)


General Services

• Undo/Redo- History and coordination at all

levels

- Needs stack of reversecommands

• Context sensitive help- Needs system and user

models

- Must monitor system stateand history

- DC controls

• Cut-Copy-Paste- At the semantic (FC) level

- Within or between applications

- Data formats are a complication

+ Clipboard in presentationunits⇒Violates FC level⇒Needs translation

⇒Must operate onpresentation, DC, & FClevels




Model-View-Controller Architecture


Model-View-Controller

Model

Controller View


Model-View-Controller

Model• Notifies all views when changed• Defines connection to controller• Cut, Copy, Paste• Undo, Redo• Help

View• Draw the model• Update the model’s display• Determine which objects are selected.

Controller• Receive and dispatch events + Spatially + Sequentially• Defines dialog


Advantages of the MVC Model

• Separation of concerns- Controller

+ Handles input and sequencing, i.e., dialog+ Interacts tightly with View for feedback

• Quick response for drag-and-drop, rubber-banding, etc.+ Updates Model+ Can do limited validity checking, called semantic delegation

- View+ Connection with Controller for feedback+ Connection with Model for back-end data

- Model+ Allows modification of data via user or external events


Advantages of the MVC Model

• Flexibility- Easier to create multiple views of same model

- Easier to retarget toward multiple platforms

- Easier to integrate external events

Model

Controller View Controller View


Example, Spotfire-like Visualization


Example, Spotfire-like Visualization

• Model ⇒ Data to be visualized

• First, VC pair- View

+ Scatter plot with zoom and pan

+ Visual aspects of controls for filtering

- Controller+ View manipulation, zoom, pan ⇒ View

+ Logic for filtering ⇒ Model


Adding Details-on-Demand

• Add another VC pair

• View- List the details of a data point

• Controller- Scrolling details

• Selection of point- In First, controller

- Communication through model


Adding, More Scatter Plots

• If filters are independent,- Add more VC pairs that are copies of the first VC pair

• If there is only one set of filters- Split the first VC pair into two

+ Scatter plot

+ Filter controls

- Now, replicate Scatter Plot VC


Modifications to MVC

• Often the view and controller are combined- Microsoft’s Document-View architecture

- Swing’s Model-Delegate architecture

• Reasons- Views and controllers are usually tightly coupled

- Views seldom existed alone




Swing and MVC


Model-Delegate Architecture

• Swing implements a derivative MVC architecture call the Model-Delegate architecture

• Characteristics:- View+Controller ⇒ UI Delegate- For each widget a UI Delegate is implemented- For each Delegate there are several pluggable look and feel

styles- Associated with each Delegate is a corresponding Model

Class- Communication between Delegate and Model components is

indirect


Swing Models

• Indirect Communication- The model “broadcasts” change notifications

- Delegates listen and act appropriately

• Specialization through subclass mechanisms- Custom field verification, etc.




Architecture and the Event-Action-State Paradigm


UCM Architecture

• Key to event-action-state paradigm is centrallymodeling interface state

• With MVC state is either in the model or the controller(s)• Most architectures combine the View and Controller,

i.e. a User Interface layer• By centralizing Model interfaces with the UI and

centralizing interactions between UI components weintroduce a layer between the UI and the Model

• This is called the UCM architecture- User interface – Control - Model


UCM Architecture

Control Object

Model Object Model Object Model Object

UI Object UI Object UI ObjectUI Object

UI Layer

Control Layer

Model Layer


UCM Architecture, Notes

• The UC layers together replace the VC components ofthe MVC architecture- Multiple view require multiple UC components

• While UCM theoretically requires a global state model,independent functions can be decoupled- Parallel (AND-states) don’t have to implemented together

- Events can be use for communication

• Single model is basis


Summary

• Dialog control- Implements UI style, sequencing, & interface-application communication

• Software architecture is used:- To map functions to components- Simplify design and implementation- Based on separation of concerns

• MVC and its variants are:- Used in all modern UI systems- Separates interface issues from the application data- Directly supported by Swing

• UCM can be thought of as:- Combining the VC and then splitting to use a global dialog control model


Questions?

the mvc architecture

Documents