Real-world Model-View-ViewModel for WPF
Upcoming SlideShare
Loading in...5
×
 

Real-world Model-View-ViewModel for WPF

on

  • 10,947 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,947
Views on SlideShare
10,314
Embed Views
633

Actions

Likes
3
Downloads
217
Comments
0

7 Embeds 633

http://www.paulstovell.com 421
http://paulstovell.com 202
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: