Silverlight Workshop: Getting Started with the Composite Application Library

Who is this article for?

This post will be interesting for you if:

1. You are focused on development.
2. You work with a RIA environment such as Silverlight (also WPF)
3. If you've heard words like Composite Application Guidance , Composite Application Library
4. Are you interested in Pavel Ivchenkov’s article “ Creating an Application on WPF Using TDD Principles ?”
5. It was interesting for you to read the Acerv article “ Use Case Driven Development and Composite UI Application Block ”

Purpose of the article

')
In this article, you will learn the basics of what is contained in the Composite Application Guidance, as well as learn how to create composite Silverlight applications based on the Composite Application Library (create a loadable Module (Module), as well as a View (View) that you will display in the console) (Shell ))

Get ready

In this article, we will need the following builds from the Composite Application Library and Unity Application Block :

• Microsoft.Practices.Composite.dll
• Microsoft.Practices.Composite. Presentation. dll
• Microsoft.Practices.Composite.UnityExtensions . dll
• Microsoft.Practices.ServiceLocation.dll
• Microsoft.Practices.Unity.dll

The Composite Application Library is distributed as source codes, so the following builds must be compiled:

• Microsoft.Practices.Composite.dll
• Microsoft.Practices.Composite.Presentation.dll
• Microsoft.Practices.Composite.UnityExtensions.dll

To do this, run the executable file from the bundle.

Desktop & Silverlight - Open Composite Application Library.bat

and build the project in Visual Studio, then the necessary assemblies can be found in the following directory

CAL \ Silverlight \ Composite.UnityExtensions \ bin \ Debug

Let's get started

1. Create a project with a Shell application

First we will create a Silverlight Application application, call it HelloWorld.Silverlight , just do not forget to add an ASP.NET Web application to host it. The result should be something like this:



Next, add links to the necessary assembly:

• Microsoft.Practices.Composite .dll
• Microsoft.Practices.Composite. Presentation .dll
• Microsoft.Practices.Composite.UnityExtensions.dll
• Microsoft.Practices.Unity.dll
• Microsoft.Practices.ServiceLocation.dll

Next, we need to create a console ( Shell ) of our application, for this we rename Page.xaml to Shell.xaml, and also change the name of the class in Shell.xaml.cs c Page to Shell.

We also need to modify the Shell.xaml file:

< UserControl x:Class ="HelloWorld.Silverlight.Shell" xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" Width ="400" Height ="300" > < Grid x:Name ="LayoutRoot" Background ="White" > </ Grid > </ UserControl >
* This source code was highlighted with Source Code Highlighter .

1. < UserControl x:Class ="HelloWorld.Silverlight.Shell" xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" Width ="400" Height ="300" > < Grid x:Name ="LayoutRoot" Background ="White" > </ Grid > </ UserControl >
* This source code was highlighted with Source Code Highlighter .
2. < UserControl x:Class ="HelloWorld.Silverlight.Shell" xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" Width ="400" Height ="300" > < Grid x:Name ="LayoutRoot" Background ="White" > </ Grid > </ UserControl >
* This source code was highlighted with Source Code Highlighter .
3. < UserControl x:Class ="HelloWorld.Silverlight.Shell" xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" Width ="400" Height ="300" > < Grid x:Name ="LayoutRoot" Background ="White" > </ Grid > </ UserControl >
* This source code was highlighted with Source Code Highlighter .
4. < UserControl x:Class ="HelloWorld.Silverlight.Shell" xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" Width ="400" Height ="300" > < Grid x:Name ="LayoutRoot" Background ="White" > </ Grid > </ UserControl >
* This source code was highlighted with Source Code Highlighter .
5. < UserControl x:Class ="HelloWorld.Silverlight.Shell" xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" Width ="400" Height ="300" > < Grid x:Name ="LayoutRoot" Background ="White" > </ Grid > </ UserControl >
* This source code was highlighted with Source Code Highlighter .
7. < UserControl x:Class ="HelloWorld.Silverlight.Shell" xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" Width ="400" Height ="300" > < Grid x:Name ="LayoutRoot" Background ="White" > </ Grid > </ UserControl >
* This source code was highlighted with Source Code Highlighter .
8. < UserControl x:Class ="HelloWorld.Silverlight.Shell" xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" Width ="400" Height ="300" > < Grid x:Name ="LayoutRoot" Background ="White" > </ Grid > </ UserControl >
* This source code was highlighted with Source Code Highlighter .

< UserControl x:Class ="HelloWorld.Silverlight.Shell" xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" Width ="400" Height ="300" > < Grid x:Name ="LayoutRoot" Background ="White" > </ Grid > </ UserControl >
* This source code was highlighted with Source Code Highlighter .

Next, we need to know what a region is and how we will use it.

Region (Region) is a conceptual mechanism used by developers for displaying views (view) at a specific place of control, as well as for dynamic substitution of views (view).

The following controls can be used as a hosting for a region:

• System.Windows.Controls.ContentControl
• System.Windows.Controls.ItemsControl
• System.Windows.Controls.Primitives.Selector
• System.Windows.Controls.TabControl

More details about the regions (region) can be found at http://msdn.microsoft.com/en-us/library/dd458944(printer).aspx

In order to add a region to our console, we will use the ItemsControl. Add a namespace link to Shell.xaml

1. xmlns: Regions = "clr-namespace: Microsoft.Practices.Composite.Presentation.Regions; assembly = Microsoft.Practices.Composite.Presentation"

* This source code was highlighted with Source Code Highlighter .

as well as add an ItemsControl control

1. < UserControl x: Class = "HelloWorld.Silverlight.Shell"
2. xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3. xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
4. xmlns: Regions = "clr-namespace: Microsoft.Practices.Composite.Presentation.Regions; assembly = Microsoft.Practices.Composite.Presentation"
5. Width = "400" Height = "300" >
6. < ItemsControl Name = "MainRegion" />
7. </ UserControl >

* This source code was highlighted with Source Code Highlighter .

also add an attribute to it that indicates the RegionManager to the current region named “MainRegion”

1. < ItemsControl Name = "MainRegion" Regions: RegionManager . RegionName = "MainRegion" />

* This source code was highlighted with Source Code Highlighter .

Bootstrapper

Bootstrapper is a mechanism for building components of our application.

We will create our own bootstrapper class based on the abstract UnityBootstrapper class present in the Composite Application Library, which initializes the components using the Unity container, to do this, add the Bootstrapper.cs file to our project and define inheritance:

1. class Bootstrapper: UnityBootstrapper
2. {
3. }

* This source code was highlighted with Source Code Highlighter .

Also, override the CreateShell console creation method:

1. protected override DependencyObject CreateShell ()
2. {
3. Shell shell = Container.Resolve <Shell> ();
4. Application.Current.RootVisual = shell;
5. return shell;
6. }

* This source code was highlighted with Source Code Highlighter .

and definition of the catalog of modules:

1. protected override IModuleCatalog GetModuleCatalog ()
2. {
3. ModuleCatalog catalog = new ModuleCatalog ();
4. return catalog;
5. }

* This source code was highlighted with Source Code Highlighter .

It is also necessary to initialize the bootstrapper:

1. private void Application_Startup ( object sender, StartupEventArgs e)
2. {
3. Bootstrapper bootstrapper = new Bootstrapper ();
4. bootstrapper.Run ();
5. }

* This source code was highlighted with Source Code Highlighter .

You can run the project and check.

2. Add a module

A module is a functional, loosely coupled unit designed to be combined in an application.

To do this, we need to add a project of the Silverlight Class Library type and name it HelloWorldModule:



Add links to the assembly:

• Microsoft.Practices.Composite.dll
• Microsoft.Practices.Composite.Presentation.dll

Rename the class Class1 to HelloWorldModule and inherit it from the Microsoft.Practices.Composite.Modularity.IModule interface:

1. public class HelloWorldModule: IModule
2. {
3. public void Initialize () {}
4. }

* This source code was highlighted with Source Code Highlighter .

Next, you need to register the module in the catalog of our Bootstrapper class, slightly changing the GetModuleCatalog method:

1. protected override IModuleCatalog GetModuleCatalog ()
2. {
3. ModuleCatalog catalog = new ModuleCatalog ()
4. .AddModule ( typeof (HelloWorldModule.HelloWorldModule));
5. return catalog;
6. }

* This source code was highlighted with Source Code Highlighter .

3. Add a View

Create a Views daddy in our HelloWorldModule project and add a Silverlight User Control called HelloWorldView, which will be our view. Let's tweak HelloWorldView.xaml a bit:

1. < UserControl x: Class = "HelloWorldModule.Views.HelloWorldView"
2. xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3. xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" >
4. < Grid x: Name = "LayoutRoot" Background = "White" >
5. < TextBlock Text = "Hello World" Foreground = "Green" HorizontalAlignment = "Center" VerticalAlignment = "Center" FontFamily = "Calibri" FontSize = "24" FontWeight = "Bold" > </ TextBlock >
6. </ Grid >
7. </ UserControl >

* This source code was highlighted with Source Code Highlighter .

The Region Manager is a service for unrelated matching (only by specifying the names) of the view and region.

Add it to the class constructor of our HelloWorldModule module via dependency injection and save it in the regionManager field:

1. public HelloWorldModule (IRegionManager regionManager)
2. {
3. this .regionManager = regionManager;
4. }

* This source code was highlighted with Source Code Highlighter .

We will also register the presentation in the region :

1. public void Initialize ()
2. {
3. regionManager.RegisterViewWithRegion ( "MainRegion" , typeof (Views.HelloWorldView));
4. }

* This source code was highlighted with Source Code Highlighter .

Well, almost everything. Now you can run our application:

Finally

So, in this article, you learned the basics of what is contained in the Composite Application Guidance, as well as learn how to create composite Silverlight applications based on the Composite Application Library (created a loadable module (Module), as well as the view (View) that is displayed in the console). (Shell)). All as promised.

Sources

1. Before you was a slightly free and incomplete translation of an article from the Patterns & Practices “Composite Application Guidance for WPF and Silverlight - February 2009”
   
   
   Silverlight Hands-On Lab: Getting Started with the Composite Application Library can be found at http://msdn.microsoft.com/en-us/library/dd458947(printer).aspx
2. Download the manual and sorts from http://www.codeplex.com/CompositeWPF/