MVC Design pattern

MVC stands for Model View Controller. This is a popular, and a useful design pattern. I'm coming up with simple explanations, for this very famous design pattern.

What is MVC?

If you breakdown any software, there will be 3 components in common :
1. Data (We are going to call it Model)
2. Interface to view or edit the data (View)
3. Functions that are performed on data (Controller)

Why MVC?

Any software is likely to be developed in a very dynamic way : in order to maintain re-usability.

Your client (or lecturer - who gave you the assignment/coursework maybe) might be adding modifications to the initial requirements, so that you will have to revise the code so many times. Even if the requirement is just a minor change, improper coding style might lead you to several changes that occur like a chain. 

Sometimes you might have to create the logic, whereas another person (or a team) is working on the UI. You will not know how will the UI look like until it is finalised, but you have to code the logic in the mean time. If you are used to implement the entire code inside the action event, that is got after double clicking the button or something (I'm referring to Java swing here), then you should either wait for the UI guy to complete work, or should be ready to do a Copy & Paste.

How can we reduce the effects of the above troubles? One answer would be, using MVC!

Sample Program

Let's try entering details of an employee in a Command Line Interfaced Java program, and displaying them back in CLI.

Let's capture the following details :

Registration Number, Name & Salary

For the above requirement, Someone can code like this:

import java.util.*;

public class EmployeeDetails{
  public static void main(String[] args){
    Scanner sc = new Scanner(System.in);

    // get details

    System.out.println("Enter Reg No : ");
    String regNo = sc.nextLine();

    System.out.println("Enter Name : ");
    String name = sc.nextLine();

    System.out.println("Enter Salary : ");
    double salary = sc.nextDouble();

    // print details

    System.out.println("Reg No : "+regNo);
    System.out.println("Name : "+name);
    System.out.println("Salary : "+salary);
  }
}

Seems easy right?

Not at all!

Now, what if the requirement is changed as 'Get the details in CLI, and display as a GUI message'?

Are you going to change every System.out.println("TODO "+todoVariable) into someLabel.setText("TODO "+todoVariable) ?

It's ugly!

Let's use MVC!

1) Create Employee.java, which will be the Model (Data)

public class Employee{
private String regNo;
private String name;
privatae double salary;

public String getRegNo(){
return this.regNo;
}

public void setRegNo(String regNo){
this.regNo = regNo;
}

public String getName(){
return this.name;
}

public void setName(String name){
this.name = name
}

public double getSalary(){
return this.salary;
}

public void setSalary(double salary){
this.salary = salary
}
}

2) Create EmpView.java, which will be the View

public class EmpView{
public void viewEmployee(String regNo, String name, double salary){
System.out.println("Employee No : " + regNo);
System.out.println("Employee Name : " + name);
System.out.println("Empoyee Salary : " + salary)
}
}

3) Create EmpController.java, which will be the Controller

public class EmpController{

private Employee model;
private EmpView view;

public EmpController(Employee model, EmpView view){
this.model = model;
this.view = view;
}

public void setEmpName(String name){
model.setName(name);
}

public String getEmpName(){
return model.getName();
}

public void setEmpRegNo(String regNo){
model.setRegNo(regNo);
}

public String getEmpRegNo(){
return model.getRegNo();
}

public void setEmpSalary(double salary){
model.setSalary(salary);
}

public double getEmpSalary(){
return model.getSalary();
}

public void updateView(){
view.viewEmployee(model.getRegNo(), model.getName(), model.getSalary());
}
}

As you can see, the EmpController.java is the player here. We can call this guy to set data in Model, and produce outputs in View.

4) Create Main.java with main() method, which will run the program in MVC pattern.

public class Main{
public static void main(String[] args){
Employee model = getEmployee();
EmpView view = new EmpView();
EmpController controller = new EmpController(model,view);

controller.updateView();
}

// this can be returning a selected employee from a database
private static Employee getEmployee(){
// a hard coded employee instance
Employee employee = new Employee();
employee.setRegNo("EMP001");
employee.setName("Senthuran");
employee.setSalary(100000.0);
return employee;
}
}

This will give the following results, as the view is updated now :

Employee No : EMP001
Employee Name : Senthuran
Employee Salary : 100000.0

Try inserting the following code at the end of main() method to modify the data, and update the view again.

controller.setEmpSalary(150000);
controller.updateView();

Output :

Employee No : EMP001
Employee Name : Senthuran
Employee Salary : 150000.0

Remember I said about the requirement change :

'Get the details in CLI, and display as a GUI message'?

How to do that?
Just modify EmpView.java with Java Swing components. All the other things will remain the same.