Top Banner
ADOPTING MVVM John Cumming Senior Engineer – CM Group Ltd http://www.cmgroup.co.uk http:// sputnikdev.wordpress.com
41

Adopting MVVM

Dec 17, 2014

ReportDownload

Technology

AN introduction to MVVM

  • 1. Adopting MVVM
    John Cumming
    Senior Engineer CM Group Ltd
    http://www.cmgroup.co.uk
    http://sputnikdev.wordpress.com
  • 2. Overview
    A bit about my experience of MVVM.
    What problems adopting MVVM addresses.
    An overview of the MVVM pattern.
    Adopting MVVM.
    A simple example.
  • 3. About me
  • 4. Problems MVVM Addresses
  • 5. Typical Development Problems
    Tightly coupled brittle code that is difficult to maintain and extend.
    It can be difficult to separate UI state and logic from the UI presentation.
    Difficult to test UI state and logic.
    The designer is tied to the UI components written by the developer.
  • 6. MVVM
    Tightly coupled brittle code that is difficult to maintain and extend.
    It can be difficult to separate UI state and logic from the UI presentation.
    Difficult to test UI state and logic.
    The designer is tied to the UI components written by the developer.
    Separation of Concerns
    Natural XAML Pattern
    Increases Testability
    Dev Designer Workflow
  • 7. Separation of Concerns
    View UI Layout & User Interaction
    View Model UI State and Logic
    Model Business Logic and Data
  • 8. Natural XAML Pattern
    Data Binding DataContext
    Data Binding Dependency Properties
    Commands Executing Actions & Operations
  • 9. Increased Testability
    UI State & Logic independent of UI technology.
    A litmus test for MVVM is that you can run the application from within unit tests.
    John Gossman, Microsoft Architect for WPF and Silverlight
  • 10. Developer Designer Workflow
    Designer has freedom to design.
    Designer can work independently.
    Designer does not need to touch code.
    Designer can create design time sample data.
  • 11. MVVM Overview
  • 12. MVVM View
    The View defines the structure and appearance of the UI.
    The Views DataContext is a View Model.
    Minimal, if any, code behind.
    View updated by notification events from the View Model.
    UI Gestures are passed to the View Model, usually via Commands.
  • 13. MVVM View Model
    The View Model is responsible for UI logic, data and state.
    The View Model exposes bindable properties.
    The View Model exposes ICommand properties for UI controls with Command properties.
    The View Model exposes public methods that can be invoked by the View.
    The View Model is completely testable.
  • 14. MVVM Model
    The Model is responsible for business logic and data, the client side Domain Model.
    The Model can expose bindable properties for use by the View directly or via the View Model as an Adapter.
    Model objects can implement IDataErrorInfo to provide the View with validation state information.
  • 15. MVVM Commands
    Invoked in the View by user interaction.
    Bound to ICommand properties in the View Model.
    Differ from WPF Routed Commands as they are not delivered via the UI logical tree. Equally, Routed Commands will not get delivered to the View Model as it is outside the UI logical tree.
  • 16. Data Validation / Error Reporting
    Implement IDataErrorInfo or INotifyDataErrorInfo in View Model and Model classes.
    IDataErrorInfo presents basic indexed error information.
    INotifyDataErrorInfo presents multiple errors per property, asynchronous data validation and notification of error state changes (In WPF 4/ Silverlight 4).
  • 17. Adopting MVVM
  • 18. A Typical MVVM Application
    D:DataContext d:DesignSource
    Objects or Methods
    Design Time Data
    Param-less Contructors
    Construction and Wire Up
    Command Exposure
    IDateErrorInfoINotifyDataErrorInfo
    Order of Construction
    Error Reporting
    Dependency Injection
  • 19. Construction and Wire Up
    One-to-One loosely coupled relationship between View and View Model.
    Create View as a Data Template.
    The View Model is instantiated first.
    Data Templates are lightweight and flexible.
    No code behind is available for Data Templates.
  • 20. Construction and Wire Up
    Create the View Model in the Views XAML.
    Requires a parameterlessctor in the View Model.
    Works well in design tools.
    The View must have knowledge of the View Model type.
    Instantiate the View Model in the Views code behind.
    The View must have knowledge of the View Model type.
    Loose coupling can be achieved by use of a dependency injection container such as Unity.
  • 21. Provision of Design Time Data
    Expression Blend XML Sample Data.
    Simple to create in Blend.
    Not rendered in Visual Studio.
    Sample data not compiled in, but schema is.
    XAML Sample Data.
    Uses d:DesignData XAML markup extension.
    Supported in Blend 4 and VS2010.
    XAML sample data is not compiled into assemblies.
  • 22. Provision of Design Time Data
    XAML Resource.
    Provide a simple resource instantiating desired types.
    Useful for quick throw away data when editing a template.
    Code.
    Uses d:DataContext and d:DesignInstance XAML markup extensions.
    May need to be maintained by developers.
  • 23. Key Decisions
    Construct Views or View Models first and use of a dependency injection container.
    Expose Commands from the View Model as Command objects or Command methods.
    Use of IDataErrorInfo / INotifyDataErrorInfo.
    Provision of design time data for use in Expression Blend.
  • 24. An MVVM Example
  • 25. In the Box MVVM Training
    http://karlshifflett.wordpress.com/2010/11/07/in-the-box-ndash-mvvm-training/
  • 26. Basic WPF Application
    User Can Select Media Folder
    List of Media is Displayed
    User Can Double Click to Play
    User Can Pause and Resume Playback
    Current Track is Displayed
  • 27. Pre MVVM
    UI Interactions implemented as code behind
    Bootstrapping StartupUri for App
    UI Binding to MediaFile Properties
    private void MediaList_MouseDoubleClick(object sender, MouseButtonEventArgse)
    {
    MediaFilemediaFile = MediaList.SelectedItem as MediaFile;
    if (mediaFile != null)
    {
    _mediaFolder.Play(mediaFile);
    CurrentItem.DataContext= mediaFile;
    }
    }
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    _mediaFolder.Load(this.MediaFolderPath.Text);
    this.MediaList.ItemsSource= _mediaFolder.MediaFiles;
  • 28. Pre MVVM - Comments
    Low Concept Count. It is a simple app after all!
    Minimal code required for implementation.
    Testability - All UI logic and state is implemented as code behind and is difficult to test.
    Coupling - The MainWindow class needs knowledge of the data types.
    Extensibility / Maintainability Code rapidly becomes complex and potentially confusing as new UI features are added.
  • 29. MVVM
    Bootstrapping Dependency Injection
    Separate View Components in UI
    Implement View Models
    Bindable Properties
    Command Properties
    Decouple View Models and Model
  • 30. MVVM View Components

    SelectedDirectoryView

    MediaListView

    NowPlayingView
  • 31. MVVM View Components
    MainWindow.xaml













    ContentTemplate="{StaticResourceSelectedDirectoryViewTemplate}"/>
    ContentTemplate="{StaticResourceMediaListViewTemplate}"/>
    ContentTemplate="{StaticResourceNowPlayingViewTemplate}"/>


  • 32. MVVM View Components
    SelectedDirectoryView.xaml
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:WpfMediaPlayer.ViewModels">



    DataType="{x:Typevm:ISelectedDirectoryViewModel}" >






    Text="{BindingDirectoryPath, Mode=OneWay}"/>

    Select Directory




  • 33. MVVM View Components
    A little excessive for a small app?
    Extensible We can easily extend the individual Views if we wish without affecting the other views.
    Implement Views as Data templates
  • 34. MVVM View Model Components

    SelectedDirectoryView

    MediaListView

    IMediaListViewModel

    ISelectedDirectoryViewModel
    Commands:
    + ICommandPlayCommand
    Properties:
    + ObsCol MediaFiles
    Commands:
    + ICommandOpenCommand
    Properties:
    + String DirectoryPath

    NowPlayingView

    INowPlayingViewModel
    Commands:
    + ICommandPauseResumeCommand
    Properties:
    +
  • 35. MVVM View Model Components
    ISelectedDirectoryViewModel.cs
    interfaceISelectedDirectoryViewModel : INotifyPropertyChanged
    {
    StringDirectoryPath
    {
    get;
    }
    ICommandOpenCommand
    {
    get;
    }
    }
  • 36. MVVM View Model Components
    Decoupling UI actions using Commands.
    NowPlayingViewModel provides an adapter for the IMediaFile.
    Other Views bind directly to IMediaFile.
    UI behaviour is now completely testable as there is no code behind any of the Views.
  • 37. Model Components

    SelectedDirectoryView

    MediaListView

    IMediaListViewModel

    ISelectedDirectoryViewModel
    IMediaFile
    Commands:
    + ICommandPlayCommand
    Properties:
    + ObsCol MediaFiles
    Commands:
    + ICommandOpenCommand
    Properties:
    + String DirectoryPath
    IMediaFolder

    MediaFile
    MediaFolder
    MediaPlayer

    NowPlayingView

    INowPlayingViewModel
    Commands:
    + ICommandPauseResumeCommand
    Properties:
    +
  • 38. MVVM Bootstrapping
    App.xaml.cs
    protectedoverridevoidOnStartup(StartupEventArgs e)
    {
    using (IUnityContainer container = newUnityContainer())
    {
    // register models
    container.RegisterType
    (newContainerControlledLifetimeManager());
    // register view models
    container.RegisterType
    (newContainerControlledLifetimeManager());
    container.RegisterType
    (newContainerControlledLifetimeManager());
    container.RegisterType
    (newContainerControlledLifetimeManager());
    MainWindowwindow = container.Resolve();
    window.SelectedDirectoryView.DataContext=
    container.Resolve();
    window.MediaListView.DataContext= container.Resolve();
    window.NowPlayingView.DataContext= container.Resolve();
    window.Show();
    }
    }
  • 39. MVVM - Comments
    Testability UI Logic and state is independent of UI layout.
    The layers have been successfully decoupled to assist in independent testing and development of components.
    The code is potentially simpler to extend into a larger application and will be simpler to maintain.
    High Concept Count, especially for a simple app.
  • 40. Summary
    The MVVM pattern is well suited for WPF / Silverlight development.
    Adopting MVVM can improve maintainability.
    Adopting MVVM can improve quality.
    Adopting MVVM frees up designer creativity.
    Adopting MVVM can improve the product.
  • 41. Questions
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.