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

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

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 behind…is probably not a good idea

7. A team of sad coders and designers FAIL!

8. Lasagna FTW!

10. 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)

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<T> for collections View <ListBox ItemsSource="{Binding Path=Dives}" SelectedItem="{Binding Path=SelectedDive, Mode=TwoWay}" /> View Model State + Operations

19. 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 { ... } }

20. Makes your app easier to design…makes 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 <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.. }

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<PageViewModel>(); }

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 <UserControl.DataContext> <dive:PageViewModel /> </UserControl.DataContext> 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. It’s 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 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/