Overview of MVVM

1
Overview 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/

2
Overview 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

3
Overview of MVVM
Traditional WPF Programming
4
Overview of MVVM
Traditional WPF View Architecture
View
XAML (UI layout)
Model (domain objects)
updates, may observe
Code Behind
5
Overview 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)
6
Overview 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

7
Overview of MVVM
What is MVVM
8
Overview 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?
9
Overview 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
10
Overview of MVVM

• Separation of Concerns

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
11
Overview 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

12
Overview of MVVM
WPF Data Binding ltTextBox TextBinding City /gt
class MainWindowViewModel public string
City get set

binding
13
Overview of MVVM

• Dependency Properties
• Richer functionality than C properties
• ltTextBlock TextBoo! Grid.Row2 /gt

14
Overview 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
15
Overview 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

16
Overview of MVVM
Show Me the Code!
17
Overview of MVVM
18
Overview of MVVM
Bindings Map
Model.Countries Country City Country.SubdivisionNa
me Country.Subdivisions Subdivision
CountryError CityError SubdivisionError HasSubdivi
sions ShipmentCost ShipCommand Shipments
19
Overview of MVVM
WPF Data Binding Commands ltButton
CommandBinding ShipCommand /gt
class MainWindowViewModel public ICommand
ShipCommand get

binding
20
Overview of MVVM
WPF Data Binding Commands
21
Overview of MVVM

• Attached Behaviors
• ltTextBox TextBoxExt.SelectAllOnFocustrue /gt

class TextBoxExt DependencyProperty
SelectAllOnFocusProperty
DependencyProperty.RegisterAttached(
SelectAllOnFocus) static void
OnFocusChanged()
textBox.SelectAll()
22
Overview 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

23
Overview of MVVM
MVVM Problems
24
Overview 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

25
Overview 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.

26
Overview 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

27
Overview 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
28
Overview of MVVM
Shipment Demo implementation
29
Overview of MVVM
MVVM Resources
30
Overview 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

31
Overview 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,

32
Overview of MVVM

• MVVM Toolkits
• See Wikipedia article on MVVM
• MVVM Light Toolkit
• Prism (a Composite UI framework)
• Structured MVVM
• AttachedCommandBehavior 2.0

33
Overview 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

34
Overview of MVVM

• Other MVVM Resources
• Just Google it. Enough people work on it.
• Stack Overflow
• WPF Disciples Google group
• Any other WPF forum

35
Overview 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

36
Overview of MVVM
MVVM and Other MV Patterns
37
Overview 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
38
Overview 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
39
Overview 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
40
Overview 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