Introduction to Prism - Composite Application Library (CAL) for WPF and Silverlight

Introduction

Prism (Composite Application Guidance for WPF and Silverlight) is designed to build applications in WPF and Silverlight that have a single code base. It helps to develop the client application in a modular fashion so that complexity of a large application can be divided in to simpler modules.

Note: Please download Composite Application Library (CAL) from http://compositewpf.codeplex.com/releases

Architecture: Following diagram shows basic architecture that I am going to explain: 

1. App.XAML:  Call BootStrapper on Application_Startup
2. BootStrapper:  This is a class file that calls Shell (Shell.XAML) and so creates catalogue of module.
3. Shell: This is like a Master Page having regions.
4. Region: It is like placeholders to register views.
5. View: This is XAML file having User Interface
6. Module: Each module can have one or more View(s) which are registered   to Region (in the Shell)     through RegionManager

Step 1: Create Silverlight Application

Create Silverlight application named "PrismSample" and rename MainPage.XAML to Shell.XAML

 

Step 2: Add CAL references to  Silverlight Application

Add following References to PrismSample project

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

Step 3: Create Bootstrapper class

In this step we creating following scenario  

• Add Bootstrapper.cs class file to PrismSample project.
• Implement UnityBootstrapper.
• Override CreateShell methods :  Set startup object as Shell.XAML.
• Override CreateModuleCatalog methods. For now leave code as it is.  

Step 4: Change App.xaml.cs

In this step we creating following scenario 

 

In the Application_Startup event call Bootstrapper class to run it.

 

Step 5: Add Silverlight Application library project named "PrismModules"

• Add Silverlight library project and name it "PrismModules"
• Create folder Views
• Add MainView.XAML and MenuView.XAML file to Views folder
• Add MainModule.cs and MenuModule.cs file to the project

Step 6: Change MenuView.XAML and MainView.XAML

In the step 6, 7, 8 we are creating following scenario

 

Add TextBlock to MenuView.XAML to display text "Menu Region". 

 

Similarly change MainView.XAML to show Textblock "Main Region".

Step 7: Change MenuModule.cs and MainModule.cs

• In the MenuModule.cs class implement IModule and Implement Initialize method of IModule
• Add property RegionManager of type IRegionManager
• Set RegionManager in the constructor
• In the Initialize method, register MenuView to MenuRegion as shown below.

Similarly follow steps for MainModule.cs

Step 8: Change Shell.XAML to add Region

• In the Shell.XAML file add ItemsControl for MenuRegion and MainRegion
• In the each ItemsControl add Attached property RegionManager.RegionName and set value to MenuRegion and MainRegion for respective ItemsControl

Step 9: Change CreateModuleCatalog method in Bootstrapper.cs

In this step we are creating following scenario

 

In the CreateModuleCatalog method, add MenuModule and MainModule to ModuleCatalog

 

Step 10: Run the application

Finally run the application to see Menu and Main region in the Shell 

 

Conclusion: In this article I have tried to explain the basic components of Prism and how they are wired to each other to create Silverlight UI.