MVVM Design Pattern NDC2009

Model-View-ViewModeland friends…
Jonas Follesø
Senior Consultant
Capgemini

Agenda
MVVM Into
MVVM and DI
Supporting Patterns
Command
Event Aggregator
Service Locator
Q&A

Dive Log App

Dive Log Application
demo

Everything in code behind…is probably not a good idea

A team of sad coders and designers
FAIL!

Lasagna FTW!

Different people reading about MVC in different places take different ideas from it and describe these as “MVC”.
Martin Fowler, GUI Architectures Essay (July 2006)

Separated Presentation Patterns

Data & Domain Logic(Model)
UI(View)
Interaction (Controller/Presenter)

Presentation Model is of a fully self-contained class that represents all the data and behavior of the UI, but without any of the controls used to render that UI on the screen. A view then simply projects the state of the presentation model onto the glass.
Martin Fowler, Presentation Model Essay, July 2004

The most annoying part of Presentation Model is the synchronization between Presentation Model and view…
Martin Fowler, GUI Architectures Essay, July 2004

Ideally some kind of framework could handle this, which I'm hoping will happen some day with technologies like .NET's data binding.
Martin Fowler, Presentation Model Essay, July 2004

Everything in code-behind
View
XAML
Data Model
Code-Behind
Event Handlers

Model – View –ViewModel
View
XAML
Code-Behind
Change notification
Data-binding and commands
View Model
Data Model
State + Operations

Data Binding
Implement INotifyPropertyChanged and use ObservableCollection<T> for collections
View
<ListBox
ItemsSource="{Binding Path=Dives}"
SelectedItem="{Binding Path=SelectedDive, Mode=TwoWay}" />
View Model
State + Operations

Data Binding
Implement INotifyPropertyChanged and use ObservableCollection<T> for collections
View
XAML
Code-Behind
View Model
public classDiveViewModel: INotifyPropertyChanged
{
public eventPropertyChangedEventHandlerPropertyChanged;
publicObservableCollection<Dive> Dives { ... }
publicDiveSelectedDive { ... }
}

Makes your app easier to design…makes the designers like you

A simple View Model
demo

“Once a developer becomes comfortable with WPF and MVVM, it can be difficult to differentiate the two.”
Josh Smith, WPF Apps With The Model-View-ViewModel Design Pattern

“MVVM is the lingua franca of WPF developers because it is well suited to the WPF platform, and WPF was designed to make it easy to build applications using the MVVM pattern”
Josh Smith, WPF Apps With The Model-View-ViewModel Design Pattern

User Interaction
View
private voidbtnSave_Clicked(object sender, ExecutedEventArgs e)
{
((PageViewModel)DataContext).Save();
}
But what about Word?

Objects are used to represent actions. A command object encapsulates an action and its parameters. This allows a decoupling of the invoker of the command and the handlers of the command.

CommandPattern
public interface ICommand
{
event EventHandlerCanExecuteChanged;
boolCanExecute(object parameter);
void Execute(object parameter);
}

Commands in Silverlight
View
<Button
Content=“Delete Dive”
commands:Click.CommandParameter=“{Binding}”
commands:Click.Command=“DeleteCommand” />
View Model
privateICommandDeleteCommand { get; private set; }
publicPageViewModel()
{
DeleteCommand = newDelegateCommand<Dive>(DeleteDive);
}
private voidDeleteDive(Dive dive)
{
// code to save dives..
}

Commands
demo

The strategy pattern is a software design pattern, whereby algorithms can be selected at runtime.
View Model
publicPageViewModel()
{
if(HtmlPage.IsEnabled)
{
client = newDiveLogServiceClient();
}
else
{
client = newServiceStub();
}
}

Dealing with dependencies
The View Model is coupled with the web service.
Makes code less flexible for change
Makes code harder to test
Object should not be responsible for creating their own dependencies – Inversion of Control

Dependency Injection (DI)
One form of Inversion of Control (IoC)
Create dependencies outside the object and, inject them into it
Presentation Model
publicPageViewModel(IDiveLogServiceClient proxy)
{
this.proxy = proxy
}
But who creates the dependency?

Dependency Injection by hand
View
public Page()
{
InitializeComponent();
if (HtmlPage.IsEnabled)
this.DataContext = newPageViewModel(newDiveLogServiceClient());
else
this.DataContext = newPageViewModel(newServiceStub());
}
Should the page be responsible for creating dependencies?

IoC Containers
View Model
publicPageViewModel(IDiveLogServiceClient proxy)
{
this.proxy = proxy
}
View
public Page()
{
InitializeComponent();
IKerneliocContainer = newStandardKernel();
this.DataContext = iocContainer.Get<PageViewModel>();
}

Who came first?

ViewModel First
The ViewModel creates the view (usually through an IoC container).
View Model
publicMyViewModel(IMyViewmyView)
{
myView.Model = this;
}

View First
The View has a relationship to its ViewModel (usually through data binding).
View
<UserControl.DataContext>
<dive:PageViewModel />
</UserControl.DataContext>
Available at design time (Blend support)
Need to find a way to use IoC and set DataContext declaratively…

Using DI on the ViewModel
demo

ViewModelCommunication?
View Model
View Model
FAIL!
View Model
View Model
View Model
View Model
View Model
View Model

It’s all about coupling…

... or how to decouple…

EventAggregator
View Model
View Model
View Model
View Model
View Model
View Model
View Model
View Model

EventAggregator
View Model
View Model
View Model
View Model
Event Aggregator
View Model
View Model
View Model
View Model

View Model Communication
View
View
XAML
XAML
Code-Behind
Code-Behind
View Model
Data Model
View Model
State + Operations
Data Model
State + Operations
Message
Publish messages
View
XAML
Code-Behind
Subscribe to messages
Event Aggregator
View Model
Message
State + Operations

ViewModel communication using Event Aggregator
demo

MVVM CheatSheet
Put State and Behaviour in View Model
Invoke Operations using Commands
Cross View Model communication through Mediator/Event Aggregator
Service Locator to bind View to View Model (View first)

Summary
SeperatedPresentation
Decoupling

Photo Copyright Notices
All diving photos taken by HegeRøkenes and licensed under the creative commons license. http://flickr.com/photos/hegerokenes/
Photos of Martin Fowler taken by Dave Thomas and licensed under the creative commons license.http://flickr.com/photos/pragdave/

http://jonas.follesoe.no	2175
http://frankmao.com	240
http://maonet.wordpress.com	180
http://www.slideshare.net	34
http://www.blognewschannels.com	32
http://feeds.feedburner.com	17
http://l.lj-toys.com	7
http://lj-toys.com	5
http://static.slidesharecdn.com	2
http://a-hum.unoke.pfu.co.jp	2
http://www.linkedin.com	1
http://www.newsblur.com	1
http://www.tanks.lv	1
http://silverlightfeeds.com	1
http://cc.bingj.com	1
http://74.125.77.132	1
http://theoldreader.com	1

MVVM Design Pattern NDC2009

by Jonas Follesø

Accessibility

Categories

Upload Details

Usage Rights

17 Embeds 2,701

Statistics

MVVM Design Pattern NDC2009 Presentation Transcript