Information Technology

Applications Programming

LECTURE 9
MVC Framework

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

MVC Framework
Learning Objectives
At the end of the lecture, you should be able to:

! Describe the MVC pattern, including the steps required to

implement it
! Describe the Observer pattern and its advantages over MVC
! Describe how to build a simple GUI using the Observer
pattern

Fischer Chapters 16-17

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

MVC – Model View Controller

The Model View Controller architecture is used for most
(modern) GUI systems.
It separates an application into 3 layers:

Model - Data

View – Display elements

Controller - Mechanism for adding new data and

controlling what data is displayed

! This allows:
– The GUI to be separate from the data
– The control mechanism to be separate from the GUI
– Multiple views to be updated separately
– Low coupling & high cohesion
INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

1
 MVC continued
Model View Controller

! Windows (extends JFrame), panels (extends JPanel), buttons

(extends JButton) etc are all part of the View layer
! The Model layer handles the data ie the Domain Classes
! The Controller layer has action listeners (extends Action).

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

Basic Communication
The user clicks a button on a window

! This generates an event in 2.Call

the View layer Model

! The Controller receives the 4.Query

event and calls the Model

! The Model calls the Controller

update() method in View

! update() gets data from 1.Event
3.Update

Model and updates the

View
View

Adapted from material supplied

courtesy of Dr Robert Rist, UTS

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

MVC Communication

The Model only knows that Views exist

! When values change, the Model simply calls updateViews(),

which calls update() for each View
! The update() method in View retrieves the new data from the
Model and displays it

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

2
Model Code Schema

A Model has a list of views that it updates

class Model
{
private List<View> views;
private void update()
{ for each view
view.update();
}
}

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

Controller Code Schema

The Controller responds to the events generated by View

class Listener extends Action (or ActionListener)

{
private Model model;
public void actionPerformed(ActionEvent e)
{ model.method()
}
}

! The Controller can access View to get newly entered values or change the
View eg hide a window

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

View Code Schema

The View calls the Model for new values

class View
{
private Model model;
public void update()
{ // get model data
// update view
}
}

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

3
Quick Quiz

! What does MVC stand for ?

! What is the purpose of MVC?

! Do the Model and View know about each other ?

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

Building the System

The application should be split into layers
The process can be summarised as MMMVCVCVC

! The process is
– Create the Model layer
– Create the first View and pass the Model layer to it
– For each View object
• Create a Controller and pass the Model object
• Set the Controller to receive the event(s)
• Add it to the Model
• Create the next View object
– Each Controller object stores the Model object

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

MVC Diagram

Model

view view
Controller

model model

View
model model model

! Solid line means creates, dashed line means send a reference.

The name shows the parameter passed.

! Diagram courtesy Dr Robert Rist, UTS

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

4
MVC Summary
Implement the Model; implement the View; Create the
Controller; Assign the Controller to the View

! Implement the Model

! Implement the View
– Decide which GUI components to use eg buttons etc
– Decide how to arrange the GUI components
– Decide which layout manager(s) to use
! Create a Controller (action listener)
• Define the actionPerformed() method ie what must happen
when the event occurs
• Use the ActionEvent object to determine information about
the event
! Assign the Controller to the View, that is, assign the
action listener to the required GUI component(s)
INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

User Interaction Example

Button generates an event

ActionListener:actionPerformed() method is called

! User presses a button

! Button creates an event (which contains information about
what happened)
! Button calls the actionPerformed() method of the listener
assigned to itand passes the event object as an argument to
the actionPerformed() method
! The actionPerformed() method is executed, that is, your code
is executed to perform the required task

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

Quick Quiz

! What are the 4 main steps to create the MVC architecture ?

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

5
Problems with MVC

The goal of the MVC pattern is to separate the Model and View
by using a Controller

! But as we have just seen in the MVC diagram there is still a

relationship between View and Model
! So if we add another View, the Model needs to be updated to
handle it.
! This is not what we want. We need to decouple View and
Model

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

Observer Pattern

The Observer Pattern is a design pattern

Model knows about the Observer not the View

Controller

<Interface>
Model Observer

View

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

Observer Pattern Schema

! Here is the Observer Interface:

public interface Observer

{
public void update();
}
! View inherits from Observer and effects update():

public class View implements Observer

{
private Model model;
public void update()
{
model.getData();
//show the new data
}
}
INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

6
Observer Pattern Schema
! Here is the Model:

public class Model

{
private LinkedList<Observer> views =
new LinkedList<Observer>();
public void attach(Observer o)
{ add o to list }
public void detach(Observer o)
{ remove o from list }
private void updateViews()
{ for each view in list
view.update();
}
}

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

Quick Quiz
! What is the problem with the MVC pattern ?

! How does the Observer pattern solve the problem with MVC ?

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

Non MVC Dice Application

This is an ad hoc solution – not robust or scalable

! classes: MyWindow, MyPanel, Listener & Dice

! Dice:roll is not stored as an attribute

! Listener updates the window data
! Dice:roll is different each time roll() is called – cannot update
multiple windows with the roll value

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

7
MVC Dice Application
Scalable solution – can be used with multiple windows

! Classes: MyWindow, MyPanel, Listener, Dice, MyObserver &

Updater

! Dice: roll is stored as an attribute, accessor is used to get the

value
! Listener DOES NOT update the window data
! Uses a package
! Dice inherits from Updater, roll() method calls updateViews()
! MyPanel inherits from MyObserver and implements update()
! MyPanel attaches to the Dice model (as an observer)

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

Implementing Observer

There are 4 steps to implementing the Observer pattern:

All Models inherit from Updater

All procedures in models call updateViews()

All panels inherit from MyObserver

All panels attach() to model(s)

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F

Key Concepts
Summary
! MVC – Model View Controller
! MVC separates the View from the Model
! Building the system: MMMVCVCVC
! MVC has a structural problem: View and
Model have a 2 way relationship
! Observer pattern: Model knows about
Observer not View
! 4 steps:
Models inherit from Updater
Model procedures call updateViews()
All panels inherit from MyObserver
All panels attach() to model(s)

INSEARCH CRICOS provider code: 00859D I UTS CRICOS provider code: 00099F