A primer on the Model-View-ViewModel pattern, based on the article “WPF Apps With The Model-View-ViewModel Design Pattern” by Josh Smith, published in the Feb 2009 issue of MSDN Magazine.
2. The Model-View-ViewModel
Pattern
What Why How
Architecture design pattern for developing
testable, dynamic applications
Specialization of the Model-View-Controller
and Presentation Model patterns
Often implemented as part of a framework
Three main components: Model, View,
ViewModel
Two support components: Binding,
Commands
3. The Model-View-ViewModel
Pattern
What Why How
Decouple model from application specific
concerns
Simplify work required by developers
Better testability & mocking of programs
Separates behaviour and style of user
interface
4. The Model-View-ViewModel
Pattern
What Why How
Model: business logic and data
application agnostic
what the program operates on
View: user interface look & feel
can be created by designers
without any programming
ViewModel: adapts model to view
application logic
manipulates model
provides commands & bindings
to view
Managers: framework
components
Provide binding & command
support
5. Components
Binding Commands
Bindings are how View and ViewModel stay
synced
Binding manager monitors for property
changes and mirrors them
Bindings can include value converters if View
requires different format than provided by
ViewModel
6. Components
Binding Commands
ViewModel: property changed View: bound control property changed
Manager: find property bindings Manager: find binding for control
Manager: update bindings Manager: update binding
1. Find converter for 2. Run converter on 3. Set bound control 3. Set ViewModel 2. Run converter in 1. Find converter
binding new value if needed property property reverse if needed for binding
View: bound controls visually updated ViewModel: property updated
7. Components
Binding Commands
Commands are how View View: bound button clicked
passes operations to
ViewModel
Builds on bindings Manager: execute bound command
Controls in View can 1. Get command parameter if
set
2. Run command Execute
method
bind to command
properties on
ViewModel Command: execute
Command manager
informs View of when
commands can be run ViewModel: update state based on command
8. Resources
WPF Apps With The Model-View-ViewModel Design
Pattern
Josh Smith, MSDN Magazine (Feb 2009)
http://msdn.microsoft.com/en-us/magazine/dd419663.aspx
Introduction to Model/View/ViewModel pattern for
building WPF apps
John Gossman (8 Oct 2005)
http://bit.ly/IYlYse
Presentation Model
Martin Fowler
http://martinfowler.com/eaaDev/PresentationModel.html
Notas do Editor
Today’s presentation is a summary of findings from the article “WPF Apps With The Model-View-ViewModel Design Pattern” by Josh Smith, published in the Feb 2009 issue of MSDN Magazine.We will cover the what, why, and how of the Model-View-ViewModel architectural pattern, with detail of what happens inside MVVM frameworks.
Design patterns are formalized solutions for common problems in software design and development.MVC and PM are two other patterns for building applications with the same separation of concerns as MVVM. These days MVC is best known as the architecture pattern behind the Ruby on Rails framework for web development.MVVM is an integral part of Windows Presentation Foundation in .NET, and the Silverlight platform from Microsoft. As well, MVVM frameworks exist for other platforms and languages.The pattern components will be explained shortly.
MVVM provides developers the ability to separate different parts of an application from each other, which promotes reusability of code and easier testing.Being able to reuse the model layer of the application means that other apps working with the same data do not need to reinvent the wheel.Decoupling also makes it easier to test the different components of the application, as “mock” objects and data can be used to ensure that code runs the way it was designed to do so.Finally, this decoupling makes it easy to change how the application looks, without affecting how it behaves, and vice versa.
Model layer provides business logic and dataLayer could be external to the app, such as web servicesModel code could be shared between applications, so important to keep it free of application-specific concernsView is user interfaceHow the user sees the application – look & feel / styleData from model is represented here, changes reflected back to the modelCan be created with little or no code by UX designersViewModel provides application behaviourLoosely binds model and view through commands and bindingsPushes model updates to view and vice versaSingle ViewModel could work with multiple viewsBulk of application codeManagers provide pattern and framework supportBinding manager automates process of reflecting changes between View and ViewModelCommand manager allows ViewModel to state when commands may or may not be sent by ViewNeither are necessary in the pattern but help greatly
Bindings are defined in the View, and are set up by the binding manager when the view is loaded.Binding manager subscribes to property change events on the ViewModel, and control value change events on the View, so it knows when values need to be updated.Binding objects tell the binding manager which properties of the ViewModel are linked to which properties on the View and its controls.Bindings can contain other special objects, converters, which allow properties on the ViewModel to be converted to formats better supported by the View controls and vice versa.
ViewModel to View example:Property changes in ViewModel. ViewModel fires a property changed event.Binding manager determines which property changed based on the arguments of the event, and finds all the bindings connected to that property.Manager updates each binding, by:Checking if the binding uses a converter, and passing the property’s new value through it if so.Setting the appropriate property on the View with the new or converted value.Control on the View informs the View that it needs to be redrawn, and is visually updated.View to ViewModel example:Property changes in bound control in View. Control fires a value changed event.Binding manager finds the binding attached to that control property.Manager updates the binding, by:Checking if the binding uses a converter, and passes the control value through it if so.Setting the appropriate property on the ViewModel with the new or converted value.ViewModel property is updated, firing off the previous example’s chain of events.
Commands are special objects which provide a View the opportunity to tell the ViewModel to run certain operations, without needing to write any code in the View itself.Command objects are bound like any other property, but are handled specially by the command manager.Commands include an event specifying that whether or not they can be run has changed. This event is handled by the command manager itself, so it can enable or disable command-bound controls.Example:“Save” button on View is clicked. Command manager observes the OnClick event for the button and is informed that it has been clicked.Command manager accesses the command bound to the button, as well as any special parameter for the command set on the button control.Command manager tells the command to run, passing in the parameter if it exists.The command runs, calling certain methods in the ViewModel itself. In this example, the ViewModel updates a specific Model object and tells it to save its data.
The following articles provide more in-depth information on the MVVM pattern and the PM pattern from which it derives. John Gossman is the inventer of MVVM, and Martin Fowler the inventor of PM.Any questions?