Overview of MVVM

1. Overview of MVVM Ivan Krivyakov Senior Managing Consultant SunGard Consulting Services E-mail: Ivan.Krivyakov@SunGard.com ivan@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 <StackPanel> <TextBox x:Name=“City” /> <ComboBox x:Name=“CountryList” SelectionChanged=… /> </StackPanel> 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

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 <TextBox Text=“{Binding City}” /> class MainWindowViewModel { public string City { get { … } set { … } } … } binding

13. Overview of MVVM Dependency Properties Richer functionality than C# properties <TextBlock Text=“Boo!” Grid.Row=“2” />

14. Overview of MVVM WPF Data Binding Continued <SomeClass Target=“{Binding Source}” /> 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, Converter=x} • {Binding Prop, ElementName=x} • {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.SubdivisionName Country.Subdivisions Subdivision CountryError CityError SubdivisionError HasSubdivisions ShipmentCost ShipCommand Shipments

19. Overview of MVVM WPF Data Binding: Commands <Button Command=“{Binding ShipCommand}” /> class MainWindowViewModel { public ICommand ShipCommand { get { … } } … } binding

20. Overview of MVVM WPF Data Binding: Commands

21. Overview of MVVM Attached Behaviors <TextBox TextBoxExt.SelectAllOnFocus=“true” /> 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/control-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/SupervisingPresenter.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://martinfowler.com/eaaDev/PresentationModel.html