The MVVM Pattern

Editor's Notes

• #2: 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.
• #3: 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.
• #4: 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.
• #5: 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
• #6: 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.
• #7: 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.
• #8: 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.
• #9: 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?