MVVM Design Pattern NDC2009
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

MVVM Design Pattern NDC2009

on

  • 12,812 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,812
Views on SlideShare
9,848
Embed Views
2,964

Actions

Likes
5
Downloads
332
Comments
2

22 Embeds 2,964

http://jonas.follesoe.no 2335
http://frankmao.com 279
http://maonet.wordpress.com 223
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://lj-toys.com 5
http://www.linkedin.com 5
http://static.slidesharecdn.com 2
http://a-hum.unoke.pfu.co.jp 2
http://theoldreader.com 2
https://silverreader.com 1
http://www.slideee.com 1
https://newsblur.com 1
http://www.newsblur.com 1
http://www.tanks.lv 1
http://silverlightfeeds.com 1
http://cc.bingj.com 1
http://74.125.77.132 1
https://maonet.wordpress.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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi,

    Here is the link of implementation of MVVM pattern in WPF with Example
    http://wpftutorial.co/WPF-MVVM-Patern

    Thanks
    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 Presentation Transcript

  • 1. Model-View-ViewModeland friends…
    Jonas Follesø
    Senior Consultant
    Capgemini
  • 2.
  • 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!
  • 9.
  • 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/