Introduction To MVVM

Boulos Dib Independent Consultant

Napeague Inc. February 15, 2011

A pattern that describes how UI components interact with other application code.

Associated with Microsoft XAML platforms (Silverlight, WPF)

MVVM is not complicated, really!!!, simple is good.

Not a framework nor an implementation, just a reusable solution to a commonly occurring problem.

May not apply to every application type, only you can determine that for your application type.

MVVM is not required for Silverlight and MVVM, but can help where applicable.

It should not slow down development. If it does, re-factor your approach, something else is off.

Separation of concerns ◦ Each component has a specific role. UI Code is not

mixed with Business logic.

Natural Patterns for XAML Variants ◦ Microsoft’s XAML is designed with MVVM support in

mind (Key Enabler: DataBinding).

Enables Developer-Designer Workflow ◦ For some shops, this is long time overdue ◦ XAML/Expression/Other = Designer, Code=Developer,

XAML+Code=Integrator

Better Testability ◦ User Interface Business Logic can (and should) be tested.

Leave UI Component testing to Microsoft or Third Party Component Vendors.

MVVM Components ◦ Model ◦ View ◦ ViewModel

Each serves a distinct and separate role.

Components are decoupled from each other: ◦ Allowing for components to be swapped ◦ Allowing internal implementation to be changed without

affecting the others ◦ Allowing components to be worked on independently ◦ Enabling isolated unit testing

Business Logic and Data ◦ Business Objects, Services, Data Access Layers.

Implements Change Notification for properties. ◦ INotifyProperyChanged – Individual Property

◦ INotifyCollectionChanged – Collections

Include ObserableCollection in your daily routine.

Responsible for Model-level validation ◦ IDataErrorInfo

Independently Unit-Testable Code.

Defines the User Interface Elements (What the user sees and interacts with) ◦ UserControl, Form, Window, DataTemplate

Could be a top level component or a sub-component ◦ Custom Controls, Multiple Tabs, Wizard

May have some code-behind. DataContext is the ViewModel Controls bind to ViewModel Public Properties Behaviors can invoke ViewModel Public

methods.

Responsible for UI Logic and Data for View

Layer of abstraction between View and Data Model.

Can expose ICommand for Views

Public Methods are usable by View Behaviors

Uses DataBinding to maintain and communicate state with the View.

Implements Change Notifications.

Independently Unit-Testable Code

Code Behind ◦ View.DataContext = ViewModel

XAML ◦ StaticResource

◦ ViewModelLocator

◦ DataTemplate

Command ◦ Entry into a method – actually a property

◦ Implementation of ICommand

Execute

CanExecute

CanExcuteChanged - Event

RelayCommand

ViewModel View

ViewModel ViewModel

MVVM Light – Laurent Bugnion ◦ http://mvvmlight.codeplex.com/

Cinch – Sacha Barber ◦ http://cinch.codeplex.com/

Caliburn – Rob Eisenberg ◦ http://caliburn.codeplex.com/

Jounce – Jeremy Likness ◦ http://jounce.codeplex.com/

MVVM Foundation – Josh Smith ◦ http://mvvmfoundation.codeplex.com/