• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Real-world Model-View-ViewModel for WPF
 

Real-world Model-View-ViewModel for WPF

on

  • 10,741 views

Slides from a talk I gave at the DeveloperDeveloperDeveloper Sydney event. I introduce the MVVM pattern by refactoring some existing code to use MVVM, introduce commands, add some unit tests, then ...

Slides from a talk I gave at the DeveloperDeveloperDeveloper Sydney event. I introduce the MVVM pattern by refactoring some existing code to use MVVM, introduce commands, add some unit tests, then describe the pattern in detail.

Statistics

Views

Total Views
10,741
Views on SlideShare
10,116
Embed Views
625

Actions

Likes
3
Downloads
216
Comments
0

7 Embeds 625

http://www.paulstovell.com 421
http://paulstovell.com 194
http://www.paulstovell.net 5
http://theoldreader.com 2
http://www.docseek.net 1
http://feeds.feedburner.com 1
http://silverreader.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…
Post Comment
Edit your comment

    Real-world Model-View-ViewModel for WPF Real-world Model-View-ViewModel for WPF Presentation Transcript

    • Real-world MVVM in WPF
      Paul Stovell
      Senior Consultant
      Technical specialist: WPF
    • Agenda
      Part 1: Introducing MVVM
      Refactoring to MVVM
      Unit testing MVVM
      Commands
      Part 2: Formalizing MVVM
      History
      Model-View-ViewModel
      ViewModel-First
      Part 3: Playing with Others
      Navigation
      Composition
      Communication
    • About You
      Awesome coder
      Know some WPF
      Love binding!
      This is you...
    • Introducing MVVM
      Part 1
    • Demo
      Refactoring to MVVM
    • Demo
      Unit testing MVVM
    • What did we just do?
      Employee = the Model
      SearchView.xaml = the View
      SearchViewModel = the ViewModel
    • Demo
      Using Commands
    • Demo
      New requirement: search-as-you-type
    • Formalizing MVVM
      Part 2
    • History
      Presentation Model
      MVVM
      Martin Fowler
      John Gossman
    • Model-View-ViewModel
      void Button_Click(...)
      {
      viewModel.Search();
      }
      <Button Command="{Binding Search}" />
      Commands
      Methods
      View
      ViewModel
      External services
      Properties
      public void Search()
      {
      }
      ICommand Search { get;set; }
      Events
    • Model-View-ViewModel
      <TextBox Text="{Binding SearchText}" />
      Commands
      Methods
      View
      ViewModel
      public string SearchText
      {
      get { ... }
      set {
      ... Search();
      }
      }
      External services
      Properties
      Events
    • Model-View-ViewModel
      viewModel.SessionClosed += (s,e) => Close();
      Commands
      Methods
      View
      ViewModel
      External services
      Properties
      Events
      public event EventArgsSessionClosed;
    • ViewModel-First MVVM
      ViewModel.Search();
      Commands
      Methods
      View
      ViewModel
      External services
      Properties
      View.Close();
      Events
    • ViewModel-First MVVM
      public event EventHandlerSearchRequested;
      Commands
      Methods
      View
      ViewModel
      External services
      Properties
      Events
      public event EventHandlerSessionClosed;
    • Model-View-Presenter
      public event EventHandlerSearchRequested;
      Methods
      View
      Presenter
      External services
      Events
      private void View_SearchRequested(...)
      {
      // Do search
      }
    • Model-View-Presenter
      public void ShowResults(List<SearchResult> results)
      {
      listBox1.ItemsSource = results;
      }
      Methods
      View
      Presenter
      External services
      Events
      View.ShowResults(results);
    • The Model
      Service messages/DTO’s
      Domain entities/value objects
      DataSets
      LINQ to SQL objects
      Or:
      View-specific objects mapped from above
    • Instantiation and wire-up
      Internal creation:
      public CalculatorView()
      {
      InitializeComponent();
      DataContext = new CalculatorViewModel();
      }
    • Instantiation and wire-up
      ViewModel as a dependency:
      public CalculatorView(CalculatorViewModel model)
      {
      InitializeComponent();
      DataContext = model;
      }
      varviewModel = new CalculatorViewModel();
      var view = new CalculatorView(viewModel);
    • Instantiation and wire-up
      ViewModel via XAML:
      <UserControl ...>
      <UserControl.DataContext>
      <local:CalculatorViewModel />
      </UserControl.DataContext>
    • Instantiation and wire-up
      5 more ways:http://is.gd/dv7aN
    • Playing with Others
      Part 3
    • Navigation
      INavigator.Navigate(...)
      Event
      View+ViewModel
      View
      ViewModel
      URI
    • Demo
      Adding navigation with Magellan
    • Composition
      Shell ViewModel
      Search ViewModel
      Weather ViewModel
      Shell
      Search
      Weather
    • Composition
      Bottom-Up
      Order List
      Top Region
      2. Place
      Infrastructure
      Bottom Region
      1. Resolve
      Search
      Weather
    • Inter-view Communication
      Standard .NET events
      Search View Model
      Child model raises event
      Parent model forwards event
      Results View Model
      Criteria View Model
    • Inter-view Communication
      Mediator (e.g., Prism EventAggregator)
      Results ViewModel
      Criteria ViewModel
      bus.Subscribe<SearchMessage>(HandleSearch);
      Publish
      Handle
      Hub
      Publish
      Handle
      Advert ViewModel
      Recent Searches ViewModel
      bus.Publish(new SearchMessage(searchText));
    • Conclusion
      MVVM is about separation of concerns
      View has UI-specific code
      VM has behaviour and state
      Behaviour = methods/commands
      State = properties
      Separation of concerns makes code easy to test
      It’s easy: just one extra class!
    • What’s next?
      Inversion of Control containers
      Modular applications
      Pub/sub messaging
      Inductive user interfaces
      p&p Prism
    • Links
      MVVM Light: http://is.gd/duX2Q
      Caliburn: http://is.gd/duX5L
      More: http://is.gd/duWWG
      Magellan: http://is.gd/duX70
      Reuxables: http://is.gd/duX8G
    • Thanks!
      Paul Stovell
      paul.stovell@readify.net
      www.paulstovell.com
    • DeveloperDeveloperDeveloper! Events would not be possible
      With out the generous support from our sponsors…
      We would like to thank the following for their support: