MVC Pattern

MVC pattern is architectural pattern for implementing user interfaces on computers. MVC stands for Model-View-Controller. This pattern is used to separate application's concerns.

MVC pattern divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to or accepted from the user.

This pattern has become extremely popular for designing web applications.

 

Structure

The following figure shows the structure of MVC pattern. Thanks to RegisFrey for such convincing architectural depiction of MVC pattern.

mvc architecture

Figure: MVC architecture 

The components in MVC pattern are: 

  • MODEL is the central component of MVC. It captures the behavior of the application in terms of its problem domain, independent of the user interface.The model directly manages the data, logic and rules of the application.
  • VIEW  represents the visualization of the data that model contains. It can be of any type such as a chart or a diagram. and multiple views of the same information are possible, such as a bar chart for management and a tabular view for accountants.
  • CONTROLLER controls the data flow into model object and updates the view whenever data changes. It keeps view and model separate.

Interactions of components

MVC architecture also defines the interaction among the components i.e. among Model, View and Controller.

  • model stores data that is retrieved according to commands from the controller and displayed in the view.
  • view generates an output presentation to the user based on changes in the model.
  • controller update model's state whenever there is change. It can also send commands to its associated view to change the view's presentation of the model.

 

Example

Let us consider a simple system where information about emplyoee is printed whenever there is update on information. The following class diagram shows the system.

mvc pattern example

Figure : MVC pattern example

Here, EmployeeController is responsible for storing data in Employee object and  updating View accordingly. So, whenever change is made in model, that change is notified to controller which in turn reflects in view. EmployeeRepository is used as database here which in general is a layer to interact with database.

 

Java Implementation

In order to implement MVC pattern, lets create model first.

/**
 * Model
 */
public class Employee {
    private String id;
    private String name;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

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

    @Override
    public String toString(){
        return id+", " + name;
    }
}

Now, lets create a view which simply displays employee information.

/**
 * View
 * It renders the information coming from controller.
 */
public class View {
    public void printEmployeeInformation(Employee employee){
        System.out.println("Employee Details:");
        System.out.println("Employee ID: "+employee.getId());
        System.out.println("Employee Name: "+employee.getName());
        System.out.println("-------------------------");
    }
}

Now, the controller acts as bridge between view and model.

/**
 * Controller
 * It acts as bridge for model (Employee) and view (View)
 */
public class EmployeeController {
    private View view;
    private Employee employee;

    public EmployeeController(View view, Employee employee) {
        this.view = view;
        this.employee = employee;
    }

    public void updateView(){
        view.printEmployeeInformation(employee);
    }
}

In order to store employee data, lets create repository as below.

/**
 * Data access layer;
 * this interacts with database
 */
public class EmployeeRepository {
    public Employee getEmployee(){
        Employee employee = new Employee();
        employee.setId("984598A");
        employee.setName("John Jrump");
        return employee;
    }
}

Finally, lets create main program as client to our application.

/**
 * Client
 */
public class Application {
    public static void main(String[] args) {
        //retrieve information from database
        Employee employee = new EmployeeRepository().getEmployee();
        //creating view to display employee information
        View view = new View();
        
        EmployeeController controller = new EmployeeController(view,employee);
        controller.updateView();

        //updating model
        employee.setName("Hilary Sanders");
        controller = new EmployeeController(view,employee);
        controller.updateView();
    }
}

The output of the program is:

Employee Details:
Employee ID: 984598A
Employee Name: John Jrump
-------------------------
Employee Details:
Employee ID: 984598A
Employee Name: Hilary Sanders
-------------------------

 

Reference:  The evolution of MVC and other UI architectures from Martin Fowler.

Dynamic Proxy API