L

The MVC Architecture

SMD100
Interactive Systems
Spring 2002

24-Mar-02 © 2001-2002 by David A. Carr 1

L Overview

• Architecture’s place
• Dialog control
• Model-View-Controller Architecture
• Swing and MVC
• Architecture and the Event-Action-State
Paradigm

24-Mar-02 © 2001-2002 by David A. Carr 2

Architecture’s Place

24-Mar-02 © 2001-2002 by David A. Carr 3

 L 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.

24-Mar-02 © 2001-2002 by David A. Carr 4

L 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

24-Mar-02 © 2001-2002 by David A. Carr 5

L Remember - An Interactive
Systems View of the Software

Functional Core (FC)

Dialog Control
Interaction Objects
Window System
Device Drivers

• Architectures are mostly about dialog control

24-Mar-02 © 2001-2002 by David A. Carr 6
 L Software Architecture

• Guides the process of function partition within

the system
• Specifies the system’s division in to layers
• Specifies the interfaces between layers
• Must consider usability and system issues

24-Mar-02 © 2001-2002 by David A. Carr 7

L Interactive System Issues

• Usability issues • System issues

- Multiple representations - Modifiable
- Multi-threading - Portable
- Non-preemptive
- Reachable
- Observable
- Predictable

24-Mar-02 © 2001-2002 by David A. Carr 8

Dialog Control

24-Mar-02 © 2001-2002 by David A. Carr 9

 L Dialog Control

• Map between: • Design requirements

- Functional core - Interleaving
- Interaction objects - Protocol with the functional
• Control interface dynamic core
behavior - General services
+ Undo/redo
• Support incremental
+ Cut/copy/paste
development
+ Help

24-Mar-02 © 2001-2002 by David A. Carr 10

L Design Issues for Interleaving

• Operator-system styles • Among system

- System driven Components
+ System in control - Where is control, FC,
+ Good for casual use of Dialog Controller (DC),
complex system both?
(wizards) + In FC ⇒ feedback like
- User driven rubber banding difficult
+ User in control + In DC ⇒ semantic
+ Flexible, but more feedback on drag-and-
demanding drop difficult
+ Harder to implement

24-Mar-02 © 2001-2002 by David A. Carr 11

L 4 Issues in Dialog/Functional Core

Messaging

• Correct level of • Data Definition

abstraction for data - Implicit by parameter set
transfer - Explicit by data structure
- Separation of FC and ⇒Easier modification
presentation ⇒Allows semantic
⇒No presentation media delegation
⇒In FC units ⇒Eases automatic UI
• Ownership of the data generation
- FC, DC, both? • Data access
- Synchronization need if - Procedural (API)
both - Declarative (Constraints)

24-Mar-02 © 2001-2002 by David A. Carr 12

 L General Services

• Undo/Redo • Cut-Copy-Paste
- History and coordination at - At the semantic (FC) level
all levels - Within or between
applications
- Needs stack of reverse - Data formats are a
commands complication
• Context sensitive help + Clipboard in
presentation units
- Needs system and user
⇒Violates FC level
models
⇒Needs translation
- Must monitor system state ⇒Must operate on
and history presentation, DC, &
- DC controls FC levels

24-Mar-02 © 2001-2002 by David A. Carr 13

Model-View-Controller Architecture

24-Mar-02 © 2001-2002 by David A. Carr 14

L Model-View-Controller

Controller View

Model

24-Mar-02 © 2001-2002 by David A. Carr 15

 L Model-View-Controller

Controller View
• Receive and dispatch events • Draw the model
+ Spatially • Update the model’s display
+ Sequentially • Determine which objects
• Defines dialog are selected.

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

24-Mar-02 © 2001-2002 by David A. Carr 16

L 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

24-Mar-02 © 2001-2002 by David A. Carr 17

L Advantages of the MVC Model

• Flexibility
- Easier to create multiple views of same model

Controller View Controller View

Model

- Easier to retarget toward multiple platforms

- Easier to integrate external events

24-Mar-02 © 2001-2002 by David A. Carr 18

 L Example, Spotfire-like Visualization

24-Mar-02 © 2001-2002 by David A. Carr 19

L 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

24-Mar-02 © 2001-2002 by David A. Carr 20

L 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

24-Mar-02 © 2001-2002 by David A. Carr 21

 L 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

24-Mar-02 © 2001-2002 by David A. Carr 22

L 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

24-Mar-02 © 2001-2002 by David A. Carr 23

Swing and MVC

24-Mar-02 © 2001-2002 by David A. Carr 24

 L 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

24-Mar-02 © 2001-2002 by David A. Carr 25

L Swing Models

• Indirect Communication
- The model “broadcasts” change notifications
- Delegates listen and act appropriately
• Specialization through subclass mechanisms
- Custom field verification, etc.

24-Mar-02 © 2001-2002 by David A. Carr 26

Architecture and the Event-Action-State

Paradigm

24-Mar-02 © 2001-2002 by David A. Carr 27

 L UCM Architecture

• Key to event-action-state paradigm is centrally modeling

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 we
introduce a layer between the UI and the Model
• This is called the UCM architecture
- User interface – Control - Model

24-Mar-02 © 2001-2002 by David A. Carr 28

L UCM Architecture

UI Layer

UI Object UI Object UI Object UI Object

Control Object Control Layer

Model Object Model Object Model Object

Model Layer

24-Mar-02 © 2001-2002 by David A. Carr 29

L UCM Architecture, Notes

• The UC layers together replace the MV

components of the 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

24-Mar-02 © 2001-2002 by David A. Carr 30

 L 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
24-Mar-02 © 2001-2002 by David A. Carr 31

L Questions?

24-Mar-02 © 2001-2002 by David A. Carr 32