Dynamic page assembly using MEF in silverlight4

Dynamic page assembly using MEF in silverlight4

 

 

. Net 4.0 provides a MEF framework for developing software systems that support plug-ins. Fortunately, Silverlight 4 also supports MEF. This makes it easy to implement the following functions:

 

When you access the Silverlight application, you can start to display only one "Initial simple" Page. when you need it, you can dynamically download the new Assembly from the Web site. Then, the Silverlight client application then uses MEF to "Assemble" All page components included in the dynamically downloaded assembly into a new page with enhanced functionality.

 

The sample solution dynamiccomposepage shows the technical details. The following describes the development steps.

 

1. Use Visual Studio 2010 to create a Silverlight business application project named dynamiccomposepage.

Visual Studio 2010 will help us create an ASP. NET Website named dynamiccomposepage. Web that references the Silverlight project named dynamiccomposepage.

Expand the dynamiccomposepage project node in Solution Explorer, and you can see a home generated by Visual Studio 2010 in its Views folder. the XAML page. After a while, we will modify this page to implement dynamic page assembly.

 

2. Now you need to provide an interface that all MEF parts follow. To do this, add a "Silverlight class library" project to the solution.[1]Mypartcontract, and add an imypart interface to it. For simplicity, this example does not add any Members to this interface. Of course, you can add appropriate members to the interface as needed in actual development.

 

Namespace mypartcontract

{

Public interface imypart

{

}

}

 

 

 [1]Note: This is not a common "class library" project. The Assembly used by Silverlight is rewritten, which is different from the standard. NET Framework.

 

 

3 The following defines the Silverlight page components that can be dynamically combined.

 

Add a "Silverlight class library" project named "mypageparts" to the sample solution. In the displayed dialog box, select "Silverlight 4 ".

Then, add a "Silverlight user control" named "myeditorcontrol" to the mypageparts project. on this page, we place a richtextarea control to act as the Text Editor:

 

<Usercontrol X: class = "mypageparts. myeditor"……>

<Richtextarea X: Name = "myeditorcontrol "...... />

</Usercontrol>

 

Now, you need to make this user control dynamically assembled by MEF. To do this, you need to complete two steps:

 

(1) Add references to the Silverlight class library mypartcontract that includes the imypart interface to this project (including the Silverlight project dynamiccomposepage created earlier.

(2) Add the MEF core assembly system to this project (including the previously created Silverlight project dynamiccomposepage. componentmodel. composition. DLL reference, the silverligh project dynamiccomposepage that will be responsible for completing the "assembly" work also needs to be added to another core assembly system. componentmodel. composition. initialization. DLL reference.

 

 

 

 

Note:

The preceding Assembly can be found in the following locations:

 

C:/program files/Microsoft sdks/Silverlight/v4.0/Libraries

 

 

The following is the code for the Silverlight 4 user control that supports MEF dynamic assembly. Note the "[Export]" mark:

 

[Export (typeof (imypart)]

Public partial class myeditor: usercontrol, imypart

{

Public myeditor ()

{

Initializecomponent ();

}

}

 

4. Currently, the Silverlight page for "dynamic assembly" is developed (home. XAML in the Views folder of the dynamiccomposepage project ).

 

Place a button on the page to start the assembly process, and the other textblock to display the prompt information. More importantly, place a contentcontrol as the part container to display the page parts dynamically assembled:

 

<Stackpanel>

<Grid X: Name = "layoutroot">

......

</GRID>

<Button X: Name = "btnshoweditor"

Click = "btnshoweditor_click "...... />

<Textblock X: Name = "txtinfo "...... />

<Contentcontrol X: Name = "myeditorcontainer"/>

</Stackpanel>

 

The following describes the key code on this page.

 

First, we need to specify that the home. XAML page "requires" an imypart. Therefore, we add the following attributes to the home class and add the "[import]" mark to it:

 

[Import (typeof (imypart)]

Public imypart mypart {Get; set ;}

 

When the home. XAML page is displayed for the first time, the component assembly is not loaded. When you click "I want to edit text", dynamically create a WebClient object to download the Assembly from the Web site:

 

Private void downloadassemblyandcompose ()

{

// Obtain the URI of the Assembly

String uri = application. Current. Host. Source. absoluteuri;

Int Index = URI. indexof ("/clientbin"); // locate the root URL

Uri = URI. substring (0, index) + "/myparts/mypageparts. dll ";

 

WebClient client = new WebClient ();

This.txt info. Text = "downloading the text editor ...... ";

Client. openreadcompleted + = new

Openreadcompletedeventhandler (client_openreadcompleted );

// Start asynchronous download

Client. openreadasync (New uri (URI ));

This. btnshoweditor. isenabled = false; // prevents the user from starting the download for the second time ......

}

Note:

In this example, we assume that all the assemblies are placed in the myparts folder of the web site, and that we already know the Assembly file name to download. In actual projects, we can design a WCF Service for scanning parts folders and returning assemblies to the Silverlight client to allow truly "dynamic" assembly.

 

The above Code links an Event Response Method to the WebClient download completion event (openreadcompletedevent), which contains the core functional code of this example:

 

Void client_openreadcompleted (Object sender,

Openreadcompletedeventargs E)

{

// Load Resources

Assemblypart part = new assemblypart ();

Assembly ass = part. Load (E. Result); // extract the Assembly

// Create a catalog

Assemblycatalog CATA = new assemblycatalog (ASS );

Compositioncontainer Container = new compositioncontainer (CATA );

Compositionbatch bat = new compositionbatch ();

Bat. addpart (this );

Container. Compose (BAT); // assemble ......

// Display the assembled page Components

If (mypart! = NULL)

Myeditorcontainer. content = mypart;

}

 

The key in the above Code is to download the Assembly, dynamically load the Assembly from the stream, and then call MEF to assemble the component.

 

5. In the last step, create a dedicated component folder "myparts" on the web site and copy the Assembly containing the assembled parts to this folder.

 

 

 

 

The following figure shows the dynamic download and Assembly page for the example project runtime:

 

 

 

 

In this example, the combination of MEF and WebClient allows us to implement "download on demand" and "dynamic combination" on the Silverlight page, fully demonstrating the powerful functions of Silverlight 4!

  Download the sample source code in this article.Note: currently, the silverlight4 project cannot be developed in vs2010rc. Therefore, the sample runtime environment is Visual Studio 2010 beta2 + silverlight4.