Apr 5 2010

Silverlight 4, MEF and MVVM: MEFModules, Dynamic XAP Loading and Navigation Applications

In the last example I’ve implemented a new “MEF Module” organized with a MVVM approach and using Prism Event Aggregator to exchange messages.

This new module could be used to partititon the application in several XAPs composed dynamically at run-time using MEF, the new DeploymentCatalog and the Navigation features available in Silverlight.

To start I’ve created a new “Silverlight Navigation Application” which produces a complete application with ready-to-use navigation and localization.

Then I’ve inserted a new “Silverlight User Control” inside the “Views” folder and named it “MEFModuleContainer“: this one is called by the navigation framework and is responsible to load dynamically the module using the MEF “DeploymentCatalog“.

This is the XAML of the container:

<StackPanel x:Name="ContentStackPanel">
    <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
               Text="MEF Module container"/>
    <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
               Text="MEF content"/>
    <ItemsControl x:Name="content"/>
</StackPanel>

Our “MEF Module” is hosted in a “ItemsControl” using the “Items” property:

public MEFModuleContainer()
{
    InitializeComponent();

    CompositionInitializer.SatisfyImports(this);

    CatalogService.AddXap("MEFModule.xap");
}

[Import]
public IDeploymentCatalogService CatalogService { get; set; }

[ImportMany(AllowRecomposition = true)]
public Lazy<UserControl>[] MEFModuleList { get; set; }

#region IPartImportsSatisfiedNotification Members

public void OnImportsSatisfied()
{
    MEFModuleList.ToList()
        .ForEach(module=>
            content.Items.Add(module.Value)
        );
}

#endregion

In order to use the DeploymentCatalog, it’s necessary to define an interface IDeploymentCatalogService (read this post by Glenn Block for more information about it):

public interface IDeploymentCatalogService
{
    void AddXap(string uri, Action<AsyncCompletedEventArgs> completedAction = null);
    void RemoveXap(string uri);
}

and implement it in the class “DeploymentCatalogService“:

[Export(typeof(IDeploymentCatalogService))]
public class DeploymentCatalogService : IDeploymentCatalogService
{
    private static AggregateCatalog _aggregateCatalog;

    Dictionary<string, DeploymentCatalog> _catalogs;

    public DeploymentCatalogService()
    {
        _catalogs = new Dictionary<string, DeploymentCatalog>();
    }

    public static void Initialize()
    {
        _aggregateCatalog = new AggregateCatalog();
        _aggregateCatalog.Catalogs.Add(new DeploymentCatalog());
        CompositionHost.Initialize(_aggregateCatalog);
    }

    public void AddXap(string uri, Action<AsyncCompletedEventArgs> completedAction = null )
    {
        DeploymentCatalog catalog;
        if (!_catalogs.TryGetValue(uri, out catalog))
        {
            catalog = new DeploymentCatalog(uri);
            if (completedAction != null)
                catalog.DownloadCompleted += (s, e) => completedAction(e);
            else
                catalog.DownloadCompleted += catalog_DownloadCompleted;

            catalog.DownloadAsync();
            _catalogs[uri] = catalog;
            _aggregateCatalog.Catalogs.Add(catalog);
        }
    }

    void catalog_DownloadCompleted(object sender, AsyncCompletedEventArgs e)
    {
        if (e.Error != null)
            throw e.Error;
    }

    public void RemoveXap(string uri)
    {
        DeploymentCatalog catalog;
        if (_catalogs.TryGetValue(uri, out catalog))
        {
            _aggregateCatalog.Catalogs.Remove(catalog);
        }
    }
}

The DeploymentCatalogService is initialized during the Application startup in this way:

private void Application_Startup(object sender, StartupEventArgs e)
{
    //Initialize the DeploymentCatalogService for MEF
    DeploymentCatalogService.Initialize();
    this.RootVisual = new MainPage();
}

When the user clicks on the Navigation bar, the container is loaded and filled with the content of the external XAP, all managed by MEF:

So we have a Navigation application which can dynamically load external “MEFModules” organized with a MVVM approach, contained in external XAPs and using an Event Aggregator to exchange messages, all managed by MEF.

This application can be easily extended inserting WCF RIA Services and/or Blend sample data for the design mode.

As usually the sample code is available for download here and will be soon available in the CodePlex project “MEF MVVM” – http://mefmvvm.codeplex.com.

Happy Silverlighting!


Dec 13 2009

Experiments using MEF, MVVM and Silverlight 4 Beta – Part 6: Design-mode ViewModel and calling a WCF Service

Note – this is a multi part post:

Today I had the opportunity to take a look at the code written in the previous posts and insert some new stuff in order to modify the project and make new experiments about:

  1. using a different ViewModel class for the design-time and run-time;
  2. using MEF combined with the new implicit styles feature available in Silverlight 4 Beta to initialize the DataContext of the View at run-time;
  3. retrieve the data using an async call to a WCF service and passing back the results to the VM via MEF.

1 – Using different VM classes

To accomplish this task I’ve defined a new interface named IMainPageViewModel defining these members:

/// MainPage ViewModel interface
public interface IMainPageViewModel : IViewModelBase
{
    string aViewModelProperty { get; set; }
    DataItems dataItems { get; set; }
    ICommand addDataItemCommand { get; }
}

This new interface is then implemented by two classes named ViewModels.DesignMode.MainPageViewModel and ViewModels.MainPageViewModel:

/// ViewModel for the "MainPageView" used in design-mode
public class MainPageViewModel : ViewModelBase, IMainPageViewModel
{
    public MainPageViewModel()
    {
        //Initialize the properties with test data if design mode
        aViewModelProperty = "Value - Design Mode";

        //Initialize the "dataItems" property
        dataItems = new DataItems();
        dataItems.Add(new DataItem() { Description = "Sample Data Item 1 - Design Mode" });
        dataItems.Add(new DataItem() { Description = "Sample Data Item 2 - Design Mode" });
    }

    public string aViewModelProperty { get; set; }

    public DataItems dataItems { get; set; }

    public ICommand addDataItemCommand { get; set; }
}
/// ViewModel class for the "MainPageView" using MEF
[PartCreationPolicy(CreationPolicy.NonShared)]
[Export(typeof(MainPageViewModel))]
public class MainPageViewModel : ViewModelBase, IMainPageViewModel
{
    public MainPageViewModel() {  }

    [Import("aViewModelPropertyTextProvider")]
    public string aViewModelProperty { get; set; }

    [Import(typeof(WcfDataItems))]
    public DataItems dataItems { get; set; }

    [Import(typeof(ICommand))]
    public PartCreator<ICommand> addDataItemCommandCreator { get; set; }

    private ICommand _addDataItemCommand;
    public ICommand addDataItemCommand
    {
        get {
            if (_addDataItemCommand==null)
                _addDataItemCommand = addDataItemCommandCreator.CreatePart().ExportedValue;
            return _addDataItemCommand;
        }
    }
}

The first one is associated with the View at design-time using an attached property which permits to bind an instance only at design time using this xaml (usually you should use <d:DesignProperties.DataContext>, here we are experimenting, of course):

<UserControl x:Class="SL4_MVVM_MEF.Views.MainPageView"
    ........
    xmlns:designer="clr-namespace:SL4_MVVM_MEF.Designer"
    xmlns:providersDM="clr-namespace:SL4_MVVM_MEF.Providers.DesignMode"
    >

    <!-- Design time DataContext -->
    <designer:Page.DesignDataContext>
        <providersDM:MainPageViewModelProvider/>
    </designer:Page.DesignDataContext>

    ........

DesignTimeDataContext attached dependency property:

/// DesignDataContext Attached Dependency Property
public static readonly DependencyProperty DesignDataContextProperty =
    DependencyProperty.RegisterAttached("DesignDataContext", typeof(object), typeof(Page),
        new PropertyMetadata((object)null,
            new PropertyChangedCallback(OnDesignDataContextChanged)));

/// Gets the DesignDataContext property.
public static object GetDesignDataContext(DependencyObject d)
{
    return (object)d.GetValue(DesignDataContextProperty);
}

/// Sets the DesignDataContext property.
public static void SetDesignDataContext(DependencyObject d, object value)
{
    d.SetValue(DesignDataContextProperty, value);
}

/// Handles the DesignDataContext property changes
private static void OnDesignDataContextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    FrameworkElement element = (FrameworkElement)d;

    //Get the ViewModel instance only in design mode
    if ((Application.Current == null) || (Application.Current.GetType() == typeof(Application)))
       element.DataContext = e.NewValue;
}

And this is the design-time mode in Blend using the new attached property:

MEFMVVM Blend

2 – MEF and implicit styles

The new implict styles feature available in Silverlight 4 beta is used to initialize the DataContext of the MainPageView type in a declarative way in App.xaml:

<Application xmlns="http://schemas.microsoft.com/winfx/2006/ xaml/presentation"
   xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"
   x:Class= "SL4_MVVM_MEF.App"
   xmlns:views= "clr-namespace:SL4_MVVM_MEF.Views"
   xmlns:providers= "clr-namespace:SL4_MVVM_MEF.Providers">

<Application.Resources>
    <!-- Run-time DataContext composed using MEF -->
    <Style TargetType="views:MainPageView">
        <Setter Property="DataContext">
            <Setter.Value>
          <providers:MainPageViewModelMEFProvider/>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>
</Application>

In this case I’ve modified the MainPageViewModelMEFProvider class and inserted a new IViewModelProvider interface in order to obtain the instance of the ViewModel initialized by MEF:

/// Interface for the ViewModelProvider
public interface IViewModelProvider
{
    object GetViewModel { get; }
}
/// Get the ViewModel instance using MEF
public class MainPageViewModelMEFProvider : IViewModelProvider
{
    public MainPageViewModelMEFProvider() { }

    [Import(typeof(MainPageViewModel))]
    public IViewModelBase ViewModel { get; set; }

    /// Get the Instance of the ViewModel using MEF
    public object GetViewModel
    {
        get
        {
           PartInitializer.SatisfyImports(this);
           return ViewModel;
        }
    }
}

3 – retrieve the data using an async call to a WCF service

I’ve added to the solution a simple WCF service which returns a collection of DataItems:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class DataItemService : IDataItemService
{
    [OperationContract]
    public List<DataItemFromService> GetDataItems()
    {
        // Add your operation implementation here
        return new List<DataItemFromService>()
        {
            new DataItemFromService() {Description="DataItem from service 1"},
            new DataItemFromService() {Description="DataItem from service 2"},
            new DataItemFromService() {Description="DataItem from service 3"}
        };
    }
}

interface IDataItemService
{
    List<DataItemFromService> GetDataItems();
}

public class DataItemFromService
{
    public string Description { get; set; }
}

Since the project uses MEF composition and [Import] /[Export] attributes to initialize all the members of the VM class, I’ve used the same approach for the dataItems collection, retrieving data from an async call to the WCF service using a WcfDataItems class:

/// A sample collection of DataItems from WCF
[Export(typeof(WcfDataItems))]
public class WcfDataItems : DataItems
{
    public WcfDataItems()
    {
        //Initialize the collection
        DataItemWcfService.DataItemServiceClient svc = new DataItemWcfService.DataItemServiceClient();
        svc.GetDataItemsCompleted += (s1, e1) =>
        {
            if (e1.Result != null)
                e1.Result.ToList().ForEach(d =>
                    {
                        //Retrieve a new DataItem
                        DataItem di = DataItemCreator.CreatePart().ExportedValue;
                        di.Description = d.Description;
                        this.Add(di);
                    });
            isLoading = false;
        };
        svc.GetDataItemsAsync();
        isLoading = true;
    }

    [Import(typeof(DataItem))]
    public PartCreator<DataItem> DataItemCreator { get; set; }
}

The code is available for download here.

Happy Silverlighting!


Oct 19 2009

Visual Studio 2010 Beta 2 and updated Silverlight Toolkit available

Lot of news this week!

Visual Studio 2010 and .NET Framework 4 Beta 2 are now available for download here, Jeff Beehler has posted some useful info about this “go live” release.

The new Silverlight Toolkit October 2009 Release is also available on Codeplex featuring Visual Studio 2010 support and various improvements on existing components (like drag-and-drop for items controls).

Read these posts by Tim Heuer and Jeff Wilcox for more details and enjoy!


Feb 23 2009

Southridge Realty: WPF, M-V-VM and the WPF toolkit

Jaime Rodriguez has posted an awesome example using Windows Presentation Foundation, the M-V-VM pattern and the WPF toolkit.

Check out the original post to read the details and download the source code.


Feb 2 2009

Model-View-ViewModel, INotifyPropertyChanged, Static Reflection and Extension methods

Matteo Baglini has posted an interesting example to implement the INotifyPropertyChanged interface and optimize the code for Visual Studio rename refactoring. Definitely worth a look!


Jan 20 2009

Query data with Parallel LINQ

In this post, Charlie Calvert illustrates how to write code optimized for multiple processors using Parallel LINQ. 


Dec 22 2008

Free C# and VB Coding Standard Reference Documents

Click here to download these useful docs by Clint Edmonson.


Feb 20 2008

.NET 3.5 Client Product Roadmap with WPF improvements

In this post, Scott Guthrie explains the new enhancements that will be released over the next months related to client-development using .NET 3.5 and Visual Studio 2008.

I have found very interesting the Performance and Control improvements announced for WPF.


Feb 10 2008

Useful links for Visual Studio 2008 and .NET Framework 3.5

I’ve found these interesting resources on the Microsoft website:

Take a look!


Feb 9 2008

Visual Studio 2008 Web Development HotFix available

More details can be found in this post by Scott Guthrie.

Click here to download the HotFix.