What is an MVC design pattern


MVC pattern


Next:Singleton pattern Up:Basics of patterns Previous:Observer Pattern & nbsp Contents & nbsp index

The abbreviation MVC stands for Model-View-Control. The MVC pattern is actually relatively simple. It says that a program is divided into three different parts. (see figure 4.2)
The model part contains the data and the data access. Classic objects of an object-oriented program could be located here, as well as database access or any other type of data management.
There is also the view section. All views of the program are located here. These normally show the data of the model and are implemented completely independently of the data.
The third part of the pattern is the control part. This includes all control options with which a user can control the program. This part is also usually completely independent from the other parts.

In some programming languages ​​or applications you are forced to accommodate the view and the control part in one structure. This pattern is then referred to as the document view model.

In an implementation of the MVC pattern, the individual sub-areas usually only have references to the other sub-areas. Only the defined access methods are used. It is therefore not possible, for example, to access objects of the model class directly from a view class.

In the following example a program is presented which not only implements an MVC design pattern, but also uses an observer pattern at the same time. This mixing of the two design patterns is very common because they go well together. The two are linked in such a way that the view classes are the observer classes of the observer pattern and the model class represents the subject class of the pattern.

import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.ArrayList; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JTextField; interface View {// Must be implemented by all views public void refresh (); } class RealView extends JFrame implements View {// id of the window private int id; // reference to the model private model model; // JTextField of the window private JTextField txt; // constructor public RealView (int id, model model) {this.id = id; this.model = model; setTitle ("View" + id); setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); txt = new JTextField (""); getContentPane (). add (txt); refresh (); setLocation (250, 60 * id); pack(); setVisible (true); } / * * Is executed if something changes * in the data in the model * / public void refresh () {txt.setText ("View" + id + ":" + model.getValue ()); }} class ButtonView extends JFrame {public ButtonView (Model model) {// sets the properties of the window setTitle ("ButtonView"); setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); // Adds the control class to the button JButton btn = new JButton ("Increment"); btn.addActionListener (new Control (model)); getContentPane (). add (btn); // display the window setLocation (100,100); pack(); setVisible (true); }} class Control implements ActionListener {// reference to the model private model model; // constructor public control (model model) {this.model = model; } // Is executed when the button is clicked public void actionPerformed (ActionEvent evt) {model.incValue (); }} class Model {// All registered views private ArrayList

The source code shown here contains a class Model. This class represents the model class of the MVC pattern and at the same time the subject class of the observer pattern. It therefore contains all data or references to data and manages a list with all observers. There is also the Control class, which of course represents the control area of ​​the MVC pattern. Such a class can be used, for example, to make changes to the model. However, these are only possible via access methods implemented by the model class. Then there are the ButtonView and RealView view classes. These implement the view interface, which is to be equated with the observer interface of the observer pattern. Since you implement this interface, you can register with the model and you will be notified of data changes. The RealView then has the option of displaying the data of the model updated as soon as it changes. The ButtonView contains only one button, which uses the control class to change the data in the model.

So you can see that although all classes are related, they are implemented independently of each other. This allows the program to be expanded later with additional controls or views without affecting the integrity of the program.



Next:Singleton pattern Up:Basics of patterns Previous:Observer Pattern & nbsp Contents & nbsp index Rainer Friesen, Markus Stollenwerk and Daniel Valentin, 2007-03-06