Prism 4 - Load Modules in Silverlight 4 using Prism - Multiple ways

Posted by: Mahesh Sabnis , on 1/12/2011, in Category Silverlight 2, 3, 4 and 5
Views: 36337
Abstract: Module is the most important part of a Prism 4 enabled Silverlight application. It can be registered, loaded in multiple ways, as shown in this article

Prism provides guidance, in the form of quick starts and a set of libraries consisting 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 modular, easy to build and flexible to maintain.

If you are new to Prism 4, I would strongly suggest you first read my previous article Using Prism with Silverlight 4, where I have introduced Prism and explained some important concepts in Prism that we will using in this article.

One of the most important concepts used by a Prism enabled application is a Module.

Some of the important features of a Module are:

  • They are the basic building blocks of the application.
  • They represents set of functional units and can be integrated into a larger application.
  • They can contain infrastructure services like Logging, Authentication and Authorization and also can define agents for external services e.g. WCF or other third party services.
  • They can also define View (User Interface).
  • They can be developed, tested and deployed separately by a different team in the project.

In a Prism enabled application, the Module class implements ‘IModule’ interface and helps in initializing module contents i.e. View, ViewModel, Model and Service Agents etc.

Each module passes through the following lifecycle:

  • Registration of the Modul
    • Can be added through code, in the XAML file (Silverlight), Configuration File (WPF) and in a Directory (WPF).
  • Module Discovery 
    • via the config files or can also be downloaded.
  • Loading Module
    • In case of Silverlight, it can be possible through XAP files. 
    • In case of WPF, it can be possible from the local disk.
  • Initialize Module
    • The Initialize method call from ‘IModule’ interface. 
    • The types are registered with the container. 
    • The UI (View) is registered in the Region.

Modules are contained by the container (UnityApplicationBlock) using ModuleCatalog. This class is used to contain metadata of the Modules using ModuleInfo class. This class contain information using the following:

  • Name of the Module.
  • Type of the Module.
  • Location of the Module.

In the application we will build shortly, I am going to explain the Module loading features in a module catalog using both Code and XAML file, for Silverlight application. To try these features, you must have Prism 4 installed on your machine.

Note: I am not using the Commanding featured in this article, instead the binding with UI elements is done through collections and constructors.

Creating Silverlight Application with Web project and Separate Modules as separate Silverlight Applications.

Step 1: Open VS2010 and create a blank solution name it as ‘SL4_Prism_ModuleLoadingStrategy’. In this solution, add a new Silverlight application, name it as ‘SL4_Prism_ModuleLoadingStrategy’. You will get the Silverlight project along with ‘SL4_Prism_ModuleLoadingStrategy.Web’ ASP.NET project.

Step 2: In SL4_Prism_ModuleLoadingStrategy’ projects, add reference to the following prism libraries:

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

Step 3: Rename ‘MainPage.Xaml’ to ‘Shell.xaml’, also rename MainPage by Shell in the .xaml file in the code behind etc. From the App.Xaml.cs, remove the code for Application_Startup method. In the Shell.xaml file, write the below XAML code which will define Regions, so that Modules can be loaded in it:

prism shell

The ItemsControl are used as regions here, so that modules can be loaded in it and the Views in the Module can be displayed inside the region.

Step 4: In the same solution, add two new Silverlight Applications of the name ‘DepartmentModule’ and ‘EmployeeModule’. (Note: Make sure that these applications are added in the same web project created above). From both these applications, remove MainPage.xaml file. This is because these two applications will be used as modules. Also add the reference of the following assemblies in both the projects.

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

Step 5: In the above added Silverlight Projects, add the following folders:

  • Models.
  • Services.
  • ViewModel.
  • Views.

Step 6: In the Model folder of the ‘DepartmentModule’ project, add a class file and name it as ‘DepartmentModelClasses.cs’. This will be used to define Model classes for the application:

dept model classes

Note the above class contains information and collections of Departments.

In the ‘Services’ folder, add a new class file and name it as ‘DepartmentServices.cs’. Code it as shown below:

dept services

The above code defines the service interface and its implementation with respect to the Silverlight application. Note: This can be a service agent which consumes proxy for the external WCF service or any other service.

In the ViewModel folder add a new class file, name it as ‘DepartmentViewModel.cs’ with the code below:

department view model

The above class instantiates the Service class created above and defines a public collection type which will be bind with the View (User Interface).

In the Views folder add a new Silverlight User Control, name it as ‘DepartmentsView.xaml’ with the XAML as shown below:

prism department view 

Step 7: Now you need to create a module class which will initialize our view and register it in the Regions which we have created in Shell.xaml (Step 3). The code for the module class is as below:

dept module class

The above class defines the constructor where the RegionManager will be instantiated. In this region manager, the view is registered.

Step 8: Build the above project.

Step 9: In the ‘EmployeeModule’ perform the following operations.

In Model folder, add a new class file called ‘EmployeeModelClasses.cs’ with the code shown below:

employee model class 

In the Service Folder add the class file ‘EmployeeService.cs’ with below code:

prism employee module 

In the ViewModel folder add a class file ‘EmployeeViewModel.cs’ with below code:

employee view model 

In the View Folder add the new Silverlight User Control, name it as ‘EmployeesView.xaml’ with the below code:

employees view 

Step 10: In the ‘EmployeeModule’ project add a new class file of the name ‘EmployeeModuleClass.cs’. This will define the module class as shown below:

employee module class

The above class initializes the View using Resolve<> method of the container. The container, i.e the UnityContainer is initialized through the constructor of the module, along with the region manager. This container resolves the view type from the container. The service types are also mapped with the container available in the module project.

Step 11: Build the project and make sure that it is error free.

Registering Prism Modules using Code

Step 12: In the ‘SL4_Prism_ModuleLoadingStrategy’ project, add a reference to the ‘DepartmentModule’ project. This is done as we want to register and load the module using code.

Step 13: In the ‘SL4_Prism_ModuleLoadingStrategy’, add a new class file and name it as ‘BootStrapper.cs’. The BooStrapper class will be inherited from ‘UnityBootstrapper’ class, so that the ‘Shell’ can be created and initialize. The BootStrapper class also configures Module catalog using code. The code of the class is as shown below:

Prism boot strapper

Note: The ConfigureModuleCatalog() method creates the module catalog using code. The AddModule method of the ModuleCatalog class, accepts the type of the module class you want to configure for the bootstrapper and the container. Currently I am loading ‘DepartmentModule’ using code.

Registering Prism Modules using XAML

In the ‘SL4_Prism_ModuleLoadingStrategy’ project, add a new xml file and name it as ‘ModuleCatalog.xaml’. This file will define the Module to be loaded using XAML. The XAML code is as below:

prism model catalog

The above code shows how the EmployeeModule application (.xap) is defined with its metadata i.e. the ModuleName, ModuleType etc. In the boot strapper class, the method ‘CreateModuleCatalog()’ reads the XAML file and loads the module. The code is as shown below:

create model catalog 

Run the application, the following result will be displayed:

prism silverlight app

Recommendations:

Prism enabled application must be debugged because the components are loaded in a loosely coupled fashion. So after your coding and configuration is complete, debug the application to check whether the modules are loading and initializing properly. Also make sure that the regions are getting detected by the module. E.g. If you put a break point on the Constructor of the ‘DepartmentModule’ class in ‘DepartmentModule’ project, the region information will be displayed as shown below:

prism debug module

This will also help you in detecting the flow of the application.

Conclusion:

Module is the most important part of a Prism enabled application. So it must be registered, loaded with various mechanism explained above, as per the requirement of the application.

To learn more about the different concepts in Prism, read my previous article Using Prism with Silverlight 4.

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 vs on Wednesday, January 12, 2011 2:03 PM
I dont understand so much of tam-jham just to diplay data on grid, can be easily done via PHP+jQuery+CSS
Comment posted by Mahesh Sabnis on Thursday, January 13, 2011 2:24 AM
Dear Vs,
  With respect to you. This is not the cencept of only displaying the data in datagrid but it is more than that. When the point comes for developing loosely coupled application where various different team works together, then you need to have a mechanism to integrate them and manage them flexibly so management and maintainability will take less time and cost. So to do this Prism 4 has a mechanism provided. If you see/read the article carefully you will find that both grids are present in separate Silv applications and they are managed separately but still integrated in one application. These modules are not only loaded using code but the articles explains various ways to do it. For further details you can go through decomentation for Prism 4.
Thanks
Mahesh Sabnis  
Comment posted by Dhananjay Atre on Thursday, January 20, 2011 6:40 AM
Great article!
Very nice to see Prism sample demonstrated in an easy-to-learn way.
Comment posted by Dhananjay Atre on Thursday, January 20, 2011 7:00 AM
Great article!
Very nice to see Prism sample demonstrated in an easy-to-learn way.
Comment posted by Dhananjay Atre on Thursday, January 20, 2011 7:07 AM
Great article!
Very nice to see Prism sample demonstrated in an easy-to-learn way.
Comment posted by Mahesh Sabnis on Friday, January 21, 2011 9:39 AM
Hi Dhananjay,
Thanks a lot.
Mahesh Sabnis
Comment posted by Oogle on Friday, February 4, 2011 7:38 AM
Great work, Please post an article which integrates the above stuff with a DI container like Unity.
Comment posted by Mahesh Sabnis on Friday, February 11, 2011 1:20 AM
Hi Oogle,
Thanks a lot. I am working on similar application.
Regards
MAhesh Sabnis
Comment posted by Neeraj Singh on Friday, February 25, 2011 1:34 PM
Hello Mahesh,

Can you provide me the same sample code with RIA domain sevices.

Regards,
Neeraj Singh
Comment posted by Laurent Trompette on Thursday, October 11, 2012 3:24 PM
Learning Prism becomes accessible with your articles. Thanks a lot!

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