The MVVM Pattern


Published on

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.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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?
  • The MVVM Pattern

    1. 1. The MVVM PatternChris Charabaruk
    2. 2. The Model-View-ViewModelPatternWhat Why HowArchitecture design pattern for developingtestable, dynamic applicationsSpecialization of the Model-View-Controllerand Presentation Model patternsOften implemented as part of a frameworkThree main components: Model, View,ViewModelTwo support components: Binding,Commands
    3. 3. The Model-View-ViewModelPatternWhat Why HowDecouple model from application specificconcernsSimplify work required by developersBetter testability & mocking of programsSeparates behaviour and style of userinterface
    4. 4. The Model-View-ViewModelPatternWhat Why HowModel: business logic and data application agnostic what the program operates onView: user interface look & feel can be created by designers without any programmingViewModel: adapts model to view application logic manipulates model provides commands & bindings to viewManagers: frameworkcomponents Provide binding & command support
    5. 5. ComponentsBinding CommandsBindings are how View and ViewModel staysyncedBinding manager monitors for propertychanges and mirrors themBindings can include value converters if Viewrequires different format than provided byViewModel
    6. 6. ComponentsBinding Commands ViewModel: property changed View: bound control property changed Manager: find property bindings Manager: find binding for control Manager: update bindings Manager: update binding1. 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. 7. ComponentsBinding CommandsCommands are how View View: bound button clickedpasses operations toViewModelBuilds 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: executeCommand managerinforms View of whencommands can be run ViewModel: update state based on command
    8. 8. ResourcesWPF Apps With The Model-View-ViewModel DesignPattern Josh Smith, MSDN Magazine (Feb 2009) to Model/View/ViewModel pattern forbuilding WPF apps John Gossman (8 Oct 2005) Model Martin Fowler
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.