MVVM+MEF in Silvelight - W 2010ebday


Published on

MVVM+MEF session for Microsoft WebDay 2010 in Oporto.

An overview on the MVVM (Model View ViewModel) pattern and MEF (Managed Extensibility Framework) in Silverlight. When and how to use them.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

MVVM+MEF in Silvelight - W 2010ebday

  1. 1. MVVM + MEF in Silverlight<br />Ricardo Fiel<br />
  2. 2. Who’s that guy?<br /><br /><br /><br /><br />Ricardo Fiel<br />Senior Engineer<br />Fullsix Portugal<br /><br />@theplastictoy<br />
  3. 3. Agenda<br />The “easy” way<br />MVVM – Model View ViewModel<br />MEF – Managed Extensibility Framework<br />Scenarios for MVVM + MEF together<br />Q&A<br />
  4. 4. The “easy” way<br />
  5. 5. Question<br /> What are some of the biggest costs in Software Development?<br /><ul><li>Maintenance
  6. 6. Bug fixing
  7. 7. ?</li></li></ul><li>demo<br />Building a Silverlight app the “easy” way<br />
  8. 8. That was the DANGEROUS way!<br />Too much coupling<br />Very hard to test<br />Developer-Designer workflow issues<br />Maintenance will be a pain<br />Looks faster, but will become expensive<br />It’s not always the wrong way, but<br />USE IT WITH CAUTION!<br />
  9. 9. MV* patterns<br />Different people reading about MVC in different places take different ideas from it and describe these as “MVC”.<br />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.<br />The most annoying part of Presentation Model is the synchronization between Presentation Model and view…<br />Ideally some kind of framework could handle this, which I&apos;m hoping will happen some day with technologies like .NET&apos;s data binding.<br />Martin Fowler, 2004<br />
  10. 10. MVVMModel-View-ViewModel<br />Ladies and gentleman, may I introduce you to:<br />
  11. 11. The MVVM triad<br />View<br />Display data in Controls<br />UI Friendly Entities, UI State, Actions<br />Entities representing data<br />ViewModel<br />Model<br />
  12. 12. Model<br />Represents the data<br />The entity<br />Not required to know where it gets its data from<br />From a WCF service. WCF RIA Services, etc<br />May contain validation<br />
  13. 13. View<br />The screen, the UI, the UserControl in Silverlight<br />Handles UI look and feel<br />Presentation of information<br />Communicates with ViewModel through bindings<br />
  14. 14. ViewModel<br />Main source of logic for the MVVM triad<br />Connects the Model to the View<br />Abstracts the View<br />Public properties that are bound to a View<br />INotifyPropertyChangedand INotifyCollectionChangedtalk to the View through bindings<br />Listens for changes from the View through bindings<br />May invoke services to communicate outside the MVVM triad<br />
  15. 15. MVVM Variations - 1<br />View First<br />ViewModel is created as a StaticResource in the View’s XAML or in the View’s code-behind<br />Excellent for Blend (“Blendability”)<br />&lt;UserControl.Resources&gt;<br />&lt;data:GamesViewModel x:Key=&quot;TheViewModel&quot; /&gt;<br /> &lt;/UserControl.Resources&gt;<br /> &lt;Grid DataContext=&quot;{Binding Path=Games, <br /> Source={StaticResourceTheViewModel}}&quot;&gt;<br /> ...<br /> &lt;/Grid&gt;<br />
  16. 16. MVVM Variations - 2<br />ViewModel first<br />View is injected into the ViewModel’sconstructor<br />Example:<br />ViewModel is created then the View is created using Dependency Injection<br />public MyViewModel<br />{<br /> public MyViewModel(IMyView view)<br /> {<br /> }<br />}<br />
  17. 17. MVVM Variations - 3<br />ViewModel and View are created through an intermediary, then paired together<br />vm = new MyVM();<br />view = new MyView();<br />view.DataContext = vm;<br />// With Unity<br />vm = container.Resolve&lt;IMyVM&gt;();<br />view = container.Resolve&lt;MyView&gt;();<br />view.DataContext = vm;<br />
  18. 18. From Now On We’re Using ViewFirst<br />&lt;3<br />
  19. 19. Don’t look up!<br />View only knows ViewModel<br />ViewModel only knows Model<br />The Model stands alone<br />
  20. 20. ICommand interface<br />Available in Silverlight 4<br />ButtonBase and Hyperlink now have Command and CommandParameter properties<br />&lt;Button Content=&quot;Load Products&quot; Width=&quot;120&quot; <br />Command=&quot;{Binding FindMatchingProducts}&quot; <br />CommandParameter=&quot;{Binding Path=Text, ElementName=CostThresholdFilter}&quot;/&gt;<br />public interface ICommand<br />{<br />boolCanExecute(Object parameter);<br /> void Execute(Object parameter);<br /> event EventHandlerCanExecuteChanged;<br />)<br />
  21. 21. Tools to make it simple<br />There are several tools available:<br />Prism<br /><br />Caliburn<br /><br />Silverlight.FX<br /><br />MVVM Light Toolkit<br /><br />You can build your own MVVM framework<br />Comparison list at<br />
  22. 22. demo<br />ViewFirst MVVM<br />
  23. 23. MEFManaged Extensibility Framework<br />
  24. 24. MEF Intro<br />Library for building extensible applications<br />Part of Silverlight 4<br />Silverlight 3 support<br /><br />Prism support<br /><br />Open source<br />
  25. 25. MEF Basics<br />An application is built of Parts<br />
  26. 26. The MEF “Motto”<br />Exportit.<br />Import it.<br />Composeit.<br />
  27. 27. Export it<br />[Export(typeof(UserControl))]<br />public class Widget1 : UserControl<br />{<br /> public string Message {<br /> get{return(string) Button.Content;}<br /> set{Button.Content=value;}<br /> }<br />}<br />Widget1<br />UserControl<br />Export<br />
  28. 28. Import it<br />[Export(typeof(UserControl))]<br />public class MainPage: UserControl<br />{<br /> [ImportMany(typeof(UserControl))]<br /> public IEnumerable&lt;UserControl&gt; {<br />get;set;<br /> }<br />}<br />Main<br />Page<br />UserControl<br />ImportMany<br />
  29. 29. Compose it<br />PartIntializer: “Compose yourself”<br /> public MainPage()<br /> {<br />InitializeComponent();<br />PartInitializer.SatisfyImports(this);<br /> }<br />MainPage<br />Compose<br />
  30. 30. demo<br />Adding social widgets<br />
  31. 31. Scenarios MVVM + MEF together?<br />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.<br />
  32. 32. Thanks!<br /><br /><br /><br /><br />Ricardo Fiel<br />Senior Engineer<br />Fullsix Portugal<br /><br />@theplastictoy<br />Please keep in touch!<br />