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
