This is a video tutorial to introduce beginners to how to use both MVVM (Model-View-ViewModel) and MEF (Managed Extensibility Framework) with Silverlight (should work for versions 3 and 4). Of course, some "veterans" may want to watch as well in case you've missed some of the fundamentals, or have a clever way to do something that you can share in the comments for future visitors to the page. Want to learn more about MEF? Watch my video series, Fundamentals of the Managed Extensibility Framework.
In this edition, I build a simple application that allows the user to check a preference on the screen (whether they prefer squares over circles) and then displays a square or a circle. We use MVVM and wire everything together with MEF.
Download the source code: MEFMVVMDemoSln.zip
Click here to watch the video directly if it doesn't appear in the frame below (recommended to watch in full screen): Watch the video in a separate window
Here is the final application:
Download the source code: MEFMVVMDemoSln.zip
Nice video, i have the same opinion,MEF works great with mvvm pattern. in my case i found it was very good in a project i had where i use the mvvm light. It's easy to keep it simple and build a little more complex apps in a quicker way.
ReplyDeleteThanks, and good work.
Great demo.
ReplyDeleteBut after seeing you remove and sort using directives in the demo so many times. I thought of actually writing a blog post on how I have done to make it more easier. http://blog.prabir.me/post/Visual-Studio-Tips-and-Tricks-IX.aspx
The video is not working? I tried the separate window as well...
ReplyDeleteHmmm, just tested it here in multiple browsers and it worked fine. Silly question ... do you have Silverlight? Assuming so if you are trying to watch a video about it.
ReplyDeleteWhat is the need to import the mainviewmodel on every UserControl (part)? One import on mainpage en datacontext inheritance takes care off it.
ReplyDeleteGood point! That is a nuance of design and how decoupled you want your application to be. If you are truly treating controls as separate composable parts, then you can't assume they'll be in a hierarchy that has that model available. Often each part may have its own view model or sub view model. On the flipside, if you architect the application so that there is an assumption of the hierarchy, then of course you can get to the model via DataContext and not have to import it. This was a way to demonstrate reusability across the application no matter how deep or where the composable part comes in.
ReplyDeleteI was just going to post a comment that the video is not working for me as well. Then, I decided to go away from Chrome browser and try the page in IE. And it is fine here. So, I guess it is the incompatibility issue between Silverlight and Chrome that cause the video to not work.
ReplyDeletePrzemek
Thanks for the clarification. I was debating posting the direct MP4 link but rationalized, "Hey, this is about Silverlight, so why not host it in a Silverlight control?"
ReplyDeleteUseful demo, simple and yet demonstrates various concepts and programming techniques.
ReplyDeleteThanks
I recently installed the Latest SL4 full release and the VS 2010 Premium Trial but cannot find the System.ComponentModel.Composition.Initialization.dll anywhere other than your source. And when I use the one from your source I am getting reflection warnings? Is this now obsolete with the latest release? Thanks
ReplyDeleteIf you're targeting Silverlight 3 then you need Preview 9 from CodePlex. If you're targeting Silverlight 4, it should have installed with the Silverlight 4 tools and be available on the .NET tab for references.
ReplyDeleteThanks Jeremy. Strange as I did download the SL4 tools as soon as it was available last Thursday on two machines and both are missing some dlls. I reinstalled the SL4 tools on one and now all the appropriate dlls appear. If anyone else is having a similar issue try to reload the SL4 tools.
ReplyDeleteThanks again
I'm on this page
ReplyDeletehttp://www.wintellect.com/CS/files/folders/sample_files/entry12353.aspx
Now, how do I get the MEFMVVMDemoSln.zip?
Please, englighten me.
Click the "Download" button in the upper right.
ReplyDeleteHow do I do this is WPF?
ReplyDeleteWPF has no CompositionInitializer.SatisfyImports.
Thanks.
Jeremy great stuff.
ReplyDeleteCan I ask you what tools you used to record, edit, and display the video? It is nice and clear.
Thanks.
Sure, ask away! The setup I use is actually straightforward. I use Expression Encoder (part of the Expression Suite that Blend comes with) to make the recordings and captures. For audio, I invested in a Logitech ClearChat USB headset. That's it!
ReplyDeletenice - i just got the aha moment :-)
ReplyDeletei'd recommend upgrading your demos to VS2010 though...
john
nice, enjoyed it.
ReplyDeleteps. I loaded solution in VS 2010/ Had a CAS Policy issue with loading MEF dependencies. Easily rectified by adding entry in devenv.exe.config,
More info here,
http://msdn.microsoft.com/en-us/library/dd409252.aspx
Thanks Jeremy
Hey Jeremy,
ReplyDeleteGreat tutorial. I've done a silverlight chess site as noted in my profile. I want to abstract it out more using control factories and MEF. I have this ControlFactory which can create menus, toolbars, what have ya. I want MEF to new up a ControlFactory but setting the actual content of a control will have to be like "Factory.Menu()", what have ya. Does this seems right to you as in:
private ControlFactory _controlFactory;
[Import]
public ControlFactory Factory
{
get{ return _controlFactory; }
set{ _controlFactory = value; }
}
[Import]
public MenuControl Menu
{
get{ return MenuRegion.Content as MenuControl; }
set{ MenuRegion.Content = Factory.Menu(); }
}
I haven't even tried this out yet but if I want MEF to use the factory, this seems like the only way to do it. Any thoughts on this approach?
Thanks for your great tuttorials.
David
That certaily seems a valid way to do it, it really depends on the other details of the application as a whole. We have a new series slowly being updated/posted to http://www.mefcontrib.com/
ReplyDeleteHey Jeremy, I actually stayed up a bit late last night playing around with the idea I threw at ya, and it seems to work(with a slight hack) but it seems like I can make it better though. I know MEF has these constructor imports, something to that effect which I've done before but in this case the constructor for the MenuControl is passed a generic func as in :
ReplyDeleteMenuControl(CreateControl(() => new Menu(some args go here...))) and this "CreateControl" method is somthing like this:
TComponent CreateControl(...) I'm not even close to knowing how to get MEF to pass this FUNC into the constructor. I will read the link you sent out. Youre one heck of a resource.
Thanks again.
Jeremy,
ReplyDeleteI figured out a work around for MEF not directly supporting generic export/imports. I sent another comment regarding this but something wierd happened so I'll send the jist of it here.
I read your other post regarding the generic export/import issue, and as I found it very helpful, my issue turned out to be a tad different. If the classes I'm using in the solution I'm about to explain below did not have constructors with parameters, your solution would have worked. The abstract factory I'm working with is a topic in itself.
The way I got around it was to have MEF new up a generic Func with a view component and a builder component and then simply pass this func to a control factory method. This method is completely generic and returns a builder object of type T. There's some other magic going on inside this factory method but wanted to keep this short and sweet. Since this factory method is generic, if I want to have a different type of builder returned, I simply change the definition of the func that i pass into the factory method, that's it.
Anyone reading this, if one would like a code sample, hit me up at dwhitten15@hotmail.com.
The whole MEF thing has inspired me to revamp my chess website at http://www.whittenizer.com/ to use MEF and to abstarct it out more.
Thanks again,
David
Jeremy,
ReplyDeleteThanks for the great video! Great example of using MVVM with MEF. BTW, if you were writing tests for this, what kinds of things would you look for with the MEF composition of parts, etc? Anything in particular?
Thanks Again!
Bill
Could not watch the post. I tried in separate window but not working.
ReplyDeleteCouldn't watch the video. Tried both IE and chrome , here and in separate window.(have latest version of SL installed too)
ReplyDeleteThank you for this video. Good idea to include MEF as an additional learning. You are very sympathic.
ReplyDeleteI'm coming from the MVP side. Your sample is not really an implementation of the Model-View-ViewModel pattern because there is no Model in your solution. Right? The Model is integrated in the ViewModel. Sure - because you have only one Property "Prefere Square" - you did this to be faster.
If you have one Model on multiple ViewModels (and using MEF) and each ViewModel has its View than it is important to devide the Model and the ViewModel.
I see often that there are samples based on MVVM without any Model. Do you think its correct to put any Properties like "PrefereSquare" into the ViewModel?
Thank you. I will look for more samples in your Blog to learn.
Stefan Werdenberg, Switzerland