Model-View-ViewModeland friends…Jonas FollesøSenior ConsultantCapgemini

AgendaMVVM IntoMVVM and DISupporting PatternsCommandEvent AggregatorService LocatorQ&A

Dive Log App

Dive Log Applicationdemo

Everything in code behind…is probably not a good idea

A team of sad coders and designersFAIL!

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-behindViewXAMLData ModelCode-BehindEvent Handlers

Model – View –ViewModelViewXAMLCode-BehindChange notificationData-binding and commandsView ModelData ModelState + Operations

Data BindingImplement INotifyPropertyChanged and use ObservableCollection<T> for collectionsView <ListBoxItemsSource="{Binding Path=Dives}"SelectedItem="{Binding Path=SelectedDive, Mode=TwoWay}" />View ModelState + Operations

Data BindingImplement INotifyPropertyChanged and use ObservableCollection<T> for collectionsViewXAMLCode-BehindView Modelpublic classDiveViewModel: INotifyPropertyChanged{ public eventPropertyChangedEventHandlerPropertyChanged;publicObservableCollection<Dive> Dives { ... }publicDiveSelectedDive { ... }}

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

A simple View Modeldemo

“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 InteractionViewprivate 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.

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

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

Commandsdemo

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

Dealing with dependenciesThe View Model is coupled with the web service.Makes code less flexible for changeMakes code harder to testObject 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 itPresentation ModelpublicPageViewModel(IDiveLogServiceClient proxy){this.proxy = proxy}But who creates the dependency?

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

IoC ContainersView ModelpublicPageViewModel(IDiveLogServiceClient proxy){this.proxy = proxy}Viewpublic Page(){InitializeComponent();IKerneliocContainer = newStandardKernel();this.DataContext = iocContainer.Get<PageViewModel>();}

Who came first?

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

View FirstThe 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 ViewModeldemo

ViewModelCommunication?View ModelView ModelFAIL!View ModelView ModelView ModelView ModelView ModelView Model

It’s all about coupling…

... or how to decouple…

EventAggregatorView ModelView ModelView ModelView ModelView ModelView ModelView ModelView Model

EventAggregatorView ModelView ModelView ModelView ModelEvent AggregatorView ModelView ModelView ModelView Model

View Model CommunicationViewViewXAMLXAMLCode-BehindCode-BehindView ModelData ModelView ModelState + OperationsData ModelState + OperationsMessagePublish messagesViewXAMLCode-BehindSubscribe to messagesEvent AggregatorView ModelMessageState + Operations

ViewModel communication using Event Aggregatordemo

MVVM CheatSheetPut State and Behaviour in View ModelInvoke Operations using CommandsCross View Model communication through Mediator/Event AggregatorService Locator to bind View to View Model (View first)

SummarySeperatedPresentationDecoupling

Q & A

Photo Copyright NoticesAll 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/