Model View Controller

1
Model View Controller

• Advanced GUI concepts

2
Background

• The model-view controller (MVC) architecture was
  developed at the Xerox Palo Alto Research Center
  (PARC).
• MVC was central to the architecture of the
  multi-windowed Smalltalk environment used to
  create the first graphical user interfaces.
• The approach taken was borrowed by the
  developers of the Apple Macintosh and many
  imitators in the years since.
• Unlike the approach of traditional application
  programs.

3
MVC vs. traditional architecture

• Traditional architecture
• Input ? processing ? output
• MVC architecture
• Controller ? model ? view

4
MVC - How It Works

• Based on a subscribe-notify protocol.
• A view must ensure that its appearance reflects
  the state of the model.
• Any number of views can subscribe to the model.

5
MVC - How It Works

• If the model changes, then it notifies each
  subscribed view that it has changed.
• Each view then has the opportunity to update
  itself.
• Multiple, nested, and additional views are
  possible without modifying the model!

6
MVC Schematic
Display
View
Model
Controller
Keyboard Mouse Etc.
7
Controller tasks

• Receive user inputs from mouse and keyboard
• Consult the view to determine which objects are
  manipulated by the user
• Update the model accordingly
• For example, the controller detects that a button
  has been pressed and informs the model that the
  button state has changed

8
Model tasks

• Store and manage data elements, such as state
  information
• Respond to queries about its state
• Respond to instructions to change its state
• For example, the model for a radio button can be
  queried to determine if the button is pressed

9
View tasks

• Implements a visual display of the model
• For example, a pressed button has a coloured
  background, appears in a raised perspective, and
  contains an icon and text the text is rendered
  in a certain font in a certain colour

10
MVC Concepts multiple views

• Any number of views can subscribe to the model

View 1
Check Box Model
View 2
View 3
11
MVC Concepts - model changes

• What happens when the model changes?
• E.g., a button is pressed (the state of the
  button has changed!)
• The model must notify the view
• The view changes the visual presentation of the
  model on the screen

12
Lightweight notification
3) Request
CONTROLLER
VIEW
4) Data
1) Update
2) Notify
MODEL

• The Controller tells the Model to update its
  data.
• For each View, the Model notifies View of a
  change.
• Views that need to update ask the Model for data.
• The Model sends the data to the requesting Views.

13
Stateful notification
CONTROLLER
VIEW
1) Update
2) Notify
MODEL

• The Controller tells the Model to update its
  data.
• For each View, the Model notifies the View of a
  change.
• The notification includes all necessary
  information for the View to update itself.

14
Lightweight vs. Stateful notification

• Lightweight notification
• A single event instance can be used for all
  notifications
• Desirable when notifications are frequent
• Stateful notification
• A different event instance for each notification
• Desirable for complex models

15
Benefits of MVC Architecture

• Improved maintainability
• Due to modularity of software components
• Promotes code reuse
• Due to OO approach (e.g., subclassing,
  inheritance)
• Model independence
• Designers can enhance and/or optimize model
  without changing the view or controller
• Plugable look and feel
• New LF without changing model
• Multiple views use the same data

16
MVC and Swing

• Swing designers found it difficult to write a
  generic controller that didnt know the specifics
  about the view
• So, they collapsed the view and controller into a
  single UI (user interface) object known as a
  delegate (the UI is delegated to this object)
• This object is known as a UI delegate

17
MVC and Swing (2)
Swing component
Display
UI delegate
View
Model
Controller
Keyboard Mouse Etc.
18
M - Swing Models

• In Swing, many models exist as interfaces
• E.g., ButtonModel, BoundedRangeModel,
  ComboBoxModel, ListModel, ListSelectionModel,
  TableModel, Document
• The interface is implemented in model classes
• Usually there is a default model class that is
  automatically associated with a component (whew!)
• E.g., DefaultButtonModel implements ButtonModel
• E.g, AbstractDocument implements Document
  (PlainDocument is a subclass of AbstractDocument)

19
Ignoring models

• Many applications need not worry about models
• Most component classes provide the model API
  directly
• Example from JSlider class
• This way an application can simply do

public int getValue() return
getModel().getValue()
JSlider slider new JSlider() int value
slider.getValue() //what's a model anyway?
20
Example Program
DemoTable2.java
Instead of passing the data directly to the
JTable object, we create a data model, pass the
data to the model, then pass the model to the
JTable object.
21
Example Program
DemoInputValidation3.java
JTextFields default data model is PlainDocument.
We can create a custom data model for a
JTextField by creating our own data model and
substituting it for PlainDocument
22
VC Swing Views and Controllers

• In Swing, the term look and feel (LF) is common
• The look is the view
• The feel is the controller
• In practice, the view and controller parts of MVC
  are very tightly connected
• Swing combines the view and controller into a
  single entity known as a UI delegate
• Advantage combining the view and controller
  allows the appearance and behaviour (LF) of a
  component to be treated as a single unit, thus
  facilitating changes to the UI
• This is known as plugable look and feel

23
Example Program
DemoLookAndFeel.java
24
Example Program