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

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.

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.

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:

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:

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:

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:

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:

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:

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:

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

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

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

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:

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:

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:

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:

Run the application, the following result will be displayed:

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:

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.

Mahesh Sabnis is a Microsoft MVP having 14 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet

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