Build enterprise application with WPF, WCF, Prism and Entity Framework. Tutorial 08.

Update: source code and documentation are now available on CodePlex at this address: http://prismtutorial.codeplex.com/

Today we will build the skeleton of our application using the latest version of Prism, available in this section of MSDN: Prism February 2009. One of the reasons that I didn’t write anything concrete until now is the fact that I knew that the new version of Prism was coming this month. Smile

The classic Hello World application.

As for every tutorial, is always better to start with the classic Hello World in order to understand, step by step, how Prism structures the various part of the UI.

Let’s open our VS Solution (remember that if you download the solution from my CodePlex repository the solution will contains already the entire code of each article) and let’s add a new project of type WPF application. I called Prism.Shell because this one will be our shell that will contain the bootstrapper.

Note about references.

In order to add the assemblies that I will mention in this and in the next tutorials you must download the latest version of Prism V2 and build the solutions so you will have all the assemblies you need. This is the structure of my Prism Framework:

image_thumb6

For practice I have already compiled all the required assemblies and added them to a solution folder in VS. This is what I have and what I reference in my projects:

image_thumb14

Finally, remember also that you can open each Prism component and re-compile it, add new future and suggest new capabilities to the Microsoft team. They will appreciate for sure! Smile

So … coming back to our project this is what we need in our Shell:

References:

  1. Microsoft.Composite
    This is the core of the composite framework
  2. Microsoft.Composite.Presentation
    This assembly contains the components that target Prism for WPF
  3. Microsoft.Composite.UnityExtension
    It’s a utility assembly for unity IoC container

The Shell XAML container.

Let’s add a new Windows Component from WPF template and the name will be Shell.xaml. Below the code I have added to the window in order to show 3 different regions.

1: <Window x:Class=“Shell.Shell”

2: xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”

3: xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml”

4: Title=“Hello World with Regions” Height=“500” Width=“500”>

5: <DockPanel>

6: <ItemsControl x:Name=“HeaderRegion” DockPanel.Dock=“Top” Height=“50”>

7:

8: </ItemsControl>

9: <ItemsControl x:Name=“LeftRegion” Width=“100” DockPanel.Dock=“Left”>

10:

11: </ItemsControl>

12: <ItemsControl x:Name=“MainRegion” DockPanel.Dock=“Bottom”>

13:

14: </ItemsControl>

15: </DockPanel>

16: </Window>

We have added 3 ItemsControl inside a DockPanel in order to design a simple Outlook style layout with an header, a main container and a left navigation menu.

Now we need to extend this control using the attached properties in order to use the Prism region adapters. This is the code we must include in the xaml declaration:

1: xmlns:cal=”http://www.codeplex.com/CompositeWPF”

Now we are ready to change our xaml code in this way:

1: <ItemsControl

2: x:Name=“HeaderRegion”

3: cal:RegionManager.RegionName=“HeaderRegion”

4: …

5: <ItemsControl

6: x:Name=“LeftRegion”

7: cal:RegionManager.RegionName=“LeftRegion”

8: …

9: <ItemsControl

10: x:Name=“MainRegion”

11: cal:RegionManager.RegionName=“MainRegion”

12: …

We said to Prism: “Hey when you load the Shell assign to each ItemsControl the corresponding Region using the attached property regionManager.RegionName”.

The bootstrapper.

The bootstrapper is nothing more than the entry point of our application. He is in charge to resolve and charge the modules and assign them to the corresponding view for the initial setup. So we need to create a new class in our Shell project and call it Bootstrapper.cs. This is the code we need for our initial setup:

1: protected override IModuleCatalog GetModuleCatalog() {

2: ModuleCatalog catalog = new ModuleCatalog();

3: return catalog;

4: }

This method should return an instance of the modules catalog used inside the application. What is the module catalog? The catalog contains all the modules we will use in our application. As we don’t have any module right now, this method returns an empty catalog. We will see in the future that we can load modules in the catalog also during the application execution.

1: protected override DependencyObject CreateShell() {

2: Shell shell = new Shell();

3: shell.Show();

4: return shell;

5: }

The create shell method, is only creating a new instance of the main window, called Shell and showing it to the user. Let’s say that this is the first entry point.

Now we need to modify the app.xaml in order to startup our application using the Boostrapper. First of all remove this row from the xaml code:

1: StartupUri=”Window1.xaml“>

We don’t want anymore that the application will start using this window but we want to use the boostrapper.

Now we need to modify the app.xaml.cs in this way:

1: protected override void OnStartup(StartupEventArgs e) {

2: base.OnStartup(e);

3: Bootstrapper bootstrapper = new Bootstrapper();

4: bootstrapper.Run();

5: }

As you can see, starting from now our application will request to the bootstrapper to load the first window and we won’t have any more dependency to the related main window.

You should be able to press F5 and run this part of the tutorial without any problem.

Add custom content to the regions.

Until now we wrote the code to startup our prism application but we still need to create at least 3 views, in order to load some content to the corresponding regions.

We need for this a new “module” that in VS is nothing more than a Class Library Project. We need the following references in order to be able to use WPF and the composite framework in our assembly:

image_thumb22

The first thing that every module will have is a “module class” that will implement the IModule contract from the composite framework. It’s pretty easy because this contract exposes only 1 method “void Initialize()”. The basic structure of the module class is something like this:

1: public sealed class HelloWorldModule : IModule {

2:

3: private readonly IRegionManager regionManager;

4:

5: public void Initialize() {

6:

7: }

8:

9: public HelloWorldModule(IRegionManager regionManager) {

10: this.regionManager = regionManager;

11: }

12: }

13:

So we have declared a private IRegionManager that will represent the main region manager instantiated by the bootstrapper. As soon as the bootstrapper will load it will inject the region manager inside our module. Than we have created a constructor with dependency injection, this mean that as soon as the module will be declared it will receive a specific RegionManager class. Finally we have implemented the IRegionManager Initialize() method that will be used to register the views to the corresponding regions.

Now let’s go back to the shell application. We need now to add a “project reference” to the new module we have created. After that we need to add this line of code inside the Bootstrapper class:

1: protected override IModuleCatalog GetModuleCatalog() {

2: ModuleCatalog catalog = new ModuleCatalog()

3: .AddModule(typeof(HelloWorldModule.HelloWorldModule));

4: return catalog;

5: }

We said to the boostrapper that as soon as it will load it will need to add to the module catalog a new module, our HelloWorldModule class. If we try to run the app now it will run successfully but nothing will change in the UI because we still need to create the views.

What I want to show is the power of loading different views in different regions, so for this reason I am rendering a special textblock with some fancy shadows. This is the code and the final result:

image_thumb31

1: <Border

2: Margin=“20”

3: Padding=“10”

4: BorderThickness=“3”

5: CornerRadius=“15”

6: Background=“White”

7: BorderBrush=“SteelBlue”>

8: <Border.Effect>

9: <DropShadowEffect Color=“Gray”/>

10: </Border.Effect>

11: </Border>

12: <Border

13: Margin=“20”

14: Padding=“10”

15: BorderThickness=“3”

16: CornerRadius=“15”>

17: <TextBlock

18: Text=“A custom header.”

19: FontSize=“24”

20: TextWrapping=“Wrap”

21: Foreground=“DarkSlateBlue”

22: HorizontalAlignment=“Center”

23: VerticalAlignment=“Center”/>

24: </Border>

Now, we need to add to our module 3 views using this effect in order to have this final result in our project:

image_thumb40

Now, in the module class we need to tell to Prism where each view should be loaded in the shell region manager. The ‘declarative way’ do to that it’s pretty simple:

1: public void Initialize() {

2: regionManager

3: .RegisterViewWithRegion(“HeaderRegion“, typeof(Views.HeaderView));

4: regionManager

5: .RegisterViewWithRegion(“LeftRegion“, typeof(Views.LeftView));

6: regionManager

7: .RegisterViewWithRegion(“MainRegion“, typeof(Views.MainView));

8: }

So for each view I assign the view to a corresponding region. The region name is the one we used in the attached property of the ItemsControl in the shell view.

Now if you press F5 this will be your final result:

image_thumb43

Conclusions.

This is the ‘primordial’ way to use Prism and to load 3 different views in 3 different regions. The next time we will see how many way Prism offers to load a module and the corresponding view, dynamically.

Tags: WPF Prism Composite application