Title: Overview of MVVM
1Overview of MVVM
- Ivan Krivyakov
- Senior Managing Consultant
- SunGard Consulting Services
- E-mail
- Ivan.Krivyakov_at_SunGard.com
- ivan_at_ikriv.com
- http//www.ikriv.com/demo/mvvm/
2Overview of MVVM
- What Is This Presentation About
- Traditional WPF Programming
- MVVM Defined
- Show me the code!
- MVVM Problems
- MVVM Resources
- MVVM and Other MV Patterns
3Overview of MVVM
Traditional WPF Programming
4Overview of MVVM
Traditional WPF View Architecture
View
XAML (UI layout)
Model (domain objects)
updates, may observe
Code Behind
5Overview of MVVM
XAML window layout named controls ltStackPanelgt
ltTextBox xNameCity /gt ltComboBox
xNameCountryList SelectionChanged
/gt lt/StackPanelgt
Code behind event handlers and manipulating the
controls void CountryList_SelectionChanged()
City.Text GetCity(CountryList.SelectedItem
as Country)
6Overview of MVVM
- Pros and Cons of the Traditional Model
- Simplicity
- Power manipulate controls as you please
- Difficult to Test
- Cannot easily identify modifiable UI state
- Encourages using UI as data storage
- Encourages mixing business logic and control
manipulation
7Overview of MVVM
What is MVVM
8Overview of MVVM
- Model does not know anything about the UI
- View is a UI element (e.g. a Window)
- Something somehow fills the gap
View
Model
Something Controller? Presenter? Code Behind?
9Overview of MVVM
Model-View-ViewModel
View (input, output)
Model (domain objects)
updates, may observe
WPF Data Binding
ViewModel (UI state)
View.DataContext ViewModel
http//blogs.msdn.com/b/johngossman/archive/2005/
10/08/478683.aspx
10Overview of MVVM
Model View ViewModel
Read list of countries from the database Position UI elements on screen Validate input and show error indicators if necessary
Create shipment Control visual appearance of the UI elements colors, fonts, etc. Call model to create shipment with data entered by the user
Translate keystrokes to navigation and edit actions Disable subdivision combo box if selected country has no subdivisions
Translate mouse clicks to focus changes and button commands
11Overview of MVVM
- Important MVVM Traits
- View is isolated from the model
- ViewModel does not manipulate controls directly
- Most of the View ? ViewModel interaction is via
data binding - Codebehind is therefore kept to a minimum
12Overview of MVVM
WPF Data Binding ltTextBox TextBinding City /gt
class MainWindowViewModel public string
City get set
binding
13Overview of MVVM
- Dependency Properties
- Richer functionality than C properties
- ltTextBlock TextBoo! Grid.Row2 /gt
14Overview of MVVM
WPF Data Binding Continued ltSomeClass
TargetBinding Source /gt
Source
Target
PropertyChanged event (optional)
CLR Property
Dependency Property
Dependency Property
Dependency Property
CLR Property
CLR Field
CLR Field
15Overview of MVVM
- WPF Data Binding Continued
- Target may be chosen in a number of ways
- Each control has a DataContext
- Binding Prop, Binding Prop.SubProp
- Binding Prop, Converterx
- Binding Prop, ElementNamex
- Binding Prop, RelativeSource
16Overview of MVVM
Show Me the Code!
17Overview of MVVM
18Overview of MVVM
Bindings Map
Model.Countries Country City Country.SubdivisionNa
me Country.Subdivisions Subdivision
CountryError CityError SubdivisionError HasSubdivi
sions ShipmentCost ShipCommand Shipments
19Overview of MVVM
WPF Data Binding Commands ltButton
CommandBinding ShipCommand /gt
class MainWindowViewModel public ICommand
ShipCommand get
binding
20Overview of MVVM
WPF Data Binding Commands
21Overview of MVVM
- Attached Behaviors
- ltTextBox TextBoxExt.SelectAllOnFocustrue /gt
class TextBoxExt DependencyProperty
SelectAllOnFocusProperty
DependencyProperty.RegisterAttached(
SelectAllOnFocus) static void
OnFocusChanged()
textBox.SelectAll()
22Overview of MVVM
- Unit Tests
- Can test Model in isolation
- Can test ViewModel in isolation
- Cannot unit test data bindings!
- May require use of mocking libraries to test
ViewModel-to-Model and ViewModel-toView
interactions
23Overview of MVVM
MVVM Problems
24Overview of MVVM
- Problems in a Nutshell
- Data binding may be difficult to debug
- Data binding may cause performance issues
- Command binding requires custom components
- Any direct manipulation of controls must be
carefully isolated
25Overview of MVVM
- How to Tell View to Do Something
- Use attached behaviors
- Have the view listen to events on ViewModel
- Let ViewModel call the View via an interface
- Use custom binding extensions, etc.
26Overview of MVVM
- Example Setting Focus
- Setting focus via data binding (pure MVVM)
requires many custom moving parts - http//joshsmithonwpf.wordpress.com/2010/03/16/co
ntrol-input-focus-from-viewmodel-objects/ - IFocusMover
- FocusBinding
- BindingDecoratorBase
27Overview of MVVM
Easier way out have view model call an interface
View (input, output)
Model (domain objects)
WPF Data Binding
updates, may observe
implements
ViewModel (UI state)
IView (interface)
Calls methods
28Overview of MVVM
Shipment Demo implementation
29Overview of MVVM
MVVM Resources
30Overview of MVVM
- Level of Support from Microsoft
- MVVM not in .NET framework
- No MVVM templates in Visual Studio
- No support classes like DelegateCommand
- No standard attached behaviors
- Proliferation of third party MVVM toolkits
31Overview of MVVM
- MVVM Toolkits contain one or more of
- DelegateCommand/RelayCommand
- MVVM templates for Visual Studio
- Some converters
- Some attached behaviors
- Samples and documentation
- Many were not updated for VS 2010
- Some are primarily focused on other things
Composite UI, Event brokers,
32Overview of MVVM
- MVVM Toolkits
- See Wikipedia article on MVVM
- MVVM Light Toolkit
- Prism (a Composite UI framework)
- Structured MVVM
- AttachedCommandBehavior 2.0
33Overview of MVVM
- MVVM Books
- There are not that many
- Advanced MVVM by Josh Smith. Short overview on
54 pages, most of which are code annotation for
BubbleBurst sample from Codeplex. - Pro WPF and Silverlight MVVM by Gary Hall not
published yet, on pre-order
34Overview of MVVM
- Other MVVM Resources
- Just Google it. Enough people work on it.
- Stack Overflow
- WPF Disciples Google group
- Any other WPF forum
35Overview of MVVM
- Summary
- MVVM is a powerful concept
- There are some areas where solutions exist, but
are by no means obvious - There is no standard tool set, and even no
standard terminology. - Thus, you will have to assemble your tool belt
yourself - Fortunately, not that much is required
36Overview of MVVM
MVVM and Other MV Patterns
37Overview of MVVM
1979 Model View Controller I've lost count
of the times I've seen something described as
MVC which turned out to be nothing like
it. Martin Fowler
View (output)
Model (domain objects)
observes
changes
may update
Controller (input)
http//martinfowler.com/eaaDev/uiArchs.html
38Overview of MVVM
2004 Model View Presenter (a.k.a. supervising
controller)
View (input, output)
Model (domain objects)
observes
updates, may observe
observes, may update
Presenter (complex presentation logic)
Let the view handle as much as possible and only
step in when there's more complex logic
involved. http//martinfowler.com/eaaDev/Supervis
ingPresenter.html
39Overview of MVVM
2004? Passive View
Passive View (input, output)
Model (domain objects)
updates, may observe
observes, updates
Presenter (all presentation logic)
http//martinfowler.com/eaaDev/PassiveScreen.html
40Overview of MVVM
2004? Presentation Model
View (input, output)
Model (domain objects)
updates, may observe
synchronizes state with
Presentation Model (UI state)
Presentation model contains all variable UI state
in a UI-agnostic manner The most annoying part of
Presentation Model is the synchronization.
Ideally some kind of framework could handle
this... like .NET's data binding. http//martinfow
ler.com/eaaDev/PresentationModel.html