Load and Deploy XAP into Silverlight Application through MEF Deployment Catalog

What a sunny day today, and it feels brighter when everything comes into place together. Fortunately, this is also the case for MEF (Managed Extensibility Framework).

At first I could not really be bothered with learning this stuff, however I found out that this framework is what I will be needing most for my project! Why? because MEF has the ability to join every piece of functionality together!

Managed Extensibility Framework

It basically contains three steps that you need to implement:
  • Export : this can be any class, interface, or objects that you want to export.
  • Import : This is the place where you can get the exported pieces and do stuff with them.
  • Composition : Imagine this as a connector between export and import. It basically compose any/all parts that you specify in export and make them available for the import.

In MEF, a piece of functionality is described as a catalog. The new deployment catalog (which I'm going to be using) is very flexible in terms of adding and removing external functionality in your application.

For more information, you can read Glenn Block posts. I will also use his deployment catalog service for easier XAP adding/removing.

Real Example - Embedding Bible Application into Silverlight Business Application

No, this won't be a difficult demo and No, this won't be a Hello World example. I like showing people a real example of situation that you might encounter in the real world.

For that purpose, I will be embedding my simple Indonesian Bible application that I wrote into Silverlight Business Application.

So the idea here is that I have built a Silverlight application and I want to just load that in my main business application. This is really cool, especially if you want to organize your source code in a neat manner. MEF really can provide you with plug-in architecture.

Let's get started then! :)

Export
I need to add little piece of code into my bible application. To be able to let other application to import my bible, I need to make this application available. Therefore I need to add the export attribute.


Here I just export the usercontrol of my application. Don't forget to add to the MEF reference System.ComponentModel.Composition located in C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Client\System.ComponentModel.Composition.dll

Rebuild the project.

Import
In other posts, they built the application in the same solution as the host. In my case, I don't want to do that. The only thing MEF worry about in Silverlight is that there is an external XAP file in ClientBin directory of the host.

For this demo, I am just going to copy paste the XAP in the previous section (after the rebuild) into the ClientBin directory of the Silverlight Business Application.


Also, add the System.CompositionModel.Composition and System.CompositionModel.CompositionInitializer to the host application. I will then do the import inside my Home page of the host.

To do this, in Home.xaml I create an ItemsControl that will load the imported usercontrol and bind it to a property of the view model:


The home view model is like this:



Here I use ImportMany and set AllowRecomposition to True. This indicates that we can import more widget as they are available. Also the recomposition is automatically done for you when there is any change in the composition.

I won't explain the Lazy declaration as Glenn Block explained it well in his blog.

Composition - Deployment Catalog

The DeploymentCatalogService is this:



Thank you Glenn for posting this!

Here are the steps to make things connect together:
1. In App.xaml.cs, call DeploymentCatalogService.Initialize(); inside Application_Startup

2. In my home.xaml.cs, I call the SatisfyImports, and add the external XAP using the DeploymentCatalogService. When user is navigated away from the page, I remove the XAP to avoid conflict of adding an existing XAP to the application.



Hooray. Now when I run my Silverlight Business Application, my bible application will load inside my home page.


Thanks for reading this and I hope you would find it useful ^_^