With an increasing popularity and availability of advanced features, Silverlight is being used by many developers to create rich browser applications as well as Line-Of-Business (LOB) applications. The focus is on creating rich, flexible, easy-to-maintain application keeping in mind the separation of concerns and loose coupling.
Prism is a guidance designed and developed by Microsoft which provides a set of libraries consisting of patterns for developing composite applications using Silverlight, WPF and Windows Phone 7. These libraries help in designing and building WPF and Silverlight client applications which are easy and flexible to maintain. The current version of Prism as of this writing is Prism 4.
Note: Although Prism helps you create loosely coupled components, you should carefully evaluate the use of Prism against other alternatives like MEF and MVVM framework. Many a times, you may require a lesser complex alternative pattern for a simple application. This article has been written with the intention of introducing you to using Prism in Silverlight.
Some of the important concepts used by Prism are as follows:
Modules: These are functionality packages which can be developed and tested independently. There may be separate teams developing separate modules. Most of the functionality is defined inside the module.
Module Catalog: This is used to discover the module, so that it can be loaded either on demand or when it is available.
Shell: This is the host (a startup UI) of the application. In the shell, a module is loaded.
Views: They are the UI for a particular functionality inside the application.
Model: These are classes used to define data and application business logic.
Region: This is defined inside the View or Shell. This may be UI element for displaying other View in it based upon the application logic.
and many more…
In the article, we will designe a simple Silverlight application. We will use the basic libraries provided by Prism 4 to make use of classes, for building the application. Following are the libraries used:
You can download the latest version of Prism (Prism 4).
Creating a Silverlight Application
Step 1: Open VS2010 and create a blank solution, name it as ‘SL4_PrismApplication’. In this solution, add a new Silverlight 4.0 application and name it as ‘SL4_PrismApplication’.
Step 2: In the Silverlight project, add a new folder named ‘Library’ and add all the Prism 4 assemblies listed above, inside it. You can get it from the following installed path on your machine:
For e.g on my machine ‘C:\Prism4\Bin\Silverlight’ is the path.
Step 3: To access all Prism 4 classes, add a reference to the above libraries in the Silverlight project.
Step 4: Rename ‘MainPage.xaml’ to ‘Shell.xaml’. This file will act as a host for the application module. We will be using the ‘Shell’ for displaying the product list view for the application. In this ‘Shell’, we need to add a ‘Region’. This region will be created using ‘ItemsControl’. In this region, the view created will be loaded.
Step 5: Update the Shell.xaml as shown below:
Note that for declaring the ‘Region’, we need to add the codeplex/prism namespace in the Xaml. RegionManager is a service, which is used to maintain regions in the application.
Creating a Module (Prism)
A Module is used to define or consume the application logic, model classes and views. This module implements ‘IModule’ interface. The module class holds the reference of the ‘region’ in which the ‘view’ can be registered.
Step 1: In the solution created above, add a new Silverlight class library project. Name this as ‘SLModule’. In this project, add the reference to ‘Micrtosoft.Practices.Prism’ assembly. Rename ‘Class1.cs’ to ‘SlModuleClass.cs’.
Step 2: In this project create the following folders:
- Views: to contain all UI views.
- Model: to define data class.
- Controllers: to define business logic classes.
Step 3: In the Model class, add the following class:
The above is the data class. This is used to store Product info.
Step 4: In the Controllers folder, add the following class:
This is used to return the product list to the view.
Step 5: In the View folder add a new Silverlight usercontrol and name it as ‘ProductListView.xaml’. Design it using XAML as shown below:
The above XAML references to the ‘Controllers’ namespace so that the ‘ProductsList’ class can be instantiated. The class is further bound with the DataGrid.
Step 6: Open ‘SlModuleClass’ class and write the following code in it:
The above class implements ‘IModule’ interface and register the view in the region which we have created in the Shell. The regions are refereed using its name in Shell.xaml.
Step 7: Build the project.
Modifying the Silverlight Application for Loading Module
In this step, the module will be loaded by the Silverlight application, inside the region. This application will now write the boot-strapper class. This class will create and initialize the ‘Shell’. BootStrapper also populates the module catalog with the available modules.
Step 1: In the Silverlight application created above, add a reference of the module library ‘SLModule.dll’.
Step 2: In the application, add a new class and name it as ‘MyBootStrapperClass.cs’. Inherit this class from the ‘UnityBootstrapper’ class. This base class is one of the container type provided in Prism 4, the other is based upon Managed Extensibility Framework (MEF). Implement the class as below (note comments provided):
The above class is heart of the application implementation using Prism. This code initializes the Shell, Region and Module catalog.
Step 3: Open App.Xaml.cs and modify the code in Application Startup as below:
Step 4: Build the entire solution.
Run the application, the following result will be displayed:
Conclusion: Prism provides a mechanism for building loosely coupled and easy maintainable applications using Silverlight and WPF.
Note that the application shown in this article, is a very basic implementation of using Prism with Silverlight. There are lots of other Prism features which are not covered in this article. You can visit this link for more details. I will also keep posting new developments from my side.
The entire source code of this article can be downloaded over here