mvvm+mef in silvelight - w 2010ebday
DESCRIPTION
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.TRANSCRIPT
![Page 1: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/1.jpg)
MVVM + MEF in Silverlight
Ricardo Fiel
![Page 2: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/2.jpg)
Who’s that guy?
Ricardo FielSenior EngineerFullsix [email protected]@theplastictoy
xamlpt.com/blogs/rfiel/pontonetpt.com/blogs/rfiel/
blogs.fullsix.ptlabs.fullsix.pt
![Page 3: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/3.jpg)
Agenda
• The “easy” way• MVVM – Model View ViewModel• MEF – Managed Extensibility Framework• Scenarios for MVVM + MEF together• Q&A
![Page 4: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/4.jpg)
The “easy” way
![Page 5: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/5.jpg)
Question
What are some of the biggest costs in Software Development?
• Maintenance• Bug fixing
• ?
![Page 6: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/6.jpg)
demoBuilding a Silverlight app the “easy” way
![Page 7: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/7.jpg)
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, butUSE IT WITH CAUTION!
![Page 8: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/8.jpg)
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
![Page 9: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/9.jpg)
MVVMModel-View-ViewModel
Ladies and gentleman, may I introduce you to:
![Page 10: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/10.jpg)
The MVVM triad
• Display data in Controls
• UI Friendly Entities, UI State, Actions
• Entities representing data
ViewModel
View
Model
![Page 11: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/11.jpg)
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
![Page 12: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/12.jpg)
View
• The screen, the UI, the UserControl in Silverlight
• Handles UI look and feel• Presentation of information• Communicates with ViewModel through
bindings
![Page 13: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/13.jpg)
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• INotifyPropertyChanged and
INotifyCollectionChanged talk to the View through bindings
• Listens for changes from the View through bindings• May invoke services to communicate outside the
MVVM triad
![Page 14: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/14.jpg)
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={StaticResource TheViewModel}}"> ... </Grid>
![Page 15: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/15.jpg)
MVVM Variations - 2
• ViewModel first– View is injected into the ViewModel’s constructor• Example:
– ViewModel is created then the View is created using Dependency Injection
public MyViewModel{ public MyViewModel(IMyView view) { }}
![Page 16: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/16.jpg)
MVVM Variations - 3
• ViewModel and View are created through an intermediary, then paired togethervm = new MyVM();view = new MyView();view.DataContext = vm;
// With Unityvm = container.Resolve<IMyVM>();view = container.Resolve<MyView>();view.DataContext = vm;
![Page 17: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/17.jpg)
From Now On We’re Using ViewFirst
<3
![Page 18: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/18.jpg)
Don’t look up!
• View only knows ViewModel
• ViewModel only knows Model
• The Model stands alone
![Page 19: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/19.jpg)
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{
bool CanExecute(Object parameter);void Execute(Object parameter);event EventHandler CanExecuteChanged;
)
![Page 20: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/20.jpg)
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
![Page 21: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/21.jpg)
demoViewFirst MVVM
![Page 22: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/22.jpg)
MEFManaged Extensibility Framework
![Page 23: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/23.jpg)
MEF Intro
• Library for building extensible applications
• Part of Silverlight 4• Silverlight 3 support– mef.codeplex.com
• Prism support– mefcontrib.codeplex.com
• Open source
![Page 24: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/24.jpg)
MEF Basics
• An application is built of Parts
![Page 25: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/25.jpg)
The MEF “Motto”
Export it.
Import it.
Compose it.
![Page 26: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/26.jpg)
Export it
Widget1
[Export(typeof(UserControl))]public class Widget1 : UserControl{
public string Message { get{return(string) Button.Content;}
set{Button.Content=value;} }}
Export
UserControl
![Page 27: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/27.jpg)
Import it
MainPage
[Export(typeof(UserControl))]public class MainPage: UserControl{
[ImportMany(typeof(UserControl))]public IEnumerable<UserControl> { get;set;}
}
ImportMany
UserControl
![Page 28: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/28.jpg)
Compose itPartIntializer: “Compose yourself”
MainPage Compose
public MainPage() { InitializeComponent(); PartInitializer.SatisfyImports(this); }
![Page 29: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/29.jpg)
demoAdding social widgets
![Page 30: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/30.jpg)
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.
![Page 31: MVVM+MEF in Silvelight - W 2010ebday](https://reader036.vdocuments.site/reader036/viewer/2022081602/55496b3fb4c905dd558b4df7/html5/thumbnails/31.jpg)
Thanks!
Ricardo FielSenior EngineerFullsix [email protected]@theplastictoy
xamlpt.com/blogs/rfiel/pontonetpt.com/blogs/rfiel/
blogs.fullsix.ptlabs.fullsix.pt
Please keep in touch!