Building a Composite WPF and Silverlight Application with Prism – Part 1


In this four part series based on Microsoft Patterns and Practices guidance, I am going to build a Composite Silverlight application using Prism. This tutorial is in both C# and Visual Basic, but when creating projects in Visual Studio, the images I may use may be C# templates for example, but you should be able to do exactly the same in Visual Basic and vica-versa. It avoids the repetition of posting two images with “Open C# Silverlight Application” and “Open Visual Basic Application”, when the Visual Studio templates are the same – bar the language. I will however, post code samples in both languages

Configuration

You will need the Silverlight development tools, and the Prism Libraries. For additional configuration information you can use the codeplex site.In the project you will need to reference the Prism Libraries, I downloaded the CompositeApplicationGuidance-Feb2009.exe from the link above, and extracted the files into a folder. You should now have the following files

Installation

Take the time to read the “Readme.txt”. You will also need to open the “Open Composite Application Library.bat” and build that project in Visual Studio. It is only after building the solution, that the requisite libraries become available in CompositeApplicationGuidance-Feb2009CALSilverlightComposite.UnityExtensionsBinDebug.

CAB Silverlight Demo

Create a new Silverlight application and call the Solution NewsAggregator and the project NewsAggregator.Shell

Shell

Create an ASP.NET Web Project

Website

In the Shell Project, delete the page.xaml and add the shell right clicking the project in solution explorer and choose Add a new item

AddUserControl

Add a Silverlight User Control  and call this Shell.xaml

ProperShell

Now you need to connect this application to Prism, and you do this typically using the “Bootstrapper”. To do this, create a new class called Bootstrapper and add it to the project, and inherit from UnityBootstrapper. UnityBootstrapper is available in the Prism libraries your require, so you will need to add references to them.

In C# right click the add a reference node and chose Add Reference

In Visual Basic double click your MyProject node in solution explorer and navigate to the references tab, and choose Add Reference. You should then navigate to the folder with the libraries (see configuration section above) and add the following five libraries

RequisiteLibraries

There are two things required by the bootstrapper, one of them is the Shell and the other is the ModuleCatalog

Visual Basic

Imports Microsoft.Practices.Composite.UnityExtensions

Imports Microsoft.Practices.Composite.Modularity

Public Class Bootstrapper

    Inherits UnityBootstrapper

    Protected Overrides Function CreateShell() As System.Windows.DependencyObject

        Return New Shell

    End Function

    Protected Overrides Function GetModuleCatalog() As Microsoft.Practices.Composite.Modularity.IModuleCatalog

        Return New ModuleCatalog

    End Function

End Class

C#

using System.Windows;

using Microsoft.Practices.Composite.UnityExtensions;

using Microsoft.Practices.Composite.Modularity;

namespace NewsAggregator.Shell

{

    public class Bootstrapper : UnityBootstrapper

    {

        protected override DependencyObject CreateShell()

        {

            return new Shell();

        }

        protected override Microsoft.Practices.Composite.Modularity.IModuleCatalog GetModuleCatalog()

        {

            return new ModuleCatalog();

        }

    }

}

For Silverlight applications you need to set the RootVisual, which is the starting control for a Silverlight application.

Visual Basic

    Protected Overrides Function CreateShell() As System.Windows.DependencyObject

        Dim shell As New Shell

        Application.Current.RootVisual = shell

        Return shell

    End Function

C#

       protected override DependencyObject CreateShell()

        {

            Shell shell = new Shell();

            Application.Current.RootVisual = shell;

            return shell;

        }

You then need to connect the Bootstrapper to the application, to do this, double click the App.xaml.cs or App.xaml.vb depending on your language and set the RootVisual in the Application Startup method thus

Visual Basic

    Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup

        Dim bootstrapper As New Bootstrapper

        bootstrapper.Run()

    End Sub

C#

      private void Application_Startup(object sender, StartupEventArgs e)

        {

            new Bootstrapper().Run();

        }

This will connect the application to Prism. Now everything is in place, we now can add a new module. Add a new Silverlight Class Library and call it NewsAggregator.Digg

DiggModule

Delete the default class1 that is added, and add references to the five Prism libraries (same libraries added to bootstrapper above).

add a new class to this project, and call it DiggModule and ensure it implements IModule

Visual Basic

Imports Microsoft.Practices.Composite.Modularity

Public Class DiggModule

    Implements IModule

    Public Sub Initialize() Implements Microsoft.Practices.Composite.Modularity.IModule.Initialize

    End Sub

End Class

C#

using Microsoft.Practices.Composite.Modularity;

namespace NewsAggregator.Digg

{

    public class DiggModule : IModule

    {

        #region IModule Members

        public void Initialize()

        {

            //throw new NotImplementedException();

        }

        #endregion

    }

}

Now that the module has been created, it needs to be added to the catalogue. This catalogue was created in the Bootstrapper, but that was just an empty catalogue. In the Shell project, add a reference to the Digg project, and set the method in the Bootstrapper

Visual Basic

    Protected Overrides Function GetModuleCatalog() As Microsoft.Practices.Composite.Modularity.IModuleCatalog

        Dim catalog As New ModuleCatalog

        catalog.AddModule(GetType(DiggModule))

        Return catalog

    End Function

C#

   protected override Microsoft.Practices.Composite.Modularity.IModuleCatalog GetModuleCatalog()

        {

            ModuleCatalog catalog = new ModuleCatalog();

            catalog.AddModule(typeof(DiggModule));

            return catalog;

        }

If you run the project you will get a message box asking if you want to enable debugging

Debugging

click OK, but remember that this option must be set to false in production websites, and you now have an empty project that has loaded the Digg module

EmptyProject

In lesson two we will focus on visual composition.

The complete source code for the 4 part series is available here (Download the WPF Silverlight Prism Folder)

Free Silverlight DataGrids


One of the key controls in most applications is a datagrid. In smart client applications, you have always faced restrictions and difficulty when wanting to present data in a less ‘list style’ (using standard controls). Think of an employee table, with an image of the employee (see DevExpress example beneath).

There are commercial versions that improve things significantly, but they come at the expense of either taking a month or so out to figure how to use the control efficaciously or paying a developer to do this for you. Plus the expense of the suite of course, which usually appears vastly overpriced, but it takes genius and time to create these features with C/C++ or .NET and Windows Forms, hence the hefty price tag.

WPF and Silverlight offer  the ability to style and template controls, pretty much however you like. ASP.NET has several controls that handle this scenario in Visual Studio.

VSData

If you’re in Windows Forms you’re limited to the inflexible DataGridView or third party controls. If you are in ASP.NET and don’t know of Matt Berseth’s blog you need to correct this alarming lack of good education and check it (blog) out. There are some peaches and absolute nuggets euphemistically speaking. Matt has some technically accomplished posts, and pretty much everything he writes about is excellent. I cannot stress enough the kind of hoops you’d need to jump through to create a datagrid that looked and functioned like the super-duper listview control in ASP.NET and Matt’s example.

Scott Morrison is the new program manager for the Silverlight datagrid, and has some introductory tutorials on using this ubiquitous control. I can’t help thinking that if Microsoft had got this right with WPF and had the same availability of controls for WPF, uptake would have been far swifter. Nevertheless, we are where we are now, and some great features are already being added.

DevExpress have also announced a free datagrid that is beautiful. You can view an online demo here.

Speaking as a not quite ‘hardened’ Windows Forms developer, the sooner performance issues are sorted in WPF/Silverlight in the forthcoming Visual Studio 2008 and .NET 3.5 service pack, one begins to find it increasingly difficult, latching onto previous technologies, for the sake of reasons I have hitherto promulgated in this blog (check the windows forms category).

Silverlight. Thinking Small with Big effect


Silverlight is a cut down version of the Windows Presentation Foundation, and was formally known as Windows Presentation Foundation Everywhere (WPF/E). This cut down version includes the base class library and WPF libraries that allow .NET developers to program .NET code that can be hosted in any web browser and on any platform – Windows, Linux and Apple Macintosh.

Silverlight 1.0 was released some time ago and concentrated on media, i.e Video and Music players. There was nothing of any real interest for 50 hour a week coders. This however, has changed with a Silverlight beta 2.0, that is available which incorporates a whole host of controls. In traditional ASP.NET applications, AJAX is the most recent technology to be used to enhance user interaction with a web-page. AJAX is client focused, which means that as one browses through a web-site, one doesn’t get the page flicker and reload each time you interact with a server control or web-page. Traditionally you send a HTTPGET request to the server and it responds. AJAX uses JavaScript heavily to interact in the browser on the client machine. AJAX is essentially a hack, but it works. It gets rid of the annoying flickering, and the whole experience with the web-browser is ostensibly mellifluous.

With these two client focused technologies, Microsoft have had to shift focus to the client machine again. I started out in ASP.NET and recently returned to client development, and can truthfully say that Microsoft have put enormous resources into their web stack. Which is server based. Independent ISV’s have supplied the client stack rather well, so for a while, things trundled along nicely.

Then along came Silverlight. The principal requirement for Silverlight (like Adobe flash) is that end user download a plug-in for their browser. Microsoft have had to do some really deep thinking into what they put in and leave out. The total size at the moment is less than 5MB, so space and optimised code became a priority by default. They needed to provide a plug-in that was as full featured, but as small as possible.

One of the undoubted results of this ‘trimming-down’ exercise is the procurement of the client profile. This is such a big feature in the forthcoming .NET 3.5 service pack, and it’s all been brought about thinking as small as possible and getting the biggest result, insofar as ease of deployment.