TOPIC E – Introduction to

Model View Controller

1
 Outline
 Separation of Concerns
 Introduction to Model View Controller (MVC)
 MVC Examples
 MVC Exercises

2
 Separation of Concerns
 Separation of concerns (SoC) is a
design principle for separating a computer
program into distinct sections such that
each section addresses a separate
concern.
 A concern is a set of information that

affects the code of a computer program

 A related principle is

“Single Responsibility Principle”

3
The Basic Concept
 Each module or component should have
a single responsibility
 Each method in a class should do one
distinct calculations (i.e calculate GPA)
 Following this concept means that
concerns remain separated (i.e
Separation of Concerns)

4
Is this new?
 Not Really.
 This is very related to the Encapsulation
Design Principle
 Encapsulation: group the data and the
methods that operate on the data in the
same module (or Class)

5
 How does this relate to User
Interface Design?
 In designing User Interfaces, we have
the following three main components:
1) The Data (i.e a student course grades)
2) The User Interfaces/Screens (i.e how you
want to represent the data to the users)
3) The Logic (i.e the rules that governs the GPA
calculations)

Data = Model
User Interfaces = View
Logic = Controller
6
Model View Controller (MVC)
 Software architecture pattern that
separates the model, the user interface
and control logic of an application in
three distinct components.
 MVC proposes the construction of three
distinct components. One side for the
representation of information, and on the
other hand for user interaction.

7
But Why?
 The main purpose of MVC is to:
 Facilitate Application Maintenance
 Reduce effort to develop new features

 Provides a logical and simple code structure

 Simplifies code comprehension

 Enables the presentation of the same

information in different ways for different

users

8
History 101
 This model is not new, it was introduced
in 1987 in the design of the Smalltalk
programming language.
 With the boom of Web applications, it
has proven to be a programming mode
that fits quite well with the internet.
 Usually, the model and the controller run
server side, and the view on the client
side.
9
 MVC Example
 We are going to create a Student
object acting as a model.
 StudentView will be a view class
which can print student details on
console.
 StudentController is the controller
class responsible to store data in
Student object and update view
StudentView accordingly.

 Follow the following 5 steps

10
 Step 1 – Create the Model
public class Student {
private String rollNo;
private String name;

public String getRollNo() {

return rollNo;
}

public void setRollNo(String rollNo) {

this.rollNo = rollNo;
}

public String getName() {

return name;
}

public void setName(String name) {

this.name = name;
}
}
11
 Step 2 – Create the View

public class StudentView {

public void printStudentDetails(String studentName, String studentRollNo){
System.out.println("Student: ");
System.out.println("Name: " + studentName);
System.out.println("Roll No: " + studentRollNo);
}
}

12
 Step 3 – Create the Controller
public class StudentController {
private Student model;
private StudentView view;

public StudentController(Student model, StudentView view){

this.model = model;
this.view = view; }

public void setStudentName(String name){

model.setName(name); }

public String getStudentName(){

return model.getName(); }

public void setStudentRollNo(String rollNo){

model.setRollNo(rollNo);}

public String getStudentRollNo(){

return model.getRollNo(); }

public void updateView(){

view.printStudentDetails(model.getName(), model.getRollNo());
}
}

13
 Step 4 – MVC Demo
Use the StudentController
methods to demonstrate MVC
design pattern usage
public class MVCPatternDemo {
public static void main(String[] args) {

//fetch student record based on his roll no from the database

Student model = retriveStudentFromDatabase();

//Create a view : to write student details on console

StudentView view = new StudentView();

StudentController controller = new StudentController(model, view);

controller.updateView();

//update model data

controller.setStudentName("John");

controller.updateView(); }

private static Student retriveStudentFromDatabase(){

Student student = new Student();
student.setName("Robert");
student.setRollNo("10"); 14
return student; } }
Step 5 – Run and Test the Results
 Run your code and verify the results
Student:
Name: Robert
Roll No: 10

Student:
Name: John
Roll No: 10

o Rerun the code with different Data

(Model).

15
Summary
 Model View Controller (MVC) is a
popular, widely adopted design practice
 The underlying principle is the
Separation of Concerns: Separate the
Data, how the data is presented, and the
rules for updating the data.
 MVC facilitates maintenance and
reduces effort to adding new features.

16
Exercise
 Consider the following hypothetical example.
Provide an MVC design for an implementation.
 Start by creating the Model, the Controller, and
the View Classes (and the Demo).
 Every MoneyCoin has a value, issue date, and
owner ID. These coins are controlled by FedCoin,
which has the sole authority to create coins, and
update their information. FedCoin can view a list
of all issued Coins by date and by owner.

17