Silverlight 4 and Prism: Communication between Two Views of Different Modules using IEventAggregator

Posted by: Mahesh Sabnis , on 5/4/2011, in Category Silverlight 2, 3, 4 and 5
Views: 42699
Abstract: In this article, we will see how to use the Prism Event Aggregator mechanism in Silverlight applications to communicate between two views of different modules

Now-a-days, I see many Silverlight 4 developers using Prism 4 UI patterns for enterprise application development. Prism 4 is a nice framework for developing applications based on a modular approach. I have already published a series of articles on Prism 4 on Prism Basics, Modularity, Events, Commands and Custom Behavior etc. One of the nice features of Prism 4 is that you can very easily build End-to-End applications using either WPF or Silverlight.

Most of the enterprise applications are built by dividing it into separate modules which represents the core part of the application - User Interface (View), View-Model, and a Model. The requirement behind such segregation is that different teams can works separately on the modules and the most important part is that, the testing and maintenance of the application become easier. Prism 4 is much more suitable for such types of scenarios. Now in such cases, if two different views of two separate modules, created by two separate developers need to communicate with each other, we need to use the EventAggregator mechanism provided by the Prism 4. In a previous article, Silverlight and Prism: Communication between two Views of the same Module using IEventAggregator, I have already explained the role of EventAggregator for communication between two views of the ‘same’ module. In this article I am going to move a step ahead, and use the EventAggregator mechanism between two Separate modules.

The scenario explained in this article is that there are two modules - sender and receiver. The sender module will be inserting the employee information using its View and the receiver module will then display this data, using its View containing a DataGrid. The sender module will inject the View, based upon the information received from the sender module using Event and Payload (the parameter passed along with the event published by the sender module).

The architecture of the application is as shown below:

prism-event-aggregator

 

Task 1: Creating the EventAggregator layer

Step 1: Open VS2010 and create a blank solution. Name it as ‘Prism4_SL4_Event_Aggregation’. To this solution, add a Silverlight class library project and name it as ‘SL4_Common_Event_Class’. In this library, add a reference to the ‘Microsoft.Practices.Prism’ library. This library defines the ‘Events’ namespace which we will be using for defining the CompositePresentationEvent<T>. Rename ‘Class1.cs’ to ‘EmployeeAddedEvent.cs’ and write the following code in it:

Prism Employee Added Event

The ‘EmployeeAddedEvent’ is the CompositePresentationEvent<T> class. This class is used to establish Publish/Subscribe relationship between modules that are referring this class. The Employee class represents the Payload - this means the type of message passed to the Subscriber by the Sender.

Step 2: Build the library and make sure that it is free of errors.

 

Task 2: Adding the Sender Module

Step 1: In the same solution, add a new Silverlight class library project and name it as ‘SL4_ModuleSender’. In this project, add the following references to Prism 4 framework:

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

Also add a reference to the Event class library that we created in Task 1.

Step 2: In the project, add a new Interface and name it as ‘IEmployeeView’.

IEmployeeView

The above interface will be implemented by the View (UI) class and will handle an event when a new Employee is added. This action will publish the event using the Employee object.

Step 3: In this project, add a new class and name it as ‘EmployeeAddOperationPresenter.cs’. This class defines an ‘IEventAggregator’ which will be published by the Sender module. This class acts as a controller for the View of the sender module. This controller publishes the event so that subscriber can subscribe to it. The code for the class is as shown below:

silverlight-prism-module-sender

The class shown above defines the ‘EmployeeAddedView’ property of type ‘IEmployeeView’. This property subscribes to the ‘AddEmployee’ event and then publishes the event, which sends the Employee object as payload to the Sender.

Step 4: In the project, add a new Silverlight User Control and name it as ‘NewEmployeeView.xaml’. Write the following XAML code in it:

prsim-newemployee-view

In the code behind of the xaml, write the following code:

prsim-newemployee-view-code

The above code is very important and it does the following:

  • The class implements ‘IEmployeeView’ interface and implements content of the interface.
  • The zero argument constructor subscribes to the ‘Click’ event of the button present on the view. This further raises the AddEmployee event for the UI object.
  • The constructor with ‘EmployeeAddOperationPresenter’ object as input parameter, activates the controller for publishing the event when the ‘Add Employee’ button in the UI is clicked.
  • The EmpAdded property accepts values entered on the UI using Textboxes and returns the Employee object.

Step 5: In the project, add a new class and name it as ‘ModuleSender’. This is the Module class that implements ‘IModule’ interface and is used to register view in the current project with the Region. The code of the class is as shown below:

prism-module-sender

Step 6: Build the project and make sure that it is free of errors

 

Task 3: Adding Module Receiver

Step 1: To the same solution, add a new Silverlight class library and name it as ‘SL4_ModuleReceiver’. In this project, add the same library that added in the Sender module project, created in Task 2. Also add the reference of the event library created in the Task 1.

Step 2: In the project, add a new interface and name it as ‘IShowEmployeeView’. This interface will be implemented by the View in the Receiver project. The method declared in this interface will be used by the module class in this project for setting the Payload value sent by the Sender project. The code is as shown below:

image

Step 3: In this project, add a new class and call it ‘ShowEmployeesView’. This class acts as a controller for the View in this project, which will be added shortly. This class initializes the EventAggregator, Container, RegionManager and SubscriptionToken. This class defines ‘Employee’ property of the type ‘Employee’ class which is the Payload parameter. This property is used to subscribe to the event when it is published. For subscribing to the published event, a method is needed which will accept the Payload message and then successfully handle the event for successful subscription. Finally after the successful subscription, the data will be displayed in the view (to be created in the next step) using View Injection. The code is as shown below:

prism-show-employeeview

Step 4: In the project, add a new Silverlight user control and name it as ‘ShowAddedEmployeesView.xaml’. Write the following XAML code in it:

prism show employees view

In the code behind of this XAML file, write the following code. The code-behind class implements ‘IShowEmployeeView’ interface and implements its method. The constructor accepts ‘ShowEmployeesView’ parameter and activates the controller which subscribes to the published event. The code is as shown below:

prism-add-employeeview-code

Step 5: In this project, add a new class and name it as ‘ModuleReceiver’. This is the module class that implements ‘IModule’ interface. This module class resolves the Employee type and ‘ShowAddedEmployeeView’ type. The code is as shown below:

silverlight-module-receiver

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

 

Task 4: Creating Silverlight application for loading Modules and Establishing Event communication

Step 1: In the same solution, add a new Silverlight Application and name it as ‘SL4_EventAggregator_Application’. In the Silverlight project, add references for Prism libraries which we have added in Task 2 and 3. Also in the same project, add references for the class libraries created in Task 2 and 3.

Step 2: Rename MainPage.xaml as ‘Shell.xaml’. Write the following Xaml in it:

prism-shell-xaml

The above XAML contains ‘ItemsControl’ as Region which will display views for Sender and receiver.

Step 3: In the Silverlight application, add a new class and name it as ‘MyBootStrapper’. The code is as shown below:

prism-bootstrapper

The above code initializes Sender and Receiver module so that they can use Event Aggregations.

Step 4: Change the code of the Application_Starpup method in App.xaml.cs as below:

image

Now Run the application and you should see the following result:

image

Enter the data in textboxes and click on the ‘Add Employee’ button. The result will be as shown below:

image

Conclusion: Event Aggregator pattern provided in Prism provides mechanism for establishing loosely coupled communication between different modules, with a simpler implementation.

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 Anil Dhiman on Wednesday, June 1, 2011 6:45 AM
Very nice article Mahesh, keep the gud work
A found a small issue in the downloaded version. Code doesn't fire event in receiver module for more than one employee

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