Prism is 100% Resume Compliant! Trendy design patterns! Test-Driven Development Loosely Coupled Blend-able UIs Interface-based Programming Dependency Injection (DI) IoC Containers Be a Code-Behind snob! Already know EF, MVC, WPF, (W)WF, WCF, and WTF? Add Prism to the list! Separate concerns with ease and style Write S.O.L.I.D. Code Modular, Composite Apps! Distributed Agile Teams Twice as much code in double the time! Fluent Interfaces Multi-Targeting to Silverlight and WPF Routed Commands & Routed Events High Performance Dev Increases your IQ 42 points Data Binding Architect (not Astronaut) Best Practices galore!

New England Code Camp #13 27-March-2010 Demystifying Prism Building Silverlight and WPF applications using Composite Applications Guidance (CAG) and Composite Application Library (CAL) New England Code Camp #13 27-March-2010 Not representing my day job Boston Azure User Group http://bostonazure.org @bostonazure Bill Wilder http://blog.codingoutloud.com @codingoutloud Boston West Toastmasters http://bwtoastmasters.com Not here with my day job Only Bill’s personal views Copyright (c) 2010, Bill Wilder

How to Demystify Prism? How did we get here? (motivation) Demonstrate a few key Prism concepts Focus on Prism, not (for example): XAML, Silverlight, WPF M-V-VM Pattern Making assumptions about your background Unit Testing, DI, IoC, SoC Code-Behinds Ask questions any time image from http://en.wikipedia.org/wiki/Rubik%27s_cube

What is this talk about? Targeting Silverlight and/or WPF Managing complexity well Best practices for Testability and design patterns Focus (mostly) around UI concerns XAML, Code-behinds, Data Binding Doing all of the above Using Prism Runtime Library + Guidance + Project Linker

Assumptions: You have heard of… WPF (Windows Presentation Foundation), Silverlight, XAML Unit Testing (nUnit, …), TDD Dependency Injection (DI), Inversion of Control (IoC), Loose coupling UI Design Patterns (MVVM, MVC, MVP, …) Where are YOU coming from?

Terminology Prism  code name (which I will call it) Photo from http://en.wikipedia.org/wiki/File:Dispersion_prism.jpg Prism  code name (which I will call it) Prism 2.0  2nd release (Feb 2009) Composite Application Guidance for WPF and Silverlight  official name of whole package Composite Application Library for WPF and Silverlight  runtime support included – sometimes called “CAL” And can test w/o Presentation code

Okay, so this stuff ain’t easy What’s the problem? US businesses annually spend ~ $250 billion on software dev across approx 175,000 projects Only 16 percent of these projects finish on schedule and within budget Another 31 percent are cancelled, mainly due to quality problems Another 53 percent exceed their budgets by an average of 189 percent Projects reaching completion deliver an average of only 42 percent of the originally planned features [Credit: Jack Greenfield, Microsoft] Okay, so this stuff ain’t easy

Industry Response

Where did Prism come from? P&P = Patterns & Practices Group microsoft.com/patterns

Long cycle times Strategic Very large teams Cost money Fully Supported Rapid cycle times Small, focused agile teams Partner with community Ship tactical solutions now Code and Guidance Free, Open Source More latitude, less legacy Products: Windows, Office, Exchange, Visual Studio, .NET, Zune, ... P&P Group Backward compatibility Maturity Lessons from CAB = Composite UI Application Block Learned Composite = Goodness Prism, Prism v2: Easier to adopt incrementally Less invasive Products: EntLib, CAB, Unity, Prism v1, Prism v2, Arch Guide, …

Prism Key Concepts Eye Chart [Source CAL docs]

Stock module - send an TickerSymbolSelectedEvent to the EventAggregator Other modules - request to subscribe to TickerSymbolSelectedEvent

REPLAC NEXT SLIDE WITH VISUUALLS Todo

Shell = Main Window

Examine Demo Stock Trader RI (RI = Reference Implementation) Code Examine Demo Stock Trader RI (RI = Reference Implementation)

What can Prism do for You? Manage complexity via loosely-coupled design & clean Separation of Concerns at many levels Composite UI (Regions) & Modules Supports independent development and evolution Loosely coupled Eventing and Commanding Enhances support for M-V-VM Design Pattern Design guidance and patterns that support both Unit Testing and Designer Integration Excellent support for SL/WPF portability

<TextBox Text="{Binding Path=TextContents}" FontSize="36" /> Classs FredViewModel public string TextContents { get; set; }

The Case for Prism: “Silverlight++” SoC + SRP + reducing plumbing code + Unit Tests  best way to handle complexity and enable ability to respond rapidly to requirement changes Composite Applications and M-V-VM  best way to support the previous item (in SL/WPF) Prism  best way to support the previous item (in SL/WPF) Prism is an exemplar of modern-day best practices for the Silverlight and WPF platform Prism sits atop full power of SL/WPF, and fully leverages Unity and .NET, enables Agile

Shell, Regions, Views Shell is main window for app Shell defines (visual) Regions Regions control where UI will appear – flexible Views are displayed within Regions WPF/Silverlight design, code, tooling still applies – Prism just makes it better

Views live in Modules Modules are DLLs (Visual Studio Projects) Nice unit of work for a sub-team, testable Shell decides when/whether to load Modules Configured via code, XML file (WPF only), or XAML Modules can be downloaded (over http) Silverlight, WPF Click-Once can streamline startup Can write your own loader rules For its UI, a (Prism) Module loads its (Prism) View

Events .NET events WPF events Composite events (Prism) Tight coupling (references in both directions) WPF events Looser coupling, (generally) limited to same visual tree Composite events (Prism) Looserer coupling; not limited to same visual tree Subscriber and Publisher lifetimes not bound More: Force to UI thread; event filtering

Prism “Conventions+” Bootstrapper Shell One module per DLL M-V-VM pattern (MVP good too) Don’t need to follow the conventions… But you’ll be glad you did

Prism is (relatively) Small Silverlight

Create an App Together Using (very early) Shell template from David Hill (download instructions later in this deck) Add Prism references, Discussion Shell, Bootstrapper, Regions Add Prism Module, new View, register View with RegionManager, add to Module Catalog Implement M-V-VM Show loose coupling and modular design Wash, rinse, repeat (evolve the design)

Build Prism app that has a multiple modules and views Code Build Prism app that has a multiple modules and views

Why Separate Concerns in UI? Optimizes Developer / Designer interaction Dev in Visual Studio, Designer in Expression Blend Iterate from “Dev Ugly” to crafted UI Easier to Test Now possible to Unit Test (vs. Integration Test) Simpler problem isolation Better organized code is better code Easier to understand, maintain, reuse (time & space) SE Principles: SoC, coupling, cohesion, SRP (rendering, mouse & keyboard, disabled, hover)

Examine and Extend Hello World Code Examine and Extend Hello World

How to Separate Concerns in UI? Use Code-Behinds reluctantly + M-V-VM M-V-VM Model-View-ViewModel Pattern Abbreviated as M-V-VM, MVVM Often referred to simply as ViewModel Specialization of Fowler’s Presentation Model pattern where View knows about ViewModel http://martinfowler.com/eaaDev/PresentationModel.html Prism docs refer to as Presentation Model I will refer to as ViewModel pattern

Code-Behind Pattern (Old Way) Load external data from web services, etc. Supported by WPF / SL View Model Your Other Glue Code Behind for each Control Commanding also spans View & ViewModel No UI in VM MVP is a delegation model – MVVM handles this with data binding – way less code in the code-behind Silverlight controls don’t automatically implement ICommand UI “is” the data store for much of the data (e.g., ListBox); logic intertwined Custom code to populate UI

ViewModel Pattern (New Way) Load external data from web services, etc. (“usual stuff”) Supported by WPF / SL View ViewModel Model Data Binding Your Glue Commanding also spans View & ViewModel No UI in VM MVP is a delegation model – MVVM handles this with data binding – way less code in the code-behind Silverlight controls don’t automatically implement ICommand Powerful Data Binding glue provided free with both Silverlight and WPF Custom code (boring); Automapper is promising

Modify Prism app UI to use M-V-VM Code Modify Prism app UI to use M-V-VM

DataContext & {Data Binding} xmlns:models=“clr-namespace:MyClrClass. Models” … <Window.DataContext> <models:EditViewModel/> … Enables

Prism Rough Edges Coming in fall: Prism 4 MEF alignment Prism templates, tooling We do have Project Linker, David Hill’s templates You build it; P&P does not ship a binary Hopeful for Prism 4 http://blogs.msdn.com/blaine/archive/2010/01/15/prism-4-0.aspx http://blogs.msdn.com/blaine/archive/2010/03/17/prism-4-0-plans.aspx Cannot unload a Module from memory Debugging: when a composite event fires and nobody is listening, how can I tell?

When should you use Prism? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Wrong reason to choose Prism

When to go Composite? (1/2) You are designing “complex” WPF or Silverlight applications, or… You are building an application that presents information from multiple sources through an integrated user interface, or… You are developing, testing, and deploying modules independently of other modules, or… [Source CAL docs]

When to go Composite? (2/2) Your app will add more views and more functionality over the coming years, or… You must be able to change the app quickly and safely to meet emergent business requirements, or… Your app is being developed by multiple collaborating teams; or… Your app targets both WPF and Silverlight, and you want to maximize code sharing between platforms. [Source CAL docs]

When to NOT go Composite? Your apps do not require any of the above scenarios, or… Your application consists of a few simple screens, or… You are building a prototype or demo, or… Your developers are not familiar with the ideas and practices and do not have the time to learn them. * COMPLEMENTARY * (remember the opening slide) [Source CAL docs]

Prism is not all-or-nothing Can use Eventing, Commanding support without Composite Applications Better M-V-VM than possible with SL or WPF alone Prism’s Project Linker tool eases sharing code across Silverlight and WPF Prism’s design goals aligned with features in Silverlight and WPF Expand your thinking beyond WinForms, WebForms Read the docs and guidance!

Official Site http://microsoft.com/compositewpf -- or -- http://codeplex.com/compositewpf

Futures http://blogs.msdn.com/blaine/archive/2010/03/17/prism-4-0-plans.aspx

Watch these spaces “Contrib” site @ http://compositewpfcontrib.codeplex.com/ Assorted contributions for Prism (currently v1) Channel 9 for tutorial videos http://channel9.msdn.com/tags/Prism/ Infragistics control adapters for Prism @ http://ncal.codeplex.com/ Region Adaptors for Prism (currently v1)

Prism v2 References http://www.microsoft.com/downloads/details.aspx?FamilyID=fa07e1ce-ca3f-4b9b-a21b-e3fa10d013dd&DisplayLang=en http://blogs.msdn.com/jmeier/archive/2009/02/18/new-release-composite-application-guidance-for-wpf-and-silverlight-v2-0-prism.aspx http://timheuer.com/blog/archive/2009/02/18/prism-2-released-composite-guidance-for-silverlight-lob.aspx http://msdnrss.thecoderblogs.com/2009/02/18/composite-application-guidance-for-wpf-and-silverlight-v20-prism/ http://tinyurl.com/d4s22b 

Other Resources Josh Smith on MVVM with WPF: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx Brian Noyes on Understanding Routed Events and Routed Commands in WPF: http://msdn.microsoft.com/en-us/magazine/cc785480.aspx WPF Commanding Overview: http://msdn.microsoft.com/en-us/library/ms752308.aspx Martin Fowler’s description of Presentation Model pattern: http://martinfowler.com/eaaDev/PresentationModel.html XAML Guidelines for Creating a Composite UI: http://msdn.microsoft.com/en-us/library/dd458877.aspx

David Hill’s QuickStart Kit (new, raw): http://blogs. msdn David Hill’s updated QuickStart Kik (I have not had chance to look at it – was just posted): http://blogs.msdn.com/dphill/archive/2009/06/15/prism-quick-start-kit-update.aspx

Silverlight FCL/XAML != WPF FCL/XAML http://wpfslguidance.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=28278

Did I get to this? What would happen if I ran the Synchronous retrieval of the Podcast feed from Silverlight? Show the Prism docs

Silverlight for .NET Challenge #1: not binary compatible with desktop But it is source compatible (but see #2) Challenge #2: runtime subset on Silverlight But most of the stuff that “makes sense” is there (subset, security, useful, choose 1, async, cross-domain) Challenge #3: Silverlight XAML != WPF XAML But is converging on mostly a subset Other miscellaneous differences… http://wpfslguidance.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=28278 Suggestion: Write 1st in Silverlight, then port to WPF Jon Pelak’s slide?

Questions?

Name some major Prism concepts Bootstrapper (a convention) Shell (“main window”) Region View Module Service (talk to outside world, web service) Event (loosely coupled, cross module) Command

How does the View get created? public partial class Bootstrapper : UnityBootstrapper { … protected override DependencyObject CreateShell() { // Container.Resolve is part of Unity ShellView view = Container.Resolve<ShellView>(); Application.Current.RootVisual = view; return view; } Answer: Prism runtime calls CreateShell. The call to Container.Resolve invokes the Unity DI (Dependency Injection) container which knows it needs to create a ShellView object. Unity notices that the ShellView constructor requires a ShellViewModel object and creates one so that it can pass it in.

How does View get its ViewModel? Bootstrapper.cs: FooView view = Container.Resolve<FooView>(); FooView.cs: public ShellView(FooViewModel viewModel) { … } FooModule.cs (in IModule:Initialize): container.RegisterType<IFooViewModel, FooService>(); Answer: Prism runtime calls CreateShell. The call to Container.Resolve invokes the Unity DI (Dependency Injection) container which knows it needs to create a ShellView object. Unity notices that the ShellView constructor requires a ShellViewModel object and creates one so that it can pass it in.

View, ViewModel, or Model? public class Foo : INotifyPropertyChanged { // My most likely role is…? }

Loose Coupling – How To Architect for general flexibility using Dependency Inversion & code to interfaces Use an IoC container (Unity, Structure Map, Castle Windsor, Ninject, …) Unit test using IoC

not all-or-nothing prospect - more guidance than doctrine, e.g., startup - need container, don't need everything in the bootstrapper b/c you won't need don't need container for just loosely coupled events usage, for example STD APP: - module loading - view injection MODULAR LOADING - are they cached after loading? - complements Transparent Platform Extensions NOVIGATION FRAMEWORK - orthogonal; see blog post

Prism-izing a Silverlight App Create new Silverlight App Add References Microsoft.Practices.Composite.dll Microsoft.Practices.Composite.Presentation.dll Microsoft.Practices.Composite.UnityExtensions.dll Microsoft.Practices.ServiceLocation.dll (?) Microsoft.Practices.Unity.dll Add Bootstrapper : UnityBootstrapper Invoke from Application_Startup Create Shell Add View (UserControl) Define Region Add Module (IModule) Inject View Add Command Unlike CAB – does not totally take over your app-dev experience

ICommand Loosely-coupled goodness to connect UI gesture to resultant action’s logic WPF supports ICommand, limited to Visual Tree ICommand exists only as a place-holder in Silverlight Prism implements ICommand without limiting to Visual Tree Better than the default WPF experience Why is this important?

Rename MainPage => Shell Refactor tool

Transparent Platform Extensions vs. Prism Remote Module Loading New in Silverlight 3 Supports caching of new platform features (browser does the caching) DLR, Language Extension, Controls Do not need to live in XAP Specified in AppManifest.xaml Only can be downloaded from microsoft.com Prism Remote Module Loading Modules for your application, not Platform Defer loading for UX reasons, future modularity flexibility

What is a “View” Prism uses the term to mean a visual area, hosted in a module, that is displayed within a (Prism-defined) Region M-V-VM uses the term to mean the implementation of your UI dealing with drawing the screen (but does not include logic) Don’t confuse the two

What is a “Service” Prism uses the term to refer to modules which supply data and logical processing to Views in a loosely coupled manner The SOA world uses the term to refer to (usually) application-independent business components which can be invoked over a network using a standard protocol, usually SOAP or REST-based; often implemented as “Web services” using ASMX or WCF in .NET

Next Steps Download Prism Look at the samples, read the docs Download David Hill’s updated QuickStart Kit from http://blogs.msdn.com/dphill/archive/2009/06/15/prism-quick-start-kit-update.aspx

Where to put “Are you sure you want to close without saving?” code?