Geeks With Blogs
Peter Tweed Exploring and explaining the mysteries of .NET

Take the Slalom Challenge at www.slalomchallenge.com!

A common challenge with building complex applications in  is the initial download size of the xap file.  MEF enables us to build composable applications that allows us to build complex composite applications.  Wouldn’t it be great if we had a mechanism to spilt out components into different Silverlight applications in separate xap files and download the separate xap file only if needed?

 

MEF gives us the ability to do this.  This post will cover the basics needed to build such a composite application split between different silerlight applications and download the referenced silverlight application only when needed.

Steps:

1.     Create a Silverlight 4 application

2.     Add references to the following assemblies:

System.ComponentModel.Composition.dll

System.ComponentModel.Composition.Initialization.dll

3.     Add a new Silverlight 4 application called ExternalSilverlightApplication to the solution that was created in step 1.  Ensure the new application is hosted in the web application for the solution and choose to not create a test page for the new application.

4.     Delete the App.xaml and MainPage.xaml files – they aren’t needed.

5.     Add references to the following assemblies in the ExternalSilverlightApplication project:

System.ComponentModel.Composition.dll

System.ComponentModel.Composition.Initialization.dll

6.     Ensure the two references above have their Copy Local values set to false.  As we will have these two assmblies in the original Silverlight application, we will have no need to include them in the built ExternalSilverlightApplication build.

7.     Add a new user control called LeftControl to the ExternalSilverlightApplication project.

8.     Replace the LayoutRoot Grid with the following xaml:

    <Grid x:Name="LayoutRoot" Background="Beige" Margin="40" >

        <Button Content="Left Content" Margin="30"></Button>

    </Grid>

9.     Add the following statement to the top of the LeftControl.xaml.cs file

using System.ComponentModel.Composition;

10.   Add the following attribute to the LeftControl class

    [Export(typeof(LeftControl))]

 

This attribute tells MEF that the type LeftControl will be exported – i.e. made available for other applications to import and compose into the application.

11.   Add a new user control called RightControl to the ExternalSilverlightApplication project.

12.   Replace the LayoutRoot Grid with the following xaml:

    <Grid x:Name="LayoutRoot" Background="Green" Margin="40"  >

        <TextBlock Margin="40" Foreground="White" Text="Right Control" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center" ></TextBlock>

    </Grid>

13.   Add the following statement to the top of the RightControl.xaml.cs file

using System.ComponentModel.Composition;

14.   Add the following attribute to the RightControl class

    [Export(typeof(RightControl))]

15.   In your original Silverlight project add a reference to the ExternalSilverlightApplication project.

16.   Change the reference to the ExternalSilverlightApplication project to have it’s Copy Local value = false.  This will ensure that the referenced ExternalSilverlightApplication Silverlight application is not included in the original Silverlight application package when it it built.  The ExternalSilverlightApplication Silverlight application therefore has to be downloaded on demand by the original Silverlight application for it’s controls to be used.

1.     In your original Silverlight project add the following xaml to the LayoutRoot Grid in MainPage.xaml:

        <Grid.RowDefinitions>

            <RowDefinition Height="65*" />

            <RowDefinition Height="235*" />

        </Grid.RowDefinitions>

        <Button Name="LoaderButton" Content="Download External Controls" Click="Button_Click"></Button>

        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" >

            <Border Name="LeftContent" Background="Red" BorderBrush="Gray" CornerRadius="20"></Border>

            <Border Name="RightContent" Background="Red" BorderBrush="Gray" CornerRadius="20"></Border>

        </StackPanel>

 

 

 

The borders will hold the controls that will be downlaoded, imported and composed via MEF when the button is clicked.

2.     Add the following statement to the top of the MainPage.xaml.cs file

using System.ComponentModel.Composition;

3.     Add the following properties to the MainPage class:

        [Import(typeof(LeftControl))]

        public LeftControl LeftUserControl { get; set; }

        [Import(typeof(RightControl))]

        public RightControl RightUserControl { get; set; }

 

This defines properties accepting LeftControl and RightControl types.  The attrributes are used to tell MEF the discovered type that should be applied to the property when composition occurs.

17.   Add the following event handler for the button click to the MainPage.xaml.cs file:

        private void Button_Click(object sender, RoutedEventArgs e)

        {

 

                DeploymentCatalog deploymentCatalog =

    new DeploymentCatalog("ExternalSilverlightApplication.xap");

 

                CompositionHost.Initialize(deploymentCatalog);

 

                deploymentCatalog.DownloadCompleted += (s, i) =>

                {

                    if (i.Error == null)

                    {

                        CompositionInitializer.SatisfyImports(this);

 

                        LeftContent.Child = LeftUserControl;

                        RightContent.Child = RightUserControl;

                        LoaderButton.IsEnabled = false;

                    }

                };

 

                deploymentCatalog.DownloadAsync();

        }

This is where the magic happens!  The deploymentCatalog object is pointed to the ExternalSilverlightApplication.xap file.  It is then associated with the CompositionHost initialization.  As the download will be asynchronous, an eventhandler is created for the DownloadCompleted event.  The deploymentCatalog object is then told to start the asynchronous download.

The event handler that executes when the download is completed uses the CompositionInitializer.SatisfyImports() function to tell MEF to satisfy the Imports for the current class.  It is at this point that the LeftUserControl and RightUserControl properties are initialized with composed objects from the downloaded ExternalSilverlightApplication.xap package.

18.   Run the application click the Download External Controls button and see the controls defined in the ExternalSilverlightApplication application loaded into the original Silverlight application.

Congratulations!  You have implemented download on demand capabilities for composite applications using the MEF DeploymentCatalog class.  You are now able to segment your applications into separate xap file for deployment.

 

Posted on Saturday, May 15, 2010 7:25 PM Silverlight | Back to top


Comments on this post: Silverlight MEF – Download On Demand

# re: Silverlight MEF – Download On Demand
Requesting Gravatar...
System.ComponentModel.Composition.Initialization.dll

is missing for my case so what should be done
Left by Q on May 31, 2010 7:27 AM

# re: Silverlight MEF – Download On Demand
Requesting Gravatar...
Tried the code on an existing (large) project and after just the first few steps including creating the external app, when I try and build I get the error that the namespace name 'Resources' does not exist in the namespace ...

Any ideas? Thanks
Left by Stuart on Jul 05, 2010 9:45 AM

# re: Silverlight MEF – Download On Demand
Requesting Gravatar...
why must have "using ExternalSilverlightApplication;" in the MainPage.xaml.cs file. this means new xap file class must have ths namespace name "ExternalSilverlightApplication" ?
Left by weichangzhou on Aug 04, 2010 6:08 AM

# re: Silverlight MEF – Download On Demand
Requesting Gravatar...
hi
thanks for this tutorial, but i cant find the DeploymentCatalog in the System.ComponentModel.Composition.Hosting

im using windows 7 ultimate 64bit, i found some help that it said unblock dll file, bit also i cant find the unblock button in properties window of dll file
i appreciate any help
Left by amir on Oct 11, 2010 8:33 AM

# re: Silverlight MEF – Download On Demand
Requesting Gravatar...
This is really a very nice example demonstarting the deployment catalog functionality. Thanks a lot..
Left by Harita Tiwari on Dec 27, 2010 5:39 AM

# re: Silverlight MEF – Download On Demand
Requesting Gravatar...
Excellent!. You are a Genius peter!. This is something I was hunting for a week!!. With your code, It worked like a breeze.
Left by Peter Aju on Feb 24, 2011 5:01 AM

# re: Silverlight MEF – Download On Demand
Requesting Gravatar...
Hello!! Thanks, it's a good sample. very helpful.
but I have a question, does it can be reload again?
when I click button again (I modify code => LoaderButton.IsEnabled = true;) it will appar error message like this:

「 Unhandled Error in Silverlight Application The container has already been initialized either by another call to InitializeContainer or by someone causing the default container to be constructed. Ensure that InitializeContainer is one of the first things that happens in the application host to ensure that it is ready for the first composition. 於 System.ComponentModel.Composition.Hosting.CompositionHost.Initialize(CompositionContainer container)」

any idea? thanks.
Left by march on Aug 18, 2011 2:35 AM

Your comment:
 (will show your gravatar)


Copyright © PeterTweed | Powered by: GeeksWithBlogs.net