Using Prism with Silverlight 4

Posted by: Mahesh Sabnis , on 12/23/2010, in Category Silverlight 2, 3, 4 and 5
Views: 40662
Abstract: In the article, we will see how to use Prism in Silverlight by creating a sample application. Prism is a guidance designed and developed by Microsoft which helps in designing and building WPF and Silverlight client applications, which are easy and flexible to maintain.

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:

  • Microsoft.Practices.Prism.dll 
  • Microsoft.Practices.Prism.UnityExtensions.dll
  • Microsoft.Practices.ServiceLocation.dll
  • Microsoft.Practices.Unity.Silverlight.dll

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:

Prism Shell 

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:

Prism Silverlight Model 

The above is the data class. This is used to store Product info.

Step 4: In the Controllers folder, add the following class:

Prism Silverlight Controller 

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:

Silverlight Product ListView 

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:

Prism Silverlight IModule 

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):

Prism Silverlight BootStrapper Class 

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:

Silverlight App Xaml 

Step 4: Build the entire solution.

Run the application, the following result will be displayed:

Silverlight Prism App 

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

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Jones on Thursday, December 23, 2010 6:34 AM
A nice article with a great stuff of information, I really like that. Thanks for sharing this.
Comment posted by Mahesh Sabnis on Thursday, December 23, 2010 10:46 PM
Hi Jones,

  Thanks a lot. There is more yet to come.
Regards
Mahesh Sabnis
Comment posted by Praveen babu on Friday, December 24, 2010 4:28 AM
Good Intro to Prism. Thanks for this
Comment posted by Mahesh Sabnis on Friday, December 24, 2010 10:53 PM
Hi Praveen babu,
Thanks a lot.
Regards
Mahesh Sabnis
Comment posted by Daryn on Monday, October 10, 2011 9:58 AM
Nice article, been looking for a good example that actually works!

I had a small issue as VS could not find the datagrid, it was fixed by following this http://procbits.com/2011/03/03/datagrid-not-found-in-silverlight-4/

Thanks for the post!
Comment posted by dj on Monday, October 10, 2011 7:10 PM
Hi Mahesh,
This article was superb. We have been awarded a project in WPF. At this moment it should be just a WPF application, but after going through your document, it seems that we should think in a broader sense and make it compatible with silver light. Can you provide me with your private email so that i can talk to you personally. I wish if you can be the Analyst for this project.

D
Comment posted by JasRaj Bishnoi on Sunday, January 15, 2012 12:57 PM
Nice intro of Prism, thanks so many
Comment posted by vimal on Tuesday, July 10, 2012 1:37 AM
nice work sir. can you plz explain this same example using wpf. it may helps lot....
Comment posted by Laurent Trompette on Thursday, October 11, 2012 2:53 PM
Thanks a lot, another one please !!! Step by Step ! I love it ! ANd very thanks for your efforts.
Comment posted by Rakesh Arora on Monday, March 4, 2013 3:30 AM
Any next verion document of this article?
Comment posted by Valery Karaychev on Tuesday, March 26, 2013 9:43 AM
Excellent work!!!
You could prompt how to use SignalR with this example?
Comment posted by Mangesh Joshi on Monday, November 25, 2013 9:13 PM
Simple and clear.Please let us know where to find your articles if there is any apart from the .netcurry...

Thanks again..:)

Regards,
Mangesh

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel