Through Java swing, see through the MVC design model (1)

A good user interface (GUI) design can usually be found in the real world. For example, if there is a simple button in front of you similar to a computer keyboard button, but it is such a simple button, we can see a GUI Design Rule, it consists of two main parts, which make it have the action characteristics that the button should have, for example, can be pressed. The other part is responsible for its performance. For example, whether the button represents A or B.

Looking at these two points, you will find a very powerful design method, which encourages reuse of reuse, rather than re-designing redesign. You find that the buttons share the same mechanism. You only need to spray different letters on the top of the buttons to create "different" buttons, instead of re-designing a drawing for each button. This greatly reduces the time and difficulty of the design.

If you apply the above design ideas to the software development field, it will not be surprising to achieve similar results. A model/View/controller (MVC) technology widely used in the software development field is an implementation of this idea.

This is certainly good, but you may be confused about the relationship between this and the user interface design (swing) in the Java basic class jfc (Java foundation class? Okay. Let me tell you.

Although the MVC design pattern is usually used to design the entire user interface (GUI), jfc designers use this pattern to design a single component in swing ), for example, the table jtable, the tree jtree, and the combined drop-down list box jcombobox. Each of these components has a model, a view, and a controller. These models, views, and controllers can be changed independently, that is, when the component is being used. This feature makes the toolkit for GUI development very flexible. Come on, let me tell you how it works.

MVC design pattern

As I mentioned earlier, the MVC design pattern separates a software component into three different parts: model, view, and controller.

A model is a part of the component state and low-level behavior. It manages its own State and processes all operations on the state. The model itself does not know who uses its own view and controller, the system maintains its relationship with the view. When the model changes, the system also notifies the corresponding view.

View represents a visual presentation of the data contained in the management model. A model can have more than one view, but this is rare in swing.

The Controller manages the interaction control between the model and the user. It provides some methods to address the situation when the model status changes.

For example, if you use a button on the keyboard, the model is the entire mechanical device of the button, and the View/controller is the surface part of the button.

The figure below explains how to divide a jfc development user interface into model, view, and controller. Note that view/controller is merged. This is the common usage of the MVC design pattern, they provide a component UI ).

Example of Button

In order to better understand the relationship between the MVC design mode and the swing user interface components, we can perform more in-depth analysis. I will use the most common component button. We start with model.

Model

The model of a button should have the behavior of an interface buttonmodel. A button model instance encapsulates its internal status and defines the button behavior. All of its methods can be divided into four categories:
1. query internal status
2. Internal Operation Status
3. add and delete Event Listeners
4. Events

Other user interface components have their own component-related models, but all the component models provide these four methods.

View & controller

In the figure above, the view/controller of a button is completed by a buttonui interface. If a class implements this interface, it will be responsible for creating a user interface to process user operations. All of its methods can be divided into three categories:
1. Paint
2. Return geometric information
3. Handling AWT events

Other user interface components have their own view/Controller related to the components, but they all provide the above three methods.

Programmers usually do not directly deal with models and views/controllers. They are usually hidden from those inherited from Java. AWT. the components in the component are like glue, and the MVC three are combined into one. It is precisely because of these inherited component objects that a programmer can easily mix swing components and AWT components. Then, we know that, many swing components directly inherit from the corresponding AWT components, which provide more convenient and easy-to-use functions than the AWT components. Therefore, we usually do not need to mix the two components.

One instance

Now we have understood the correspondence between Java classes and various MVC parts, so we can further analyze the problem. The following is an example of small MVC development. Because jfc is very complex, I can only limit my example to one user interface component (if you guess it is an example of a button, you are right !)

Let's take a look at all the parts of this example.

Button class

The most obvious start point is the code of the button component in this province, because this class is accessible to most programmers.

As I mentioned earlier, the button user interface component class is actually the binder between model and view/controller. Each button component is associated with a model and a controller. The model defines the button behavior, while the view/controller defines the button performance. Applications can change these associations in any event. Let's look at the code that can implement this function.

public void setModel(ButtonModel buttonmodel){　if (this.buttonmodel != null)　{　　this.buttonmodel.removeChangeListener(buttonchangelistener);　　this.buttonmodel.removeActionListener(buttonactionlistener);　　buttonchangelistener = null;　　buttonactionlistener = null;　}　this.buttonmodel = buttonmodel;　if (this.buttonmodel != null)　{　　buttonchangelistener = new ButtonChangeListener();　　buttonactionlistener = new ButtonActionListener();　　this.buttonmodel.addChangeListener(buttonchangelistener);　　this.buttonmodel.addActionListener(buttonactionlistener);　}　updateButton();}public void setUI(ButtonUI buttonui){　if (this.buttonui != null)　{　　this.buttonui.uninstallUI(this);　}　this.buttonui = buttonui;　if (this.buttonui != null)　{　　this.buttonui.installUI(this);　}　updateButton();}public void updateButton(){　invalidate();}

Before entering the next section, you should spend more time carefully reading the source code of the button class.