This article describes the implementation of PRISM framework in Silverlight Application with small sample code. Primary we will use this PRISM framework while we are going for composite application. Let’s see the various scenarios where we could choose composite application.

Various Scenarios for implementing composite application

• Building a composite application that presents information from multiple sources through an integrated user interface.
• When we are developing, testing, and deploying modules independently of the other modules.
• Whenever we able to change the application quickly and safely to meet emergent business requirements.
• Application is being developed by multiple collaborating teams.
• Application targets both WPF and Silverlight, and we want to share as much code as possible between the two platforms.

Why we need to use PRISM framework

It helps you to build enterprise-level Windows Presentation Foundation (WPF) and Silverlight client applications. It will help you design and build enterprise-level composite WPF client applications-composite applications use loosely coupled, independently evolvable pieces that work together in the overall application.

M-V-VM Pattern

In the below sample we used Model-View-ViewModel design pattern while we implementing PRISM Framework. This pattern is used only for XAML based technology (WPF, Silverlight). We will small intro of this pattern before moving into actual implementation of PRISM sample.

· View – it simply represents the UI. In this pattern View does not know the model and of course it is just like dump view to show whatever ViewModel is setting in the data context.

· ViewModel – ViewModel is the intermediate layer between View and Model. ViewModel simply shapes the data and bind into View. It actually serves the data to view whatever that view is needed.

· Model – As you know, model is nothing but your service or data access layer which communicates to your database.

· If we want make more decoupled applications, we could implement MVP design pattern in between ViewModel and Model. Now we will implement PRISM samples by having all the above concepts in our mind.

Implementation of PRISM framework

We need to download Composite Application Guidance for WPF and Silverlight, from this link, we will get five assemblies and we need to add these dll’s into our project. First we need to create View and ViewModel for our each module. In this sample, we took one module which is going to show all employee information in grid.

Step : 1 – Creating View, ViewModel for each module

After creating the new Silverlight project,We will get two projects in the solution, one is silverlight project and another one is web application project to host that silverlight application. Just renamed that Silverlight project as Msdngeeks.PrismSamples.Shell. We will use this project later. Now We have to create new Silverlight class library and named as Msdngeeks.PrismSamples.Modules. Now, We have to add one view for showing all the employee information, so we added one usercontrol(xaml file) into this project and two class files named as EmployeeModule.cs and ShowAllEmployeesViewModel.cs.

1. ShowAllEmployeesView.xaml (View) looks as below after adding one datagrid in the usercontrol.

Xaml code:

<UserControl x:Class=”Msdngeeks.PrismSamples.Modules.ShowAllEmployeesView”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

Width=”400″ Height=”300″>

<Grid x:Name=”LayoutRoot” Background=”White”>

<data:DataGrid x:Name=”SearchResultGrid” Grid.Row=”1″ Background=”#FF8BAFE6″ IsReadOnly=”True” BorderThickness=”1″ ItemsSource=”{Binding Employees}” BorderBrush=”Black”>

</data:DataGrid>

</Grid>

</UserControl>

ShowAllEmployeesView.xaml.cs

namespace Msdngeeks.PrismSamples.Modules

{

public partial class ShowAllEmployeesView : UserControl

{

public ShowAllEmployeesView(ShowAllEmployeesViewModel ViewModel)

{

InitializeComponent();

this.DataContext = ViewModel;

}

}

}

In above cs file, ViewModel class object is passed as parameter to set the datacontext in the view. So for we have created View for showing employee information, now we are going to create one ViewModel which shapes the data for the view.

2. ShowAllEmployeesViewModel.cs (ViewModel) looks as below code,

namespace Msdngeeks.PrismSamples.Modules

{

public class ShowAllEmployeesViewModel

{

IEmployeeService employeeService;

public ShowAllEmployeesViewModel(IEmployeeService employeeService)

{

Employees = new ObservableCollection<EmployeeDTO>();

this.employeeService = employeeService;

this.employeeService.ShowEmployee(OnSearchComplete);

}

private void OnSearchComplete(IEnumerable<EmployeeDTO> newEmployees)

{

this.Employees.Clear();

foreach (var employee in newEmployees)

{

this.Employees.Add(employee);

}

}

public ObservableCollection<EmployeeDTO> Employees

{

get;

private set;

}

}

}

In the above code, we are adding each employee information into observable collection Employees property in the OnSearchComplete method. We are invoking the service method ShowEmployee() in the constructor of view model class to get all employee information. In the above code, am using EmployeeDTO class which is used as contract class. Since we are using WCF REST Service, we are using this common contract class for both client and service.

Our contract class is in another project named as Msdngeeks.PrismSamples.Contracts and its having one contract class named as EmployeeDTO.cs. The code for this contract class is as follows,

namespace Msdngeeks.PrismSamples.Contracts

{

public class EmployeeDTO

{

public int EmpId { get; set; }

public string EmpName { get; set; }

public DateTime DOB { get; set; }

public string Designation { get; set; }

}

}

3. EmployeeModule.cs (Module Class) Each module should have separate module class which helps to register the module in the container using unity framework. The code looks as below,

namespace Msdngeeks.PrismSamples.Modules

{

public class EmployeeModule :IModule

{

private IRegionManager regionManager;

private IUnityContainer container;

public EmployeeModule(IRegionManager regionManager, IUnityContainer container)

{

this.regionManager = regionManager;

this.container = container;

}

#region IModule Members

public void Initialize()

{

this.container.RegisterType<IEmployeeService, EmployeeService>(new ContainerControlledLifetimeManager());

this.regionManager.RegisterViewWithRegion(“ResultsRegion”, typeof(ShowAllEmployeesView));

}

#endregion

}

}

In the above code, we are inheriting IModule interface from the composite framework which we added earlier as reference (download dll). In the initialize method, we are registering the type of our service class to the container and also we are registering the region manager with the type of our view class name ShowAllEmployeesView.

Step 2: Creating Model using Entity Framework and REST Service

Now we need to create one model, So, We have taken Entity Framework as model for this sample. We have created one WCF REST Service to get all the employee information from db and this service is hosted in IIS Web server. These things are done in separate solution file which is having entity framework and WCF Service as well as the common contract class in separate projects.

Entity Framework Model is as follows,

Our table Employee_Profile has four fields as above. Now we need service to get all the employee information. Our WCF REST Service is as follows,

WCF Service Interface Code:

namespace Msdngeeks.PrismSamples.WCFService

{

[ServiceContract]

public interface IRestService

{

[OperationContract(Name = "GetEmployee")]

[WebGet(UriTemplate = "/",ResponseFormat=WebMessageFormat.Json)]

List<EmployeeDTO> GetEmployee();

}

}

Service Class Code:

namespace Msdngeeks.PrismSamples.WCFService

{

public class Service1 : IRestService

{

#region IRestService Members

public List<EmployeeDTO> GetEmployee()

{

EmployeeEntities dataContext = new EmployeeEntities();

var emp = (from p in dataContext.Employee_Profile

select p);

List<EmployeeDTO> emplist = emp.ToList().ConvertAll(new Converter<Employee_Profile, EmployeeDTO>(Converter.ConvertEmployeeToEmployeeDTO));

return emplist;

}

#endregion

}

}

We used one converter class to convert our employee class type to our contract class EmployeeDTO Type. Converter class code is as follows,

Converter.cs

namespace Msdngeeks.PrismSamples.WCFService

{

public class Converter

{

public static EmployeeDTO ConvertEmployeeToEmployeeDTO(Employee_Profile value)

{

EmployeeDTO emp = new EmployeeDTO();

emp.EmpId = value.EmpId;

emp.EmpName = value.EmpName;

emp.DOB = value.DOB;

emp.Designation = value.Designation;

return emp;

}

}

}

These are all the service side code and this service is hosted in IIS Web Server. I think explaining the above code is out of the scope for this article. Just I gave all the code which I used to retrieve all the employee information using entity framework and WCF.

Now we will see how to call this service in our employee service class.

1. We need to create new silverlight class library project and named as Msdngeeks.PrismSamples.Services.
2. Then add one interface in the name of IEmployeeService.cs and one class in the name of EmployeeService.cs for the service.

IEmployeeService.cs is as follows,

namespace Msdngeeks.PrismSamples.Services

{

public interface IEmployeeService

{

void ShowEmployee(Action<IEnumerable<EmployeeDTO>> SearchCompleteCallback);

}

}

In the above code, we created one interface which is having one method declaration ShowEmployee.

EmployeeService.cs class is as follows,

namespace Msdngeeks.PrismSamples.Services

{

public class EmployeeService:IEmployeeService

{

List<EmployeeDTO> res;

#region IEmployeeService Members

public void ShowEmployee(Action<IEnumerable<Msdngeeks.PrismSamples.Contracts.EmployeeDTO>> SearchCompleteCallback)

{

string uri = “http://localhost/PRISMSampleService/RestService.svc/”;

WebClient wc = new WebClient();

wc.DownloadStringCompleted += (sender, e) => SearchCompleteCallback(GetEmployees(e));

wc.DownloadStringAsync(new Uri(uri));

}

#endregion

private IEnumerable<EmployeeDTO> GetEmployees(DownloadStringCompletedEventArgs e)

{

string xml = e.Result;

DataContractJsonSerializer json = new DataContractJsonSerializer(typeof(List<EmployeeDTO>));

MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(xml));

res = (List<EmployeeDTO>)json.ReadObject(ms);

return res;

}

}

}

In the above code, we calling the WCF REST Service using the above uri in ShowEmployee mthod. When the download string completed event is triggered then it comes to GetEmployees method. In this method we have to de serialize the data which is coming as Json serializable data from the service. Finally it returns the list of employee information to view model.

Step 3: Creating Bootstrapper and Shell Class

So for we have created View, ViewModel, Model (Service) classes. Now we have to add one Boot strapper class in the Msdngeeks.PrismSamples.Shell project which we created earlier.

The Bootstrapper class file is as follows,

namespace Msdngeeks.PrismSamples.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(EmployeeModule));

return catalog;

}

}

}

In the above code, we inherited UnityBootstrapper class from the composite framework which added reference earlier into this project. In the CreateShell method, we are setting the shell as current application and return the shell. In the GetModuleCatelog method, we need to all the module which we are having in the project. Currently we are having only one module, so we added one employee module into catalog.

In Shell.xaml class looks as below after adding regions and tab controls to display all the views which we created in the module project,

<UserControl x:Class=”Msdngeeks.PrismSamples.Shell.Shell”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:controls=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

xmlns:Regions=”clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation”

Width=”400″ Height=”300″>

<Grid x:Name=”LayoutRoot” Background=”Blue”>

<Grid.RowDefinitions>

<RowDefinition Height=”auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

<ContentControl Regions:RegionManager.RegionName=”EmployeeSearchRegion” Grid.Row=”0″ Margin=”2″/>

<controls:TabControl Grid.Row=”1″ Margin=”3″ Regions:RegionManager.RegionName=”ResultsRegion”></controls:TabControl>

</Grid>

</UserControl>

In the above code, highlighted region name and the region name which is highlighted in the module class, say EmployeeModul.cs file in the Module project should be same.

Last but not least, we need to add bootstrapper class in the Application_Statup method in the app.xaml.cs file, it looks as below after adding the bootstrapper class,

private void Application_Startup(object sender, StartupEventArgs e)

{

new Bootstrapper().Run();

}

Note: Add Microsoft Composite DLL’s in all the projects which we created except contracts project.

Now we can press f5 to run the application. We will see event handling in the future article using PRISM Framework. Click here to download Source Code

Conclusion

In this article, I have discussed about the overview of PRISM framework with small sample. We will see remaining features of PRISM framework in the future articles.

]]> http://mubarag.wordpress.com/2009/12/16/implementing-prism-framework-in-silverlight-app-2/feed/ 0 mubarag http://mubarag.wordpress.com/2009/12/16/hello-world/ http://mubarag.wordpress.com/2009/12/16/hello-world/#comments Wed, 16 Dec 2009 14:01:04 +0000 mubaragali ]]> Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!