Introduction to MVP and Model-View-ViewModel (MVVM) design modes

Microsoft's WPF brings new technical experiences, such as Sliverlight, audio, video, 3D, and animation ......, This makes the software UI Layer more detailed and customizable. At the technical level, WPF also brings

New features such as Binding, Dependency Property, Routed Events, Command, DataTemplate, and ControlTemplate. MVVM (Model-View-ViewModel) Framework

The origin of this architecture is a new architecture framework developed and evolved when the Model-View-Presenter Model is combined with the WPF application method. It is based on the original MVP framework and integrates the new features of WPF.

To cope with the increasingly complex needs of customers.

The combination of WPF Data Binding and Presentation Model is a good practice, which allows developers to separate View and logic. However, this data binding technology is very simple and practical and is also unique to WPF.

So we call it Model-View-ViewModel (MVVM ). This mode is similar to the classic MVP Model (Model-View-Presenter) mode, except that you need

Model. This model is ViewModel. ViewModel contains all the UI-specific interfaces and attributes, and is bound to the attributes of a ViewModel view, and can obtain the loose coupling between the two.

You need to write the corresponding code in the ViewModel directly update view. The data binding system also supports validation of input errors transmitted to the view in a standardized manner.

Shows the architecture of the MVP design mode.

A View is usually An Aspx page. In the previous design model, due to lack of clear division of duties, the UI Layer often becomes the all-around proxy of the logic layer, while the latter actually belongs to the application.

Other layers of the program. The M in MVP is actually a model that encapsulates the computing relationship between core data, logic, and functions, and the M in MVC is a view (form ), P encapsulates all the operations in the form.

Similar to C in MVC, the difference is that MVC is a system-level architecture, while MVP is used on a specific page, that is to say, MVPs are much more flexible than MVC.

And is extremely simple to implement.

We will analyze it from the interface layer of IView, which can help us decouple various UIS from the logic layer, and enter the Unit/automation Test from the UI Layer.

Provided the portal. Previously, the UI that can be compiled by WinForm, Web Form, and MFC communicates with the IView layer through event Windows messages. The best way to communicate with the IView layer is to use Binding

Of course, you can also use events. The Presenter layer must implement IView, And the polymorphism mechanism can ensure that the UI Layer displays appropriate data during runtime. For example, Binding. in the program, you may see that the Source of Binding is

In fact, the object referenced by an interface variable is the real data source.

The MVC pattern is very familiar to everyone. I will not repeat it here. These pattern also evolved in turn to form MVC-> MVP-> MVVM. One sentence is good: when an object is relayed

The interface is the most easily torn down. Therefore, IView serves as a layer of Common View Interface constraints (contracts), while View can convey a layer of decoupling.

The following describes the MVVM design mode. Because of the emergence of WPF technology, the MVP design mode is improved. The MVVM mode uses the data binding infrastructure. They can easily build the necessary elements of the UI.

Shows the MVVM architecture.

You can refer to The Composite Application Guidance for WPF (prism) and prism V2 to download The source code.

The View is bound to the ViewModel, and some commands are executed to request an action from it. In turn, ViewModel communicates with the Model and tells it to update to respond to the UI. This makes it possible to build a UI for the Application

Is easy. The easier it is to paste an interface to an application, the easier it is for the designer to use Blend to create a beautiful interface. At the same time, when the UI and functions become increasingly loosely coupled, the functional testability is

More and more powerful.

In MVP mode, designers add an interface between the UI Layer and the logic layer to enable the UI Layer to be separated from the logic layer. Both UI developers and data developers must respect this

Contract, design and develop according to it. In this way, the same set of data logic can be used in both Web UI and Window UI. Learn from MVP's IView layer to develop habits. View Model

It is more appropriate than the Presenter. It puts some events and commands in the Controler.

Reference example: PersonViewModel Layer

Public FamilyTreeViewModel (Person rootPerson)
{
_ RootPerson = new PersonViewModel (rootPerson );

_ FirstGeneration = new ReadOnlyCollection <PersonViewModel> (
New PersonViewModel []
{
_ RootPerson
});
_ SearchCommand = new SearchFamilyTreeCommand (this );
}

I will not go into details here. For detailed application examples, refer:

Simplifying the WPF TreeView by Using the ViewModel Pattern

Source code download