MVVM Design Pattern NDC2009


Published on

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

Published in: Technology, Business
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

MVVM Design Pattern NDC2009

  1. 1. Model-View-ViewModeland friends…<br />Jonas Follesø<br />Senior Consultant<br />Capgemini<br />
  2. 2.
  3. 3. Agenda<br />MVVM Into<br />MVVM and DI<br />Supporting Patterns<br />Command<br />Event Aggregator<br />Service Locator<br />Q&A<br />
  4. 4. Dive Log App<br />
  5. 5. Dive Log Application<br />demo<br />
  6. 6. Everything in code behind…is probably not a good idea<br />
  7. 7. A team of sad coders and designers<br />FAIL!<br />
  8. 8. Lasagna FTW!<br />
  9. 9.
  10. 10. Different people reading about MVC in different places take different ideas from it and describe these as “MVC”.<br />Martin Fowler, GUI Architectures Essay (July 2006)<br />
  11. 11. Separated Presentation Patterns<br />
  12. 12. Data & Domain Logic(Model)<br />UI(View)<br />Interaction (Controller/Presenter)<br />
  13. 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.<br />Martin Fowler, Presentation Model Essay, July 2004<br />
  14. 14. The most annoying part of Presentation Model is the synchronization between Presentation Model and view…<br />Martin Fowler, GUI Architectures Essay, July 2004<br />
  15. 15. Ideally some kind of framework could handle this, which I&apos;m hoping will happen some day with technologies like .NET&apos;s data binding.<br />Martin Fowler, Presentation Model Essay, July 2004<br />
  16. 16. Everything in code-behind<br />View<br />XAML<br />Data Model<br />Code-Behind<br />Event Handlers<br />
  17. 17. Model – View –ViewModel<br />View<br />XAML<br />Code-Behind<br />Change notification<br />Data-binding and commands<br />View Model<br />Data Model<br />State + Operations<br />
  18. 18. Data Binding<br />Implement INotifyPropertyChanged and use ObservableCollection&lt;T&gt; for collections<br />View<br /> &lt;ListBox<br />ItemsSource=&quot;{Binding Path=Dives}&quot;<br />SelectedItem=&quot;{Binding Path=SelectedDive, Mode=TwoWay}&quot; /&gt;<br />View Model<br />State + Operations<br />
  19. 19. Data Binding<br />Implement INotifyPropertyChanged and use ObservableCollection&lt;T&gt; for collections<br />View<br />XAML<br />Code-Behind<br />View Model<br />public classDiveViewModel: INotifyPropertyChanged<br />{<br /> public eventPropertyChangedEventHandlerPropertyChanged;<br />publicObservableCollection&lt;Dive&gt; Dives { ... }<br />publicDiveSelectedDive { ... }<br />}<br />
  20. 20. Makes your app easier to design…makes the designers like you<br />
  21. 21. A simple View Model<br />demo<br />
  22. 22. “Once a developer becomes comfortable with WPF and MVVM, it can be difficult to differentiate the two.”<br />Josh Smith, WPF Apps With The Model-View-ViewModel Design Pattern<br />
  23. 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”<br />Josh Smith, WPF Apps With The Model-View-ViewModel Design Pattern<br />
  24. 24. User Interaction<br />View<br />private voidbtnSave_Clicked(object sender, ExecutedEventArgs e)<br />{<br /> ((PageViewModel)DataContext).Save();<br />}<br />But what about Word?<br />
  25. 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. <br />
  26. 26. CommandPattern<br />public interface ICommand<br />{<br /> event EventHandlerCanExecuteChanged;<br />boolCanExecute(object parameter);<br /> void Execute(object parameter);<br />}<br />
  27. 27. Commands in Silverlight<br />View<br /> &lt;Button<br />Content=“Delete Dive”<br />commands:Click.CommandParameter=“{Binding}”<br />commands:Click.Command=“DeleteCommand” /&gt;<br />View Model<br />privateICommandDeleteCommand { get; private set; }<br />publicPageViewModel()<br />{<br />DeleteCommand = newDelegateCommand&lt;Dive&gt;(DeleteDive);<br />}<br />private voidDeleteDive(Dive dive)<br />{<br />// code to save dives..<br />}<br />
  28. 28. Commands<br />demo<br />
  29. 29. The strategy pattern is a software design pattern, whereby algorithms can be selected at runtime.<br />View Model<br />publicPageViewModel()<br />{<br />if(HtmlPage.IsEnabled)<br /> {<br /> client = newDiveLogServiceClient();<br /> }<br />else<br /> {<br /> client = newServiceStub();<br /> }<br />}<br />
  30. 30. Dealing with dependencies<br />The View Model is coupled with the web service.<br />Makes code less flexible for change<br />Makes code harder to test<br />Object should not be responsible for creating their own dependencies – Inversion of Control<br />
  31. 31. Dependency Injection (DI)<br />One form of Inversion of Control (IoC) <br />Create dependencies outside the object and, inject them into it<br />Presentation Model<br />publicPageViewModel(IDiveLogServiceClient proxy)<br />{<br />this.proxy = proxy<br />}<br />But who creates the dependency?<br />
  32. 32. Dependency Injection by hand<br />View<br />public Page()<br />{<br />InitializeComponent();<br />if (HtmlPage.IsEnabled)<br />this.DataContext = newPageViewModel(newDiveLogServiceClient());<br />else<br />this.DataContext = newPageViewModel(newServiceStub());<br />}<br />Should the page be responsible for creating dependencies?<br />
  33. 33. IoC Containers<br />View Model<br />publicPageViewModel(IDiveLogServiceClient proxy)<br />{<br />this.proxy = proxy<br />}<br />View<br />public Page()<br />{<br />InitializeComponent();<br />IKerneliocContainer = newStandardKernel();<br />this.DataContext = iocContainer.Get&lt;PageViewModel&gt;();<br />}<br />
  34. 34. Who came first?<br />
  35. 35. ViewModel First<br />The ViewModel creates the view (usually through an IoC container).<br />View Model<br />publicMyViewModel(IMyViewmyView)<br />{<br />myView.Model = this;<br />}<br />
  36. 36. View First<br />The View has a relationship to its ViewModel (usually through data binding).<br />View<br />&lt;UserControl.DataContext&gt;<br />&lt;dive:PageViewModel /&gt;<br />&lt;/UserControl.DataContext&gt;<br />Available at design time (Blend support)<br />Need to find a way to use IoC and set DataContext declaratively…<br />
  37. 37. Using DI on the ViewModel<br />demo<br />
  38. 38. ViewModelCommunication?<br />View Model<br />View Model<br />FAIL!<br />View Model<br />View Model<br />View Model<br />View Model<br />View Model<br />View Model<br />
  39. 39. It’s all about coupling…<br />
  40. 40. ... or how to decouple…<br />
  41. 41. EventAggregator<br />View Model<br />View Model<br />View Model<br />View Model<br />View Model<br />View Model<br />View Model<br />View Model<br />
  42. 42. EventAggregator<br />View Model<br />View Model<br />View Model<br />View Model<br />Event Aggregator<br />View Model<br />View Model<br />View Model<br />View Model<br />
  43. 43. View Model Communication<br />View<br />View<br />XAML<br />XAML<br />Code-Behind<br />Code-Behind<br />View Model<br />Data Model<br />View Model<br />State + Operations<br />Data Model<br />State + Operations<br />Message<br />Publish messages<br />View<br />XAML<br />Code-Behind<br />Subscribe to messages<br />Event Aggregator<br />View Model<br />Message<br />State + Operations<br />
  44. 44. ViewModel communication using Event Aggregator<br />demo<br />
  45. 45. MVVM CheatSheet<br />Put State and Behaviour in View Model<br />Invoke Operations using Commands<br />Cross View Model communication through Mediator/Event Aggregator<br />Service Locator to bind View to View Model (View first)<br />
  46. 46. Summary<br />SeperatedPresentation<br />Decoupling<br />
  47. 47. Q & A<br />
  48. 48. Photo Copyright Notices<br />All diving photos taken by HegeRøkenes and licensed under the creative commons license.<br />Photos of Martin Fowler taken by Dave Thomas and licensed under the creative commons license.<br />