Develop Business Apps with Silverlight 3

Create a scalable, n-tier-based Silverlight 3 line of business application using the .NET RIA Services SDK from Microsoft without writing much code

Thursday, September 03, 2009

Print

Comment

Email

Digg

Del.icio.us

Reddit

Twitter

Last month, we looked at how you can create a business application using Silverlight 3 and a WCF service to talk to and from a database hosted on the server. This method is quite okay when creating a simple business application that needs to talk to the database to retrieve or modify the data in it. However, real world business applications would require to scale up much higher and this is where an n-tier scalable architecture comes in handy. The n-tier architecture allows you to put different parts of the system on different pieces of hardware to be able to quickly scale up to meet business requirements. You can quite easily create a Silverlight 3 business application using the .NET RIA Services SDK from Microsoft.

To create an n-tier Silverlight 3 application, you need to have the .NET RIA Services SDK downloaded and installed alongside the Silverlight 3 SDK. Once this is done, open VS2008 or VWD2008 and create a new Silverlight project. When the dialog box to create a Web project comes up, you will see a new option saying 'Enable .NET RIA Services'. Turn this on to get the
new features for scaling up your application.

Starting with .NET RIA Services
When the project comes in, it will look exactly like a normal Silverlight 3 project. Let's now create a service layer that will allow the Silverlight application in the browser to communicate with the server. First you create a new LINQ to SQL class that connects to the tables in the database you wish to work with. Here, I'm using the standard Northwind database and the Products, Suppliers & Categories table. Compile the Web project once to build the DataContext for the LINQ and then add a new item of the type Domain Service Class. When you create the class, you will be presented with a configuration dialog. Make sure you enable client access for all the entities. Also check the add, edit and delete features turn on for each entity. Finally, also turn on the metadata generation option (we'll use this a little later). This adds a new class (and a metadata class) that exposes the entities.

Open up the domain service class that you just created. You will see that the class has four methods for each entity that you have selected in the previous step – Get, Insert, Update and Delete. The last 3 are available only if you choose to enable data editing in the dialog box. Here, we'll go ahead and use these methods itself. However, in most real world cases, you would want to modify or add new methods for different scenarios. We will do a minor modification to the GetProducts to see the effect. Simply change the line to read:

return this.Context.Products.OrderBy(e => e.ProductName);

Turn on the option ( as shown above) to enable RIA Services when creating a Silverlight project.	When creating a DomainService class you must enable the entities, their editing and metadata generation.

This will ensure that the list of products is always returned sorted by the name. Now go to the Silverlight project and open the MainPage.xaml file. Drop in a DataGrid control on the page and configure it like this: <data:DataGrid x:Name="dgData"></data:DataGrid>. Open the code-behind file and add the following, using statements as well as the code that comes next:

Using statements:

using SLRIA.Web;using System.Windows.Ria.Linq;

Main Code:
NWDomainContext nw = new NWDomainContext();
public MainPage(){ InitializeComponent(); dgData.ItemsSource = nw.Products; nw.Load(nw.GetProductsQuery());}

Run the page to see the data in the Products table being displayed in the Silverlight DataGrid control. Note that you can sort (on multiple columns using the Shift key), re-order and resize columns without requiring any changes.

Displaying data from related tables
Now, let's make some changes to the code to not only display the products, but also the name of the supplier (from the Suppliers table) and category (from the Categories table). For this, first open the metadata file in the Web project and add a new directive '[Include]' above the members that point to the respective objects like this:

[Include]public Category Category;...[Include]public Supplier Supplier;

Now open the main domain service class and change the GetProducts method as follows:

public IQueryable<Product> GetProducts(){ DataLoadOptions loadOpts = new DataLoadOptions(); loadOpts.LoadWith<Product>(p => p.Category); loadOpts.LoadWith<Product>(p => p.Supplier); this.Context.LoadOptions = loadOpts; return this.Context.Products;}

The LoadWith statements return the category and supplier data, along with the product data to the client and can be accessed in the Silverlight XAML using standard .NET dot-notations to show the name of the product, category and supplier company in the DataGrid like this:

<data:DataGrid x:Name="dgData" AutoGenerateColumns="False"> <data:DataGrid.Columns> <data:DataGridTextColumn Header="Product Name" Binding="{Binding ProductName}" /> <data:DataGridTextColumn Header="Supplier" Binding="{Binding Supplier.CompanyName}" /> <data:DataGridTextColumn Header="Category" Binding="{Binding Category.CategoryName}" /> ... </data:DataGrid.Columns></data:DataGrid>

The grid is now enhanced with an auto-type filter and a pager.	A simple Silverlight-based application that shows data from 3 related tables.

Using the DomainDataSource Control
The great part about RIA services is that you don't need to write much backend code to get a number of cool features – all that you need to do is adding some controls to the XAML and configuring them. The main such control is the DomainDataSource control that you add to the page. First, remove all the code that was added to the MainPage.xaml.cs file above. Next, in the toolbox of VS/VWD add a new item and select the DomainDataSource control, and then once, it appears in the toolbox, drag and drop it above the DataGrid control. Also add the following namespaces to the top of the page:

xmlns:ds="clr-namespace:SLRIA.Web"xmlns:riaData="clr-namespace:System.Windows.Data;assembly=System.Windows.Ria.Controls"

Change the DomainDataSource control you added earlier to look like this:

<riaControls:DomainDataSource x:Name="prodDataSource" AutoLoad="True" QueryName="GetProducts"> <riaControls:DomainDataSource.DomainContext> <ds:NWDomainContext /> </riaControls:DomainDataSource.DomainContext></riaControls:DomainDataSource>

And add the ItemSource attribute to the DataGrid to point to this data source:

<data:DataGrid x:Name="dgData" AutoGenerateColumns="False" ItemsSource="{Binding Data, ElementName=prodDataSource}">

Running the page now will display same data as before, but without any backend code. The DomainDataSource control also allows you to add filters, sorting and paging capabilities into it. For this, first add a new TextBox control named 'txtNameFilter' before the grid and then add the following inside DomainDataSource:

<riaControls:DomainDataSource.FilterDescriptors> <riaData:FilterDescriptorCollection LogicalOperator="And"> <riaData:FilterDescriptor PropertyPath="ProductName" Operator="Contains"> <riaData:ControlParameter ControlName="txtNameFilter" PropertyName="Text" RefreshEventName="TextChanged" /> </riaData:FilterDescriptor> </riaData:FilterDescriptorCollection></riaControls:DomainDataSource.FilterDescriptors>

You can also add a DataPager control below the grid to add paging capabilities like this:

<data:DataPager PageSize="10" Source="{Binding Data, ElementName=prodDataSource}" />

Running the application now will allow you to see the data from different tables in the grid. The records shown are only 10 per page and you can use the pager at the bottom of the grid to navigate the records.

Finally, you can even filter the records by typing in a few characters of the name in the text box and as you type, the rows will be automatically filtered.
As you can see, the RIA Services allows you to perform a large number of business / data related work very easily. Next month, we'll take a look at how you can add, modify and delete data from this table as easily as this.

Page(s)   1