Advanced Topics for Building Large-Scale Applications with Microsoft Silverlight

1. CL22 Advanced Topics for Building Large-Scale Applications with Microsoft Silverlight John Papa Senior Technical Evangelist Microsoft Corporation

2. Outline • MVVM • Model – View – ViewModel • What it does • Where it works well • Variations • Prism • Enabling MVVM • Filling the gaps • Options

3. Goals • Understand MVVM’s Role in Silverlight • Many ways to accomplish your goal • See it in Action • Learn about MVVM Enablers • Prism • Roll Your Own

4. Another MC_ Acronym? • MVVM • MVC • MVP • MV???? • Commonly accepted patterns for maintainable, scalable applications

5. MVVMThe What and Why • Separation of concerns • View = handles UI • Model = contains the pure data • ViewModel = communicates between View and Model through bindings • Works GREAT for Silverlight and WPF • XAML based data bindings • Testable

6. The MVVM TriadPutting it Together • Display data in Controls • UI Friendly Entities, UI State, Actions • Entities representing data View ViewModel Model

7. ModelMVVM • Represents the data • The entity • Not required to know where it gets its data from • From a WCF service. WCF RIA Services, etc • May contain validation

8. ViewMVVM • The screen, the UI, the UserControl in Silverlight • Handles UI look and feel • Presentation of information • Communicates with ViewModel through bindings

9. ViewModelMVVM • Main source of logic for the MVVM triad • Connects the Model to the View • Abstracts the View • Public properties that are bound to a View • INotifyPropertyChanged and INotifyCollectionChanged talk to the View through bindings • Listens for changes from the View through bindings • Invokes services to communicate outside the MVVM triad

10. Which Way Do I Go?MVVM Variations • View must be paired with a ViewModel somehow • Several workable options • Maintain the spirit of each of the components of the MVVM triad

11. View First MVVM Variations • ViewModel is declared as a Static Resource in the View’s XAML • Works well in Expression Blend • Another way is to create ViewModel in the View’s code-behind

12. View First MVVM demo

13. ViewModel FirstMVVM Variations • View is injected into the ViewModel’s constructor • Example: • ViewModel is created then the View is created using Dependency Injection

14. View and ViewModel MarriageMVVM Variations • View must be paired with a ViewModel somehow • ViewModel and View are created through an intermediary, then paired together

15. Marrying the View to the ViewModel • vm = new MyVM(); • view = new MyView(); • view.DataContext = vm; • // With Unity • vm = container.Resolve<IMyVM>(); • view = container.Resolve<MyView>(); • view.DataContext = vm;

16. Prism 2Be Picky • Prism is a set of options • Use what you want and ignore the rest • Example: • Choose Modules and Commanding, but ignore Event Aggregation and Regions

17. Prism Technical Concepts Commands Shell Modules Bootstrapper Event Aggregation Container Regions Unity and DI

18. BootstrapperLet’s Get this Party Started! • Kicks off the application • Starts the main UI container (the Shell) • Registers Modules and loads, if needed • Registers any global singletons (optional) • Usually contained in the “Bootstrapper project”

19. ShellThe Main View • The main UI container • Houses all of the Views that will be loaded • Can be split into Regions • Knows nothing of what will be loaded into it

20. RegionsContent Areas • Area(s) in the Shell where Views can be placed • Given a name • Can contain context, if needed • RegionManager exists to help maintain Regions

21. ModularitySelf Contained Modules • To the user this is seamless • Developed separately • Do not reference other modules • Solution is split into Modules • Example: • City government application • Module 1: Managing land parcels • Module 2: Traffic light administration • Module 4: City Parks • Modules share infrastructure and Models

22. Dependency InjectionUsing Unity • Unity or other DI Tools (Ninject) • Testability and mocking • Abstraction • Container object allows classes to be registered against their interfaces • When an interface is requested, the container creates the class registered with the interface • Supports singletons, too

23. Register the Interface to the Class • container.RegisterType • <IMyViewModel, MyViewModel>();

24. Create the Concrete Class • container.Resolve<IMyViewModel>();

25. InfrastructureCommon Tools • A Silverlight class library project • Contains shareable items for the modules • Classes • Assets • Resources • Makes no references • A pure library

26. CommandingActionsand Reactions • Allows events between a View and a ViewModel through Data Binding • ViewModel declares the Command receiver • Command is declarative in XAML • Button - Click • ListBox (Selector) – Selected • Command is data bound to the ViewModel’s command receiver • Can be disabled/enabled based on rules

27. Event AggregatorPublisher and Subscriber • Allows events of any kind to be published and subscribed to • Can be cross module • Can be filtered by subscribers • For example: • Click on a menu item in the Shell • Event is invoked by the publisher • Event is received by the subscriber • The subscriber then loads a View in a Region in the Shell

28. InfrastructureCommon Tools • Infrastructure is a Silverlight class library project • Contains classes, assets, resources that are shared amongst the Modules • Does not reference any modules • Does not make calls to web services • It’s a pure library

29. Modular MVVM and Prism demo

30. Screen Presentation EnablerEnabling Screens • Must be able to navigate between screens • Views do not know about each other • Roll Your Own Screen Conductor • Loading/unloading • Displaying/hiding • Can I Leave? • Clean yourself up!

31. Screen Presentation FrameworkKey Players • Screen • Manages the MVVM triad • ScreenFactory • Creates a Screen class • ScreenFactoryRegistry • A ScreenFactory directory • ScreenConductor • Listens for & acts upon screen activation events • ScreenCollection • Collects screens

32. Screen Conductor demo

33. Resources • My blog: http://www.johnpapa.net • Twitter: @john_papa • Prism from Patterns and Practices • http://www.codeplex.com/prism • Article on the Screen Presentation Framework, MVVM and Prism • Coming soon to MSDN Online

34. YOUR FEEDBACK IS IMPORTANT TO US! Please fill out session evaluation forms online at MicrosoftPDC.com

35. Learn More On Channel 9 • Expand your PDC experience through Channel 9 • Explore videos, hands-on labs, sample code and demos through the new Channel 9 training courses channel9.msdn.com/learn Built by Developers for Developers….