MVVM Design Pattern NDC2009

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    MVVM Design Pattern NDC2009 - Presentation Transcript

    1. Model-View-ViewModeland friends…
      Jonas Follesø
      Senior Consultant
      Capgemini
    2. Agenda
      MVVM Into
      MVVM and DI
      Supporting Patterns
      Command
      Event Aggregator
      Service Locator
      Q&A
    3. Dive Log App
    4. Dive Log Application
      demo
    5. Everything in code behind…is probably not a good idea
    6. A team of sad coders and designers
      FAIL!
    7. Lasagna FTW!
    8. 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)
    9. Separated Presentation Patterns
    10. Data & Domain Logic(Model)
      UI(View)
      Interaction (Controller/Presenter)
    11. 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
    12. The most annoying part of Presentation Model is the synchronization between Presentation Model and view…
      Martin Fowler, GUI Architectures Essay, July 2004
    13. 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
    14. Everything in code-behind
      View
      XAML
      Data Model
      Code-Behind
      Event Handlers
    15. Model – View –ViewModel
      View
      XAML
      Code-Behind
      Change notification
      Data-binding and commands
      View Model
      Data Model
      State + Operations
    16. 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
    17. 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 { ... }
      }
    18. Makes your app easier to design…makes the designers like you
    19. A simple View Model
      demo
    20. “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
    21. “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
    22. User Interaction
      View
      private voidbtnSave_Clicked(object sender, ExecutedEventArgs e)
      {
      ((PageViewModel)DataContext).Save();
      }
      But what about Word?
    23. 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.
    24. CommandPattern
      public interface ICommand
      {
      event EventHandlerCanExecuteChanged;
      boolCanExecute(object parameter);
      void Execute(object parameter);
      }
    25. 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..
      }
    26. Commands
      demo
    27. 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();
      }
      }
    28. 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
    29. 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?
    30. 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?
    31. IoC Containers
      View Model
      publicPageViewModel(IDiveLogServiceClient proxy)
      {
      this.proxy = proxy
      }
      View
      public Page()
      {
      InitializeComponent();
      IKerneliocContainer = newStandardKernel();
      this.DataContext = iocContainer.Get<PageViewModel>();
      }
    32. Who came first?
    33. ViewModel First
      The ViewModel creates the view (usually through an IoC container).
      View Model
      publicMyViewModel(IMyViewmyView)
      {
      myView.Model = this;
      }
    34. 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…
    35. Using DI on the ViewModel
      demo
    36. ViewModelCommunication?
      View Model
      View Model
      FAIL!
      View Model
      View Model
      View Model
      View Model
      View Model
      View Model
    37. It’s all about coupling…
    38. ... or how to decouple…
    39. EventAggregator
      View Model
      View Model
      View Model
      View Model
      View Model
      View Model
      View Model
      View Model
    40. EventAggregator
      View Model
      View Model
      View Model
      View Model
      Event Aggregator
      View Model
      View Model
      View Model
      View Model
    41. 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
    42. ViewModel communication using Event Aggregator
      demo
    43. 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)
    44. Summary
      SeperatedPresentation
      Decoupling
    45. Q & A
    46. 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/
    SlideShare Zeitgeist 2009

    + follesoefollesoe Nominate

    custom

    2754 views, 3 favs, 4 embeds more stats

    Presentation on the Model-View-ViewModel Design Pat more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 2754
      • 1928 on SlideShare
      • 826 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 49
    Most viewed embeds
    • 694 views on http://jonas.follesoe.no
    • 129 views on http://maonet.wordpress.com
    • 2 views on http://feeds.feedburner.com
    • 1 views on http://74.125.77.132

    more

    All embeds
    • 694 views on http://jonas.follesoe.no
    • 129 views on http://maonet.wordpress.com
    • 2 views on http://feeds.feedburner.com
    • 1 views on http://74.125.77.132

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories