Managed Extensibility Framework in Silverlight4

Managed Extensibility Framework(MEF) is an old concept of building extensible applications. But it was not a part of Silverlight3. To work on MEF we had to get the MEFPreview8(latest version) from Codeplex and then include the .dll files in our project,to implement it.
Silverlight 4 has got it inbuilt. This is great.So let us first understand to see what MEF is.

Managed Extensibility Framework revolves around three concepts.
Export:   What you need to provide.
Import:   Get what has been provided.
Compose: Do something with what you got.

Lets c it practically 🙂
I created a Silverlight application named MEF hosted in ASP.Net Web Application project .
Then I included another Silverlight Usercontrol . Named it as LocalControl.xaml.
Img1
To implement MEF,we  have to add reference to :
System.ComponentModel.Composition.dll  and System.ComponentModel.Composition.Initialization.dll

img2 img3

The logic goes this way:
I have to export usercontrol that I created in LocalControl.xaml file and import it in my MainPage.xaml.
Code added to LocalControl.xaml file:

<UserControl x:Class=”MEF.LocalControl”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
    mc:Ignorable=”d”
    Height=”200″ Width=”200″>
    <StackPanel Background=”Red”>
        <RichTextArea Width=”180″ Background=”Beige” Height=”180″ Margin=”10″ ></RichTextArea>
    </StackPanel>
</UserControl>

Code Behind in LocalControl.xaml.cs file.

using System.ComponentModel.Composition;namespace MEF
{
   [Export(typeof(UserControl))]   
    public partial class LocalControl : UserControl
    {
        public LocalControl()
        {
            InitializeComponent();
        }   

}
}

The Export attribute tells MEF that the LocalControl is available for service.

In MainPage.xaml to display this Control in Stackpanel on click event of button MEF concept has been used.
Code added to MainPage.xaml

<UserControl x:Class=”MEF.MainPage”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
    mc:Ignorable=”d”
    d:DesignHeight=”300″ d:DesignWidth=”400″
    xmlns:controls=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls”>    <Grid x:Name=”LayoutRoot” Background=”White”>
        <StackPanel Margin=”10″>
            <StackPanel Width=”250″ Height=”250″ x:Name=”pnl_Display” Background=”Brown”></StackPanel>
            <Button x:Name=”btn_DisplayControl” Height=”30″ Width=”200″  Content=”Click to display control”     Click=”btn_DisplayControl_Click”/>
        </StackPanel>    </Grid>
</UserControl>
 

Code behind in MainPage.xaml.cs

using System.ComponentModel.Composition;
namespace MEF
{
    public partial class MainPage : UserControl
    {
        [Import]
        public UserControl myControl =  new UserControl();      

        public MainPage()
        {
            InitializeComponent();   

           PartInitializer.SatisfyImports(this);
        }  

       private void btn_DisplayControl_Click(object sender, RoutedEventArgs e)
        {
             pnl_Display.Children.Add(myControl);
        }
    }
}

If  you observe the code in MainPage.xaml.cs while creating an object I have simply created a usercontrol object.  It is nowhere specified that it is of type LocalControl. Still after I run my project I am able to see the LocalControl on click event of button.

So this is MEF’s magic.

The Import attribute gets whatever has been exported . We are right now exporting only one usercontrol.
If there are many exports, you have to use ImportMany attribute.

Once the imports are done,you have to tell our MainPage usercontrol to accept the imports.
 PartInitializer.SatisfyImports(this) will do the job.
If this statement is not added you won’t see the LocalControl in StackPanel on click event of button.

Here are the snapshots:

img4 
  StackPanel with RichtexArea   control in LocalControl.xaml file
img5
StackPanel where the LocalControl has to be displayed on clicked event of button in MainPage.xaml
img6

This application is very very basic . But the power of MEF is much more. 

I would be blogging more on this.. 🙂

The best links to get started :

http://silverlight.net/learn/videos/all/using-mef-silverlight-4-extensibility/
http://blogs.msdn.com/gblock/archive/2009/11/30/building-the-hello-mef-dashboard-in-silverlight-4-part-i.aspx 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s