Introduction to Silverlight and WCF RIA – Setting the Silverlight Site

After exploring the WCF RIA Services in the last few weeks I will try to explain and demonstrate few of the main Issues and feature addressed by the WCF RIA Services and the connection to Silverlight application.
To Fully understand the features lets start by creating a “Silverlight Business Application” :
Open a new project with the “Silverlight Business Application” template :

As you can see we used a very “rich” template that creates 2 projects :
The blue project is the Silverlight Application (or the Client-Side Application). As you can see the folder structure of the client application is made to create and support an MVC or MVVM pattern.
The Red Project is the Web site (or the Server-Side Application). Take notice of 2 important folders “Models” and “Services”.

The Client (Silverlight) Application don’t come empty and creates a default GUI :

Lets Add a new tab called Products to the Home and About Tabs.
We need to add 2 things :
The first is in the MainPage.XAML found in the Silverlight application add the following XAML Snippet inside the StackPanel called LinksStackPanel

<Rectangle x:Name="Divider2" 
     Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link3" 
     Style="{StaticResource LinkStyle}" 
     Content="{Binding Path=ApplicationStrings.ProductsTitle, 
     Source={StaticResource ResourceWrapper}}"/>

See we are refering the Content of the hyperlink button to ApplicationStrings.ProductsTitle, and we need to take care of that also. so the second thing we need to add is a resource in the ApplicationStrings.resx

Add a resource like this :

Now we have a LinkButton that says “Products” but does nothing (we will fix it soon.
Lets add a Silverlight view to display list of products.

In our new page replace the <grid> element with this code :

<ScrollViewer x:Name="PageScrollViewer" 
      Style="{StaticResource PageScrollViewerStyle}">
   <StackPanel Style="{StaticResource ContentStackPanelStyle}">
         <TextBlock Text="List Of Products" 
             Style="{StaticResource HeaderTextStyle}"/>
   </StackPanel>
</ScrollViewer>

Now we need to add 2 more properties to the LinkButton we created earlier :

NavigateUri="/Products/List"
TargetName="ContentFrame"

We Can now run the Application.
Pressing the “Products” Button will result in displaying our Page with the title.
In this post we will create a Model (using EF4) and expose the data via Services to be displayed in our Silverlight page.

Creating the Model

Lets add the Data to our server application.

In the wizard choose “Generate from database” and connect it to your copy of Northwind DB. Choose the following tables :

You should see your Entity Data Model Like this:

Now build the solution (we need the Models for our next step).

Adding the Service

Lets add the service to our Server-Application:
 
Make sure you select the “Enable client access” and “Generate associated classes for metadata” :

Now this is where the magic happens. we added 2 files to the Service folder:

Open ProductsService.cs and check the “Auto-Generated Code”. By selecting “Enable editing” The code will contain methods for Insert, Update and Delete as well as the default Query.
Lets change the GetProducts() method to return an ordered list of products :

public IQueryable<Product> GetProducts()
{
  return this.ObjectContext.Products.OrderBy(P => P.ProductID);
}

Lets Build the Solution. Once again, Magic happens:

------ Build started: Project: SilverlightAndRIA_LOB, Configuration: Debug Any CPU ------
  SilverlightAndRIA_LOB -> C:\Users\Gal\Projects\Blog\RIA Services\SilverlightAndRIA_LOB\SilverlightAndRIA_LOB\Bin\Debug\SilverlightAndRIA_LOB.dll
  Begin application manifest generation
  No changes detected. Application manifest file is up to date
  Begin Xap packaging
  Creating file SilverlightAndRIA_LOB.xap
  Adding SilverlightAndRIA_LOB.dll
  Adding System.ComponentModel.DataAnnotations.dll
  Adding System.ServiceModel.DomainServices.Client.dll
  Adding System.ServiceModel.DomainServices.Client.Web.dll
  Adding System.ServiceModel.Web.Extensions.dll
  Adding System.Windows.Controls.Data.DataForm.Toolkit.dll
  Adding System.Windows.Controls.Data.Input.dll
  Adding System.Windows.Controls.dll
  Adding System.Windows.Controls.Navigation.dll
  Adding System.Windows.Data.dll
  Adding AppManifest.xaml
  Xap packaging completed successfully
  Creating test page
  Test page created successfully
========== Build: 2 succeeded or up-to-date, 0 failed, 0 skipped ==========

The build process discover that we are using Domain service and creates in the client the “ProductsContext” that will connect to the Service and adds references to several dll’s we need to make a richer Silverlight experience.

Creating The View (Displaying the Data)

Go to List.xaml in our Views/Products folder. Change the code to this:

<StackPanel Style="{StaticResource ContentStackPanelStyle}">
    <TextBlock Text="List Of Products" 
        Style="{StaticResource HeaderTextStyle}"/>
     <sdk:DataGrid AutoGenerateColumns="True"
        IsReadOnly="True"
        Name="dg1"
        MinHeight="200"/>
</StackPanel>

Note: Dragging the DataGrid will register the sdk prefix.
Now lets go to the code behind to connect the data to the grid.
Add the following using statements:

using SilverlightAndRIA_LOB.Web.Services;
using System.ServiceModel.DomainServices.Client;

Register to the Loaded event of the page and add the following code:

ProductsContext _pContext;

private void Page_Loaded(object sender, RoutedEventArgs e)
{
  _pContext = new ProductsContext();
  this.dg1.ItemsSource = _pContext.Products;
  _pContext.Load(_pContext.GetProductsQuery());
}

Run the application and navigate to our List Page by clicking the Products button.

That it for this post. To continue and manipulate the data and the views see my post here.