Welcome to the final part in this four part series on building a WPF and Silverlight application with Prism. The previous parts are
Building a Composite WPF and Silverlight Application with Prism – Part 1
Building a Composite WPF and Silverlight Application with Prism – Part 2
Building a Composite WPF and Silverlight Application with Prism – Part 3
The main focus of this tutorial will be introducing communication between modules. Thus far, we have focussed on getting the Digg module operational. In this instalment we will add a search module, and demonstrate how this separate module can interact with another in a loosely coupled fashion.
This tutorial is in both C# and Visual Basic, but when creating projects in Visual Studio, the images I may use may be C# templates for example, but you should be able to do exactly the same in Visual Basic and vica-versa. It avoids the repetition of posting two images with “Open C# Silverlight Application” and “Open Visual Basic Application”, when the Visual Studio templates are the same – bar the language. I will however, post code samples in both languages
Adding the Search Module
Add a new Silverlight class library to the solution, and call this NewsAggregator.Search and delete the default class1 added to the project
Add references to the Prism libraries (in C# right click the References node in Solution Explorer and choose “Add Reference…” )
add a SearchModule class to this project that implements IModule and implement the interface.
Visual Basic
Imports Microsoft.Practices.Composite.Modularity
Public Class SearchModule
Implements IModule
Public Sub Initialize() Implements Microsoft.Practices.Composite.Modularity.IModule.Initialize
End Sub
End Class
C#
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Practices.Composite.Modularity;
namespace NewsAggregator.Search
{
public class SearchModule : IModule
{
#region IModule Members
public void Initialize()
{
//throw new NotImplementedException();
}
#endregion
}
}
Add a reference of the NewsAggregator.Search library to the NewsAggregator.Shell and add the SearchModule to the Bootstrapper. Note that this as in the previous example is setting a direct reference to the Shell. This is to hasten the tutorials, but typically you want to add this or any other module in a loosely coupled fashion was well.
Visual Basic
Imports Microsoft.Practices.Composite.UnityExtensions
Imports Microsoft.Practices.Composite.Modularity
Imports NewsAggregator.Digg
Imports NewsAggregator.Search
Public Class Bootstrapper
Inherits UnityBootstrapper
Protected Overrides Function CreateShell() As System.Windows.DependencyObject
Dim shell As New Shell
Application.Current.RootVisual = shell
Return shell
End Function
Protected Overrides Function GetModuleCatalog() As Microsoft.Practices.Composite.Modularity.IModuleCatalog
Dim catalog As New ModuleCatalog
catalog.AddModule(GetType(DiggModule))
catalog.AddModule(GetType(SearchModule))
Return catalog
End Function
End Class
C#
using System.Windows;
using Microsoft.Practices.Composite.UnityExtensions;
using Microsoft.Practices.Composite.Modularity;
using NewsAggregator.Digg;
using NewsAggregator.Search;
namespace NewsAggregator.Shell
{
public class Bootstrapper : UnityBootstrapper
{
protected override DependencyObject CreateShell()
{
Shell shell = new Shell();
Application.Current.RootVisual = shell;
return shell;
}
protected override Microsoft.Practices.Composite.Modularity.IModuleCatalog GetModuleCatalog()
{
ModuleCatalog catalog = new ModuleCatalog();
catalog.AddModule(typeof(DiggModule));
catalog.AddModule(typeof(SearchModule));
return catalog;
}
}
}
Implementing the Search Model View View Model
Adding the Model View
Add a UserControl to the NewsAggregator.Search library and call this SearchView
In this UserControl add the following XAML
<UserControl x:Class=”NewsAggregator.Search.SearchView”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>
<UserControl.Resources>
<Style x:Key=”TitleBorder” TargetType=”Border”>
<Setter Property=”CornerRadius” Value=”10″/>
<Setter Property=”Background” Value=”#FFDEDEDE”/>
<Setter Property=”Margin” Value=”0,0,5,0″/>
<Setter Property=”Grid.Column” Value=”0″/>
</Style>
<Style x:Key=”TitleText” TargetType=”TextBlock”>
<Setter Property=”FontSize” Value=”16″/>
<Setter Property=”Foreground” Value=”#FF14517B”/>
<Setter Property=”Margin” Value=”10,3,0,0″/>
</Style>
<Style x:Key=”SearchButton” TargetType=”Button”>
<Setter Property=”Grid.Column” Value=”2″/>
</Style>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”200″/>
<ColumnDefinition Width=”100″/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Style=”{StaticResource TitleBorder}”>
<TextBlock Text=”NEWS SEARCH “ Style=”{StaticResource TitleText}” />
</Border>
<TextBox x:Name=”txtSearchTopic” Grid.Column=”1″ Padding=”1,3,1,1″ />
<Button Content=”Search” Style=”{StaticResource SearchButton}” />
</Grid>
</UserControl>
which should result in the following user interface
Adding the View Model
When you click on search, normally you would be handle this by creating an event handler for the search button, but this is not easily testable. Implementing the MVVM pattern here will help with testing.
Add a new class library and call this SearchViewModel. In this library expose an ICommand with a private “setter” so this can be set in the constructor.
Note : Silverlight does not provide an commanding infrastructure here (but WPF does) so Prism has some commanding implementations that can be used. The easiest one to use is the Delegate command because we want to fire off a message on this ViewModel. In the constructor create a new SearchCommand that is a delegate command.Be cognisant that you have to pass in the type it will take (a search string in this case) and then point it to the method (the button click)
Now that the delegate command has been written, bind this method to the button, by adding binding in the XAML (again note that the commanding available in WPF is missing, but the Practices library has an implementation so include the namespace declaration at the top)
xmlns:Commands=”clr-namespace:Microsoft.Practices.Composite.Presentation.Commands;assembly=Microsoft.Practices.Composite.Presentation”
Now add the binding to the search button
<TextBox x:Name=”txtSearchTopic” Grid.Column=”1″ Padding=”1,3,1,1″ />
<Button Content=”Search” Style=”{StaticResource SearchButton}” Commands:Click.Command=”{Binding SearchCommand}” />
The SearchCommand binding is the one in the ViewModel that takes a search string as a parameter. In the XAML above you need to somehow pass whatever is entered in the TextBox into the command that is fired when the button is search button clicked. this is easily achieved in WPF but in Silverlight you can only bind to either the DataContext or static resources. To get this to work add a property called Title in the SearchViewModel, add and implement INotifyPropertyChanged as follows
Visual Basic
Imports Microsoft.Practices.Composite.Presentation.Commands
Imports System.ComponentModel
Public Class SearchViewModel
Implements INotifyPropertyChanged
Private _SearchCommand As ICommand
Public Property SearchCommand() As ICommand
Get
Return _SearchCommand
End Get
Private Set(ByVal value As ICommand)
_SearchCommand = value
End Set
End Property
Public Sub New()
Me.SearchCommand = New DelegateCommand(Of String)(AddressOf OnSearch)
End Sub
Private Sub OnSearch(ByVal title As String)
End Sub
Private _Title As String
Public Property Title() As String
Get
Return Me._Title
End Get
Set(ByVal value As String)
Me._Title = value
OnPropertyChanged(“Title”)
End Set
End Property
#Region “INotifyPropertyChanged Members”
Public Event PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
#End Region
#Region “INotifyPropertyChanged Members”
Protected Sub OnPropertyChanged(ByVal propertyName As String)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
#End Region
End Class
C#
using System.Windows.Input;
using Microsoft.Practices.Composite.Presentation.Commands;
using System.ComponentModel;
namespace NewsAggregator.Search
{
public class SearchViewModel : INotifyPropertyChanged
{
public ICommand SearchCommand { get; private set; }
public SearchViewModel()
{
this.SearchCommand = new DelegateCommand<string>(OnSearch);
}
private void OnSearch(string title)
{
}
private string title;
public string Title
{
get
{
return this.title;
}
set
{
this.title = value;
OnPropertyChanged(“Title”);
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
#endregion
#region INotifyPropertyChanged Members
protected void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion
}
}
So a property has now been created that you can bind against. Add the following binding to the textbox, and ensure two way binding is used so all the changes are synchronised back into the model, and add the command parameter to the search button. the XAML in the SearchView should look like this
<UserControl x:Class=”NewsAggregator.Search.SearchView”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:Commands=”clr-namespace:Microsoft.Practices.Composite.Presentation.Commands;assembly=Microsoft.Practices.Composite.Presentation”>
<UserControl.Resources>
<Style x:Key=”TitleBorder” TargetType=”Border”>
<Setter Property=”CornerRadius” Value=”10″/>
<Setter Property=”Background” Value=”#FFDEDEDE”/>
<Setter Property=”Margin” Value=”0,0,5,0″/>
<Setter Property=”Grid.Column” Value=”0″/>
</Style>
<Style x:Key=”TitleText” TargetType=”TextBlock”>
<Setter Property=”FontSize” Value=”16″/>
<Setter Property=”Foreground” Value=”#FF14517B”/>
<Setter Property=”Margin” Value=”10,3,0,0″/>
</Style>
<Style x:Key=”SearchButton” TargetType=”Button”>
<Setter Property=”Grid.Column” Value=”2″/>
</Style>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”200″/>
<ColumnDefinition Width=”100″/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Style=”{StaticResource TitleBorder}”>
<TextBlock Text=”NEWS SEARCH “ Style=”{StaticResource TitleText}” />
</Border>
<TextBox x:Name=”txtSearchTopic” Grid.Column=”1″ Padding=”1,3,1,1″
Text=”{Binding Path=Title, Mode=TwoWay}”/>
<Button Content=”Search” Style=”{StaticResource SearchButton}”
Commands:Click.Command=”{Binding SearchCommand}”
Commands:Click.CommandParameter=”{Binding Path=Title}”/>
</Grid>
</UserControl>
So what happens now is that when text is entered in the textbox it is synchronised back to the SearchViewModel and it is also bound to the search button.
Set the data context of the SearchView to the SearchViewModel
Visual Basic
Partial Public Class SearchView
Inherits UserControl
Public Sub New(ByVal viewModel As SearchViewModel)
InitializeComponent()
Me.DataContext = viewModel
End Sub
End Class
C#
using System.Windows.Controls;
namespace NewsAggregator.Search
{
public partial class SearchView : UserControl
{
public SearchView(SearchViewModel viewModel)
{
InitializeComponent();
this.DataContext = viewModel;
}
}
}
Now ensure that this View shows up in the Region that has been created, by going to the SearchModule and using constructor injection again.
Visual Basic
Imports Microsoft.Practices.Composite.Modularity
Imports Microsoft.Practices.Composite.Regions
Public Class SearchModule
Implements IModule
Private _RegionManager As IRegionManager
Public Sub New(ByVal regionManager As IRegionManager)
Me._RegionManager = regionManager
End Sub
Public Sub Initialize() Implements Microsoft.Practices.Composite.Modularity.IModule.Initialize
Me._RegionManager.RegisterViewWithRegion(“SearchRegion”, GetType(SearchView))
End Sub
End Class
C#
using Microsoft.Practices.Composite.Modularity;
using Microsoft.Practices.Composite.Regions;
namespace NewsAggregator.Search
{
public class SearchModule : IModule
{
private IRegionManager regionManager;
public SearchModule(IRegionManager regionManager)
{
this.regionManager = regionManager;
}
#region IModule Members
public void Initialize()
{
this.regionManager.RegisterViewWithRegion(“SearchRegion”, typeof(SearchView));
}
#endregion
}
}
If you run the application you should find that the search module has been added
Decoupled Communication Mechanism
You will notice that the hard wired baseball query it still being used. To set up this decoupled communication two things are going to be required. In Prism there are quite a few ways that this can be achieved, but the EventAggregator will be used in this demo. This gives you access to a publish and subscribe mechanism where you can have multiple publishers for a topic and multiple subscribers as well.
Add a new Silverlight project (this is usually referred to as an infrastructure module) called NewsAggregator.Infrastructure and delete the default class1 that is added
add references to the Patterns & Practices libraries
add a class called SearchEvent that inherits from CompositePresentationEvent
Visual Basic
Imports Microsoft.Practices.Composite.Presentation.Events
Public Class SearchEvent
Inherits CompositePresentationEvent(Of String)
End Class
C#
using Microsoft.Practices.Composite.Presentation.Events;
namespace NewsAggregator.Infrastructure
{
public class SearchEvent : CompositePresentationEvent<string>
{
}
}
In the NewsAggregator.Search project, add a reference to the NewsAggregator.Infrastructure project
in the constructor of the SearchViewModel add an event aggregator event to the constructor, and publish the “Title” in the OnSearch method
Visual Basic
Imports Microsoft.Practices.Composite.Presentation.Commands
Imports System.ComponentModel
Imports Microsoft.Practices.Composite.Events
Imports NewsAggregator.Infrastructure
Public Class SearchViewModel
Implements INotifyPropertyChanged
Private _SearchCommand As ICommand
Public Property SearchCommand() As ICommand
Get
Return _SearchCommand
End Get
Private Set(ByVal value As ICommand)
_SearchCommand = value
End Set
End Property
Private _eventAggregator As IEventAggregator
Public Sub New(ByVal eventAggregator As IEventAggregator)
Me.SearchCommand = New DelegateCommand(Of String)(AddressOf OnSearch)
Me._eventAggregator = eventAggregator
End Sub
Private Sub OnSearch(ByVal title As String)
Me._eventAggregator.GetEvent(Of SearchEvent).Publish(title)
End Sub
Private _Title As String
Public Property Title() As String
Get
Return Me._Title
End Get
Set(ByVal value As String)
Me._Title = value
OnPropertyChanged(“Title”)
End Set
End Property
#Region “INotifyPropertyChanged Members”
Public Event PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
#End Region
#Region “INotifyPropertyChanged Members”
Protected Sub OnPropertyChanged(ByVal propertyName As String)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
#End Region
End Class
C#
using System.Windows.Input;
using Microsoft.Practices.Composite.Presentation.Commands;
using System.ComponentModel;
using Microsoft.Practices.Composite.Events;
using NewsAggregator.Infrastructure;
namespace NewsAggregator.Search
{
public class SearchViewModel : INotifyPropertyChanged
{
public ICommand SearchCommand { get; private set; }
private IEventAggregator eventAggregator;
public SearchViewModel(IEventAggregator eventAggregator)
{
this.SearchCommand = new DelegateCommand<string>(OnSearch);
this.eventAggregator = eventAggregator;
}
private void OnSearch(string title)
{
this.eventAggregator.GetEvent<SearchEvent>().Publish(Title);
}
private string title;
public string Title
{
get
{
return this.title;
}
set
{
this.title = value;
OnPropertyChanged(“Title”);
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
#endregion
#region INotifyPropertyChanged Members
protected void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion
}
}
This is the first half of setting the event aggregation, now we need to configure the listening event.
Switch over to the NewsAggregator.Digg project and add a reference to the NewsAggregator.Infrastructure (in the same way you’ve just done this to the NewsAggregator.Search above)
In the DiggSearchResultsViewModel remove the previous dummy search data, and add an event aggregator event to the constructor, and subscribe to the the OnSearchEvent which is a local event just created to process the title.
Visual Basic
Imports System.Collections.ObjectModel
Imports Microsoft.Practices.Composite.Events
Imports NewsAggregator.Infrastructure
Public Class DiggSearchResultsViewModel
Private _Stories As ObservableCollection(Of DiggStory)
Private diggService As IDiggService
Public Property Stories() As ObservableCollection(Of DiggStory)
Get
Return _Stories
End Get
Private Set(ByVal value As ObservableCollection(Of DiggStory))
_Stories = value
End Set
End Property
Public ReadOnly Property HeaderInfo() As String
Get
Return “Digg Search Results”
End Get
End Property
Public Sub New(ByVal diggService As IDiggService, ByVal eventAggregator As IEventAggregator)
Stories = New ObservableCollection(Of DiggStory)()
Me.diggService = diggService
eventAggregator.GetEvent(Of SearchEvent).Subscribe(AddressOf OnSearchEvent)
End Sub
Public Sub OnSearchEvent(ByVal title As String)
Me.diggService.BeginSearch(title, AddressOf OnSearchComplete)
End Sub
Private Sub OnSearchComplete(ByVal newStories As IEnumerable(Of DiggStory))
Me.Stories.Clear()
For Each diggStory In newStories
Me.Stories.Add(diggStory)
Next
End Sub
End Class
C#
using System.Collections.ObjectModel;
using System.Collections.Generic;
using Microsoft.Practices.Composite.Events;
using NewsAggregator.Infrastructure;
namespace NewsAggregator.Digg
{
public class DiggSearchResultsViewModel
{
private IDiggService diggService;
public DiggSearchResultsViewModel(IDiggService diggService, IEventAggregator eventAggregator)
{
Stories = new ObservableCollection<DiggStory>();
this.diggService = diggService;
eventAggregator.GetEvent<SearchEvent>().Subscribe(OnSearchEvent);
}
public void OnSearchEvent(string title)
{
this.diggService.BeginSearch(title, OnSearchComplete);
}
public string HeaderInfo
{
get { return “Digg Search Results”; }
}
private void OnSearchComplete(IEnumerable<DiggStory> newStories)
{
this.Stories.Clear();
foreach (var diggStory in newStories)
{
this.Stories.Add(diggStory);
}
}
public ObservableCollection<DiggStory> Stories
{
get;
private set;
}
}
}
Important: Notice that the OnSearchEvent is a public method. This is because Prism does not keep a strong reference to that particular event, this help prevent problems with garbage collection, so it doesn’t prevent your ViewModel being garbage collected for example if the ViewModel is no longer in use. If you do chose to make this private you will need to remember to unsubscribe whenever your ViewModel is no longer in use.
If you run the application, and enter”baseball” you should find that the application can still search base. Try entering a “football” search and you should get football results
You should now be able to develop the Twitter client in exactly the same was and add that as a module to the module catalogue in the shell and have that just work.
The complete source code for the 4 part series is available here (Download the WPF Silverlight Prism Folder)
Ira Lukhezo's blog 