1. Adopting MVVM
John Cumming
Senior Engineer CM Group Ltd
http://www.cmgroup.co.uk
http://sputnikdev.wordpress.com
2. Overview
A bit about my experience of MVVM.
What problems adopting MVVM addresses.
An overview of the MVVM pattern.
Adopting MVVM.
A simple example.
3. About me
4. Problems MVVM Addresses
5. Typical Development Problems
Tightly coupled brittle code that is difficult to maintain and
extend.
It can be difficult to separate UI state and logic from the UI
presentation.
Difficult to test UI state and logic.
The designer is tied to the UI components written by the
developer.
6. MVVM
Tightly coupled brittle code that is difficult to maintain and
extend.
It can be difficult to separate UI state and logic from the UI
presentation.
Difficult to test UI state and logic.
The designer is tied to the UI components written by the
developer.
Separation of Concerns
Natural XAML Pattern
Increases Testability
Dev Designer Workflow
7. Separation of Concerns
View UI Layout & User Interaction
View Model UI State and Logic
Model Business Logic and Data
8. Natural XAML Pattern
Data Binding DataContext
Data Binding Dependency Properties
Commands Executing Actions & Operations
9. Increased Testability
UI State & Logic independent of UI technology.
A litmus test for MVVM is that you can run the application from
within unit tests.
John Gossman, Microsoft Architect for WPF and
Silverlight
10. Developer Designer Workflow
Designer has freedom to design.
Designer can work independently.
Designer does not need to touch code.
Designer can create design time sample data.
11. MVVM Overview
12. MVVM View
The View defines the structure and appearance of the UI.
The Views DataContext is a View Model.
Minimal, if any, code behind.
View updated by notification events from the View Model.
UI Gestures are passed to the View Model, usually via
Commands.
13. MVVM View Model
The View Model is responsible for UI logic, data and state.
The View Model exposes bindable properties.
The View Model exposes ICommand properties for UI controls with
Command properties.
The View Model exposes public methods that can be invoked by the
View.
The View Model is completely testable.
14. MVVM Model
The Model is responsible for business logic and data, the client
side Domain Model.
The Model can expose bindable properties for use by the View
directly or via the View Model as an Adapter.
Model objects can implement IDataErrorInfo to provide the View with
validation state information.
15. MVVM Commands
Invoked in the View by user interaction.
Bound to ICommand properties in the View Model.
Differ from WPF Routed Commands as they are not delivered via the
UI logical tree. Equally, Routed Commands will not get delivered to
the View Model as it is outside the UI logical tree.
16. Data Validation / Error Reporting
Implement IDataErrorInfo or INotifyDataErrorInfo in View Model and
Model classes.
IDataErrorInfo presents basic indexed error information.
INotifyDataErrorInfo presents multiple errors per property,
asynchronous data validation and notification of error state
changes (In WPF 4/ Silverlight 4).
17. Adopting MVVM
18. A Typical MVVM Application
D:DataContext d:DesignSource
Objects or Methods
Design Time Data
Param-less Contructors
Construction and Wire Up
Command Exposure
IDateErrorInfoINotifyDataErrorInfo
Order of Construction
Error Reporting
Dependency Injection
19. Construction and Wire Up
One-to-One loosely coupled relationship between View and View
Model.
Create View as a Data Template.
The View Model is instantiated first.
Data Templates are lightweight and flexible.
No code behind is available for Data Templates.
20. Construction and Wire Up
Create the View Model in the Views XAML.
Requires a parameterlessctor in the View Model.
Works well in design tools.
The View must have knowledge of the View Model type.
Instantiate the View Model in the Views code behind.
The View must have knowledge of the View Model type.
Loose coupling can be achieved by use of a dependency injection
container such as Unity.
21. Provision of Design Time Data
Expression Blend XML Sample Data.
Simple to create in Blend.
Not rendered in Visual Studio.
Sample data not compiled in, but schema is.
XAML Sample Data.
Uses d:DesignData XAML markup extension.
Supported in Blend 4 and VS2010.
XAML sample data is not compiled into assemblies.
22. Provision of Design Time Data
XAML Resource.
Provide a simple resource instantiating desired types.
Useful for quick throw away data when editing a template.
Code.
Uses d:DataContext and d:DesignInstance XAML markup
extensions.
May need to be maintained by developers.
23. Key Decisions
Construct Views or View Models first and use of a dependency
injection container.
Expose Commands from the View Model as Command objects or Command
methods.
Use of IDataErrorInfo / INotifyDataErrorInfo.
Provision of design time data for use in Expression
Blend.
24. An MVVM Example
25. In the Box MVVM Training
http://karlshifflett.wordpress.com/2010/11/07/in-the-box-ndash-mvvm-training/
26. Basic WPF Application
User Can Select Media Folder
List of Media is Displayed
User Can Double Click to Play
User Can Pause and Resume Playback
Current Track is Displayed
27. Pre MVVM
UI Interactions implemented as code behind
Bootstrapping StartupUri for App
UI Binding to MediaFile Properties
private void MediaList_MouseDoubleClick(object sender,
MouseButtonEventArgse)
{
MediaFilemediaFile = MediaList.SelectedItem as MediaFile;
if (mediaFile != null)
{
_mediaFolder.Play(mediaFile);
CurrentItem.DataContext= mediaFile;
}
}
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
_mediaFolder.Load(this.MediaFolderPath.Text);
this.MediaList.ItemsSource= _mediaFolder.MediaFiles;
28. Pre MVVM - Comments
Low Concept Count. It is a simple app after all!
Minimal code required for implementation.
Testability - All UI logic and state is implemented as code behind
and is difficult to test.
Coupling - The MainWindow class needs knowledge of the data
types.
Extensibility / Maintainability Code rapidly becomes complex and
potentially confusing as new UI features are added.
29. MVVM
Bootstrapping Dependency Injection
Separate View Components in UI
Implement View Models
Bindable Properties
Command Properties
Decouple View Models and Model
33. MVVM View Components
A little excessive for a small app?
Extensible We can easily extend the individual Views if we wish
without affecting the other views.
Implement Views as Data templates
36. MVVM View Model Components
Decoupling UI actions using Commands.
NowPlayingViewModel provides an adapter for the IMediaFile.
Other Views bind directly to IMediaFile.
UI behaviour is now completely testable as there is no code behind
any of the Views.
39. MVVM - Comments
Testability UI Logic and state is independent of UI layout.
The layers have been successfully decoupled to assist in
independent testing and development of components.
The code is potentially simpler to extend into a larger application
and will be simpler to maintain.
High Concept Count, especially for a simple app.
40. Summary
The MVVM pattern is well suited for WPF / Silverlight
development.
Adopting MVVM can improve maintainability.
Adopting MVVM can improve quality.
Adopting MVVM frees up designer creativity.
Adopting MVVM can improve the product.
