• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
MVVM Design Pattern NDC2009
 

MVVM Design Pattern NDC2009

on

  • 12,620 views

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

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

Statistics

Views

Total Views
12,620
Views on SlideShare
9,684
Embed Views
2,936

Actions

Likes
5
Downloads
326
Comments
1

21 Embeds 2,936

http://jonas.follesoe.no 2324
http://frankmao.com 279
http://maonet.wordpress.com 207
http://www.slideshare.net 34
http://www.blognewschannels.com 32
http://feeds.feedburner.com 20
http://localhost 9
http://l.lj-toys.com 7
http://www.linkedin.com 5
http://lj-toys.com 5
http://static.slidesharecdn.com 2
http://a-hum.unoke.pfu.co.jp 2
http://theoldreader.com 2
https://newsblur.com 1
https://silverreader.com 1
http://74.125.77.132 1
http://silverlightfeeds.com 1
http://www.newsblur.com 1
http://cc.bingj.com 1
http://www.tanks.lv 1
http://www.slideee.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Slide 9 is genius! Thanks!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    MVVM Design Pattern NDC2009 MVVM Design Pattern NDC2009 Presentation Transcript

    • 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
    • Q & A
    • 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/