Overview of MVVM Ivan Krivyakov Senior Managing Consultant

Overview of MVVM Ivan Krivyakov Senior Managing Consultant Sun. Gard Consulting Services E-mail: Ivan. Krivyakov@Sun. Gard. com ivan@ikriv. com http: //www. ikriv. com/demo/mvvm/

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

Overview of MVVM “Traditional” WPF Programming

Overview of MVVM Traditional WPF View Architecture View XAML Model (domain objects) (UI layout) updates, may observe Code Behind

Overview of MVVM XAML: window layout + named controls <Stack. Panel> <Text. Box x: Name=“City” /> <Combo. Box x: Name=“Country. List” Selection. Changed=… /> </Stack. Panel> Code behind: event handlers and manipulating the controls void Country. List_Selection. Changed(…) { City. Text = Get. City(Country. List. Selected. Item as Country); }

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

Overview of MVVM What is MVVM

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?

Overview of MVVM Model-View. Model View (domain objects) (input, output) updates, may observe WPF Data Binding View. Model (UI state) View. Data. Context = View. Model; http: //blogs. msdn. com/b/johngossman/archive/2005/10/08/478683. aspx

Overview of MVVM Separation of Concerns Model View. Model 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

Overview of MVVM Important MVVM Traits §View is isolated from the model §View. Model does not manipulate controls directly §Most of the View. Model interaction is via data binding §Codebehind is therefore kept to a minimum

Overview of MVVM WPF Data Binding <Text. Box Text=“{Binding City}” /> class Main. Window. View. Model { public string City { get { … } set { … } } … } binding

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

Overview of MVVM WPF Data Binding Continued <Some. Class Target=“{Binding Source}” /> Source Target Property. Changed event (optional) CLR Property Dependency Property CLR Field Dependency Property CLR Field

Overview of MVVM WPF Data Binding Continued Target may be chosen in a number of ways §Each control has a Data. Context §{Binding Prop}, {Binding Prop. Sub. Prop} §{Binding Prop, Converter=x} §{Binding Prop, Element. Name=x} §{Binding Prop, Relative. Source=…}

Overview of MVVM Show Me the Code!

Overview of MVVM

Overview of MVVM Bindings Map Model. Countries Country City Country. Subdivision. Name Country. Subdivisions Subdivision Country. Error City. Error Subdivision. Error Has. Subdivisions Shipment. Cost Ship. Command Shipments

Overview of MVVM WPF Data Binding: Commands <Button Command=“{Binding Ship. Command}” /> class Main. Window. View. Model { public ICommand Ship. Command { get { … } } … } bin din g

Overview of MVVM WPF Data Binding: Commands

Overview of MVVM Attached Behaviors <Text. Box. Ext. Select. All. On. Focus=“true” /> class Text. Box. Ext { Dependency. Property Select. All. On. Focus. Property = Dependency. Property. Register. Attached( “Select. All. On. Focus”…); static void On. Focus. Changed(…) { … text. Box. Select. All(); } }

Overview of MVVM Unit Tests §Can test Model in isolation §Can test View. Model in isolation §Cannot unit test data bindings! §May require use of mocking libraries to test View. Model-to-Model and View. Model-to. View interactions

Overview of MVVM Problems

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

Overview of MVVM How to Tell View to Do Something §Use attached behaviors §Have the view listen to events on View. Model §Let View. Model call the View via an interface §Use custom binding extensions, etc.

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/ §IFocus. Mover §Focus. Binding §Binding. Decorator. Base

Overview of MVVM Easier way out: have view model call an interface Model View (domain objects) (input, output) updates, may observe WPF Data Binding implements View. Model (UI state) Calls methods IView (interface)

Overview of MVVM Shipment Demo implementation:

Overview of MVVM Resources

Overview of MVVM Level of Support from Microsoft §MVVM not in. NET framework §No MVVM templates in Visual Studio §No support classes like Delegate. Command §No standard attached behaviors §Proliferation of third party MVVM toolkits

Overview of MVVM Toolkits contain one or more of §Delegate. Command/Relay. Command §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, …

Overview of MVVM Toolkits §See Wikipedia article on MVVM §MVVM Light Toolkit §Prism (a Composite UI framework) §Structured MVVM §Attached. Command. Behavior 2. 0

Overview of MVVM Books §There are not that many §“Advanced MVVM” by Josh Smith. Short overview on 54 pages, most of which are code annotation for Bubble. Burst sample from Codeplex. §“Pro WPF and Silverlight MVVM” by Gary Hall – not published yet, on pre-order

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

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

Overview of MVVM and Other MV* Patterns

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 Model observes View (output) (domain objects) changes Controller (input) http: //martinfowler. com/eaa. Dev/ui. Archs. html may update

Overview of MVVM 2004: Model View Presenter (a. k. a. supervising controller) Model observes (domain objects) updates, may observe View (input, output) 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/eaa. Dev/Supervising. Presenter. html

Overview of MVVM 2004? : Passive View Model Passive View (domain objects) (input, output) updates, may observes, updates Presenter (all presentation logic) http: //martinfowler. com/eaa. Dev/Passive. Screen. html

Overview of MVVM 2004? : Presentation Model View (domain objects) (input, output) 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/eaa. Dev/Presentation. Model. html