MVVM Design Pattern NDC2009

Embed Size (px)

DESCRIPTION

Presentation on the Model-View-ViewModel Design Pattern for Silverlight application. Presented by Jonas Follesø at the Norwegian Developer Conference 2009.

Text of MVVM Design Pattern NDC2009

  • 1.Model-View-ViewModeland friends
    Jonas Folles
    Senior Consultant
    Capgemini

2. 3. Agenda
MVVM Into
MVVM and DI
Supporting Patterns
Command
Event Aggregator
Service Locator
Q&A
4. Dive Log App
5. Dive Log Application
demo
6. Everything in code behindis probably not a good idea
7. A team of sad coders and designers
FAIL!
8. Lasagna FTW!
9. 10. Different people reading about MVC in different places take different ideas from it and describe these as MVC.
Martin Fowler, GUI Architectures Essay (July2006)
11. Separated Presentation Patterns
12. Data & Domain Logic(Model)
UI(View)
Interaction (Controller/Presenter)
13. 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
14. The most annoying part of Presentation Model is the synchronization between Presentation Model and view
Martin Fowler, GUI Architectures Essay, July 2004
15. 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
16. Everything in code-behind
View
XAML
Data Model
Code-Behind
Event Handlers
17. Model View ViewModel
View
XAML
Code-Behind
Change notification
Data-binding and commands
View Model
Data Model
State + Operations
18. Data Binding
Implement INotifyPropertyChanged and use ObservableCollection for collections
View

View Model
State + Operations
19. Data Binding
Implement INotifyPropertyChanged and use ObservableCollection for collections
View
XAML
Code-Behind
View Model
public classDiveViewModel: INotifyPropertyChanged
{
public eventPropertyChangedEventHandlerPropertyChanged;
publicObservableCollection Dives { ... }
publicDiveSelectedDive { ... }
}
20. Makes your app easier to designmakes the designers like you
21. A simple View Model
demo
22. 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
23. 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
24. User Interaction
View
private voidbtnSave_Clicked(object sender, ExecutedEventArgs e)
{
((PageViewModel)DataContext).Save();
}
But what about Word?
25. 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.
26. CommandPattern
public interface ICommand
{
event EventHandlerCanExecuteChanged;
boolCanExecute(object parameter);
void Execute(object parameter);
}
27. Commands in Silverlight
View

View Model
privateICommandDeleteCommand { get; private set; }
publicPageViewModel()
{
DeleteCommand = newDelegateCommand(DeleteDive);
}
private voidDeleteDive(Dive dive)
{
// code to save dives..
}
28. Commands
demo
29. 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();
}
}
30. 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
31. 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?
32. 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?
33. IoC Containers
View Model
publicPageViewModel(IDiveLogServiceClient proxy)
{
this.proxy = proxy
}
View
public Page()
{
InitializeComponent();
IKerneliocContainer = newStandardKernel();
this.DataContext = iocContainer.Get();
}
34. Who came first?
35. ViewModel First
The ViewModel creates the view (usually through an IoC container).
View Model
publicMyViewModel(IMyViewmyView)
{
myView.Model = this;
}
36. View First
The View has a relationship to its ViewModel (usually through data binding).
View



Available at design time (Blend support)
Need to find a way to use IoC and set DataContext declaratively
37. Using DI on the ViewModel
demo
38. ViewModelCommunication?
View Model
View Model
FAIL!
View Model
View Model
View Model
View Model
View Model
View Model
39. Its all about coupling
40. ... or how to decouple
41. EventAggregator
View Model
View Model
View Model
View Model
View Model
View Model
View Model
View Model
42. EventAggregator
View Model
View Model
View Model
View Model
Event Aggregator
View Model
View Model
View Model
View Model
43. 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
44. ViewModel communication using Event Aggregator
demo
45. 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)
46. Summary
SeperatedPresentation
Decoupling
47. Q & A
48. Photo Copyright Notices
All diving photos taken by HegeRkenes 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/