CS1103 Discussion Assignment Unit 7 - The Model-View-Controller design pattern decouples data access, business logic, data presentation, and user interaction

Introduction

In this discussion, I will first introduce the definition of MVC and then explain how Model-View-Controller (MVC) “decouples data access, business logic, data presentation, and user interaction” (UoPeople, n.d.). Next, I will use concrete code to illustrate these advantages further. Finally, I will make a summary.

1. Definition and Explanation

The Model-View-Controller (MVC) pattern divides an application into three components: Model, View and Controller. Different parts have different responsibilities. Specifically, the Model is the data and the rules (business logic) for processing that data (Pastor, 2010). The view is the display interface responsible for showing the data received from the Model (Pastor, 2010). The controller is used to “coordinate interactions between the Model and View” (Banas, 2013). In other words, “it usually calls the appropriate Model for the task and then selects the proper view. It contains a lot of internal-organizational logic (more like housekeeping)” (Pastor, 2010).

Handling user requests using MVC pattern (Pastor, 2010)

I got the image above after modifying the figure from Pastor’s blog. It is beneficial for how MVC decouples user interaction, data presentation, business logic, and data access. The specific explanation is as follows: First, user interaction is in charge of the Controller. Specifically, in processes 1 and 7, when the user sends a request, the Controller will call the Model to process the data and the View to display the results. Second, data presentation is the View’s responsibility. Concretely, in steps 5 and 6, the Controller will call the appropriate View to display the data from the Model. Third, business logic is mainly handled by the Model. More specifically, as shown in processes 2 and 4, the Model will process the data according to specific rules after receiving the call request from the Controller. Fourth, data access is shown in process 3. The Model needs to read data from the database or hard disk before processing it. Based on the above explanations, we can see those different components of MVC are responsible for data access, business logic, data presentation, and user interaction, respectively. Therefore, MVC decouples these four functions nicely.

2.Examples

To better explain how the MVC design pattern decouples user interaction, data presentation, business logic, and data access, I will refer to the code written by Derek Banas instead of creating my own program, because this code explains the MVC design pattern very clearly.

2.1. Codes

Code for the Model:

/**
 * The Model performs all the calculations needed and that is it.
 * It doesn't know the View exists
 *
 * @author Derek Banas
 */
public class CalculatorModel {
    // Holds the value of the sum of the numbers entered in the view
    private int calculationValue;

    public void addTwoNumbers(int firstNumber, int secondNumber) {
        calculationValue = firstNumber + secondNumber;
    }

    public int getCalculationValue() {
        return calculationValue;
    }
}

CalculatorModel (Banas, 2013, para. 1)

Code for the View:

/**
 * This is the View
 * Its only job is to display what the user sees
 * It performs no calculations, but instead passes
 * information entered by the user to whomever needs it.
 *
 * @author Derek Banas
 */

import java.awt.event.ActionListener;
import javax.swing.*;

public class CalculatorView extends JFrame {
    private JTextField firstNumber = new JTextField(10);
    private JLabel additionLabel = new JLabel("+");
    private JTextField secondNumber = new JTextField(10);
    private JButton calculateButton = new JButton("Calculate");
    private JTextField calcSolution = new JTextField(10);

    CalculatorView() {
        // Sets up the view and adds the components
        JPanel calcPanel = new JPanel();

        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setSize(600, 200);

        calcPanel.add(firstNumber);
        calcPanel.add(additionLabel);
        calcPanel.add(secondNumber);
        calcPanel.add(calculateButton);
        calcPanel.add(calcSolution);

        this.add(calcPanel);

        // End of setting up the components --------
    }

    public int getFirstNumber() {
        return Integer.parseInt(firstNumber.getText());
    }

    public int getSecondNumber() {
        return Integer.parseInt(secondNumber.getText());
    }

    public int getCalcSolution() {
        return Integer.parseInt(calcSolution.getText());
    }

    public void setCalcSolution(int solution) {
        calcSolution.setText(Integer.toString(solution));
    }

    // If the calculateButton is clicked execute a method
    // in the Controller named actionPerformed
    void addCalculateListener(ActionListener listenForCalcButton) {
        calculateButton.addActionListener(listenForCalcButton);
    }

    // Open a popup that contains the error message passed
    void displayErrorMessage(String errorMessage) {
        JOptionPane.showMessageDialog(this, errorMessage);
    }
}

CalculatorView (Banas, 2013, para. 2)

Code for the Controller:

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

/**
 * The Controller coordinates interactions between the View and Model
 *
 * @author Derek Banas
 */

public class CalculatorController {

    private CalculatorView theView;
    private CalculatorModel theModel;

    public CalculatorController(CalculatorView theView, CalculatorModel theModel) {
        this.theView = theView;
        this.theModel = theModel;

        // Tell the View that when ever the calculate button
        // is clicked to execute the actionPerformed method
        // in the CalculateListener inner class
        this.theView.addCalculateListener(new CalculateListener());
    }

    class CalculateListener implements ActionListener{
        public void actionPerformed(ActionEvent e) {
            int firstNumber, secondNumber = 0;

            // Surround interactions with the view with
            // a try block in case numbers weren't
            // properly entered
            try{
                firstNumber = theView.getFirstNumber();
                secondNumber = theView.getSecondNumber();

                theModel.addTwoNumbers(firstNumber, secondNumber);
                theView.setCalcSolution(theModel.getCalculationValue());
            }

            catch(NumberFormatException ex){
                System.out.println(ex);
                theView.displayErrorMessage("You Need to Enter 2 Integers");
            }
        }
    }
}

CalculatorController (Banas, 2013, para. 3)

The main program:

/**
 * To understand the Model View Controller
 * you just need to know that it separates the Calculations and Data from the interface.
 * The Model is the class that contains the data and the methods needed to use the data.
 * The View is the interface.
 * The Controller coordinates interactions between the Model and View.
 *
 * @author Derek Banas
 */
public class MVCCalculator {
    public static void main(String[] args) {
        CalculatorView theView = new CalculatorView();
        CalculatorModel theModel = new CalculatorModel();
        CalculatorController theController = new CalculatorController(theView, theModel);
        theView.setVisible(true);
    }
}

MVCCalculator (Banas, 2013, para. 4)

2.2. Outputs

The above code implements an addition operation and displays the result using a Swing component. The author created four classes using the MVC design pattern: CalculatorModel, CalculatorView, CalculatorController, and MVCCalculator. Specifically, 1) the CalculatorModel class corresponds to the Model, which is mainly responsible for data access and business logic processing. In this example, the Model performs the addition operation. 2) The CalculatorView class corresponds to the View and is responsible for the data presentation, as shown in the Outputs. 3) The CalculatorController class corresponds to the Controller, which is mainly responsible for interacting with the user and coordinating the interaction between the View and the Model. In the example, the Controller call the Model to get the calculation results and sent it to the View for display. As can be seen from the above description, the three parts of MVC correspond to three classes, and each of these classes is responsible for business logic, data access, user interaction, and data presentation, respectively. Therefore, The MVC design pattern decouples business logic, data access, user interaction, and data presentation well.

3. Conclusion

In conclusion, Model-View-Controller (MVC) consists of Model, View and Controller. The Model is responsible for data access and business logic, the View is responsible for data presentation, and the Controller is responsible for user interaction. Therefore, the MVC design pattern decouples the above four aspects nicely.

Word count: 1113

References

1.UoPeople. (n.d.) Discussion Forum Unit 7.
https://my.uopeople.edu/mod/forum/discuss.php?d=734554

2.Derek Banas. (2013, February 21). MVC Java tutorial [Video]. YouTube.
https://www.youtube.com/watch?v=dTVVa2gfht8

3.Pastor, P. (2010, March 24). MVC for Noobs. Envatotuts+.
https://code.tutsplus.com/tutorials/mvc-for-noobs--net-10488

4.Banas, D. (2013). MVC JAVA TUTORIAL.
http://goo.gl/deVk5

​

---

This is the ending, thanks for reading.

---