MVVM+MEF session for Microsoft WebDay 2010 in Oporto. http://www.mswebday.com/ An overview on the MVVM (Model View ViewModel) pattern and MEF (Managed Extensibility Framework) in Silverlight. When and how to use them.

1. MVVM + MEF in Silverlight Ricardo Fiel

2. Who’s that guy? xamlpt.com/blogs/rfiel/ pontonetpt.com/blogs/rfiel/ blogs.fullsix.pt labs.fullsix.pt Ricardo Fiel Senior Engineer Fullsix Portugal ricardo.fiel@fullsix.com @theplastictoy

3. Agenda The “easy” way MVVM – Model View ViewModel MEF – Managed Extensibility Framework Scenarios for MVVM + MEF together Q&A

4. The “easy” way

6. Bug fixing

8. That was the DANGEROUS way! Too much coupling Very hard to test Developer-Designer workflow issues Maintenance will be a pain Looks faster, but will become expensive It’s not always the wrong way, but USE IT WITH CAUTION!

9. MV* patterns Different people reading about MVC in different places take different ideas from it and describe these as “MVC”. Presentation Model is of a fully self-contained class that represents all the data and behavior of the UI, but without any of the controls used to render that UI on the screen. A view then simply projects the state of the presentation model onto the glass. The most annoying part of Presentation Model is the synchronization between Presentation Model and view… Ideally some kind of framework could handle this, which I'm hoping will happen some day with technologies like .NET's data binding. Martin Fowler, 2004

10. MVVMModel-View-ViewModel Ladies and gentleman, may I introduce you to:

11. The MVVM triad View Display data in Controls UI Friendly Entities, UI State, Actions Entities representing data ViewModel Model

12. Model 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

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

14. ViewModel 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 INotifyPropertyChangedand INotifyCollectionChangedtalk to the View through bindings Listens for changes from the View through bindings May invoke services to communicate outside the MVVM triad

15. MVVM Variations - 1 View First ViewModel is created as a StaticResource in the View’s XAML or in the View’s code-behind Excellent for Blend (“Blendability”) <UserControl.Resources> <data:GamesViewModel x:Key="TheViewModel" /> </UserControl.Resources> <Grid DataContext="{Binding Path=Games, Source={StaticResourceTheViewModel}}"> ... </Grid>

16. MVVM Variations - 2 ViewModel first View is injected into the ViewModel’sconstructor Example: ViewModel is created then the View is created using Dependency Injection public MyViewModel { public MyViewModel(IMyView view) { } }

17. MVVM Variations - 3 ViewModel and View are created through an intermediary, then paired together vm = new MyVM(); view = new MyView(); view.DataContext = vm; // With Unity vm = container.Resolve<IMyVM>(); view = container.Resolve<MyView>(); view.DataContext = vm;

18. From Now On We’re Using ViewFirst <3

19. Don’t look up! View only knows ViewModel ViewModel only knows Model The Model stands alone

20. ICommand interface Available in Silverlight 4 ButtonBase and Hyperlink now have Command and CommandParameter properties <Button Content="Load Products" Width="120" Command="{Binding FindMatchingProducts}" CommandParameter="{Binding Path=Text, ElementName=CostThresholdFilter}"/> public interface ICommand { boolCanExecute(Object parameter); void Execute(Object parameter); event EventHandlerCanExecuteChanged; )

21. Tools to make it simple There are several tools available: Prism www.codeplex.com/CompositeWPF Caliburn www.codeplex.com/caliburn Silverlight.FX projects.nikhilk.net/SilverlightFX MVVM Light Toolkit www.codeplex.com/mvvmlight You can build your own MVVM framework Comparison list at http://www.japf.fr/silverlight/mvvm/index.html

22. demo ViewFirst MVVM

23. MEFManaged Extensibility Framework

24. MEF Intro Library for building extensible applications Part of Silverlight 4 Silverlight 3 support mef.codeplex.com Prism support mefcontrib.codeplex.com Open source

25. MEF Basics An application is built of Parts

26. The MEF “Motto” Exportit. Import it. Composeit.

27. Export it [Export(typeof(UserControl))] public class Widget1 : UserControl { public string Message { get{return(string) Button.Content;} set{Button.Content=value;} } } Widget1 UserControl Export

28. Import it [Export(typeof(UserControl))] public class MainPage: UserControl { [ImportMany(typeof(UserControl))] public IEnumerable<UserControl> { get;set; } } Main Page UserControl ImportMany

29. Compose it PartIntializer: “Compose yourself” public MainPage() { InitializeComponent(); PartInitializer.SatisfyImports(this); } MainPage Compose

30. demo Adding social widgets

31. Scenarios MVVM + MEF together? I, MVVM, take you MEF, to be my wife, to have and to hold from this day forward, for better or for worse, for richer, for poorer, in sickness and in health, to love and to cherish; from this day forward until death do us part.

32. Thanks! xamlpt.com/blogs/rfiel/ pontonetpt.com/blogs/rfiel/ blogs.fullsix.pt labs.fullsix.pt Ricardo Fiel Senior Engineer Fullsix Portugal ricardo.fiel@fullsix.com @theplastictoy Please keep in touch!