Blissful Separation of Concerns with Model-View-ViewModel (MVVM)

Transcription

1 Blissful Separation of Concerns with Model-View-ViewModel (MVVM) Brian Noyes Chief Architect, Level: Intermediate About Brian Chief Architect IDesign Inc. ( Microsoft Regional Director Microsoft MVP Silverlight Publishing Developers Guide to Microsoft Prism 4, O Reilly & Assoc., March 2011 Developing Applications with Windows Workflow Foundation, LiveLessons training DVD, June 2007 Smart Client Deployment with ClickOnce, Addison Wesley, January 2007 Data Binding in Windows Forms 2.0, Addison Wesley, January 2006 The Silverlight Show, MSDN Magazine, MSDN Online, CoDe Magazine brian.noyes@idesign.net Blog: Speaking VSLive!, DevConnections, Microsoft TechEd,, DevTeach, INETA User Groups 1

2 Agenda MVVM Concepts Basics of MVVM MVVM Navigation and Hierarchies UI Patterns Goals Architectural goals Loose coupling Separation of concerns Leads to Testability Maintainability Extensibility Putting all your logic here is not good enough 2

3 MVVM Roots Model-View-ViewModelhas its roots in two other separation patterns Model View Controller (MVC) Model View Presenter (MVP) Model and View mean the same thing in all three Subtle variations on the responsibilities and communications of the third party MVVM is a derivative implementation pattern from the Presentation Model design pattern MVP Variations Passive View View Presenter Model Supervising Controller View Presenter Model 3

4 MVVM Model Exposure Wrapped Model View ViewModel Model Exposed Model View ViewModel Model View Responsibilities Contains the structural definition of the visual elements you see on screen Mostly static Can include dynamic behaviors (i.e. animations) Goal: No code-behind All non-visual behavior goes in the ViewModelor Model 4

5 ViewModel Responsibilities Provide state (data) to the view suitable for binding Properties that contain model data Exposed or wrapped Expose properties to support the view that are not part of the model Ex: Flag to drive expansion of an expander or visibility of a DataGrid column ViewModel Responsibilities Supplement, simplify, or transform model properties Wrapping the model Ex: Denormalizethe object model into collections suitable for binding INotifyPropertyChanged implementation or validation Transform: Ex: Expose a booleanproperty for a particular enum value in the model 5

6 ViewModel Responsibilities Encapsulate interaction logic for the view Different from business logic What happens when a user does something the workflow from the UI perspective, not the implementation details Manipulate and maintain the state for the view Service/data access/repository calls Note: State provided by the ViewModel should not dictate appearance No Color, Visibility, etc properties Model Responsibilities Everything Else Data structure definitions If exposing the model objects through the view model for Binding: Property change notification support Validation support Transactional edit support Service calls Data access Authentication/authorization Etc 6

7 MVVM and XAML MVVM leans heavily on the capabilities of WPF/Silverlight/WinRT Data Binding Property Change notifications Commands Validation Also available for HTML 5 / JavaScript clients Knockoutjs.com MVVM Mindset Bindings are the contract between the view and the ViewModel Things happen in the view based on property change notifications from the ViewModel Things happen in the ViewModelfrom either properties changed by the view or from Command invocations from the view 7

8 MVVM Relationships View.DataContext = ViewModel The basic equation of MVVM View : ViewModel 1 : 1 at runtime always 1 : 1 at design time (type definition) -usually Marrying View and ViewModel Statically ViewModelwired up in the XAML ViewModelconstructed in the code behind of the view Dynamically Implicit DataTemplate containing view for ViewModel type Dependency injection in the view or view model ViewModelLocator 8

9 MVVM Communication ViewModel-> View PropertyChanged, CollectionChanged View -> ViewModel Property set Commands Behaviors InvokeCommandAction CallMethodAction ChangePropertyAction View Model Navigation Child views can be constructed and navigated to through view model manipulation alone Parent exposes child view model property or collection Parent changes current child view model in the property or collection, or adds/removes child view models to cause the screen to change DataTemplatesand Bindings provide the glue to construct the approviateview based on the changing view models 9

10 MVVM Toolkits Prism Minimal MVVM infrastructure, mostly guidance and samples MVVM Light Rich framework with infrastructure classes, VS project/item templates Caliburn Micro Convention over configuration Event aggregator Coroutines Actions Summary Prism book Upcoming WinRT XAML MVVM Pluralsight Course (Oct 2012) MVVM Light Caliburn Micro Blog: 10