The MVVM Pattern
•Als PPTX, PDF herunterladen•
1 gefällt mir•1,703 views
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.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie The MVVM Pattern
Ähnlich wie The MVVM Pattern (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
The MVVM Pattern
- 1. The MVVM Pattern Chris Charabaruk
- 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
Hinweis der Redaktion
- 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?