Sunday, January 15, 2012

Silverlight business line applications

I'm using Silver light 4.0, Silverlight toolkit, Entity Framework with RIA Services for Database. I will try to discuss applying themes, working with grid with buttons, opening popup window for editing data, in the popup we will have drop down list, autocomplete, normal controls & etc.
So let’s start, setting up your project and connecting to the data with RIA Service, is easy and straight forward ( a lot of articles is out there for that).
So you need to add a function or query to your domain services and start linking it with a data grid on the silver-light UI.
First I don’t believe in real world application that you will read only from one table and display data, there must be some joins and even some times some calculations.
So first we need to add our function, so where is the best location? I don’t prefer adding it directly to the domain file, it’s better to add a new one with partial class so if you needed to make some changes it want erase your customized functions.
My domain service file name is as follow: ABC_DomainService.cs
My Added functions will go to ABC_DomainService.Custom.cs, with same name space but a partial class as follow:
namespace ABC.Web
    public partial class ABC_DomainService
Example of one:
public IQueryable<Item> GetItemsByModuleId(int ModuleId)
            return this.ObjectContext.Items
                .Where(c => c.ModuleId == ModuleId).OrderBy(c => c.ItemsId);
So some notes on the above function, to have the include working you need to update the meta data file too. Mine is “ABC_DomainService.metadata.cs”, I go to the main data time in my case its “Items” and add the [Include] tag as follow:

            public Lookup Lookup { get; set; }
            public UserResource UserResource { get; set; }

            public Nullable<int> OwnerUserId { get; set; }

 And if the type of the function is IQueryable, you will get it in Sliverlight (The client side code) as GetItemsByModuleIdQuery.
So Server side is ready let’s go to Client Side and consume it.
To display a data grid and have some data in it, I will use the DomainDataSource, put for the popup form we will do it by code. But let’s do it all, lets add paging, sorting, some query parameters and some filters too. Display info from related tables and so on.

        <sdk:DataGrid AutoGenerateColumns="False" Grid.Row="1" HorizontalAlignment="Stretch" Name="ItemsDataGrid" VerticalAlignment="Stretch"
                      HorizontalContentAlignment="Center" AlternatingRowBackground="#00D44444" Background="{x:Null}" BorderThickness="1"
             Height="Auto"         ItemsSource="{Binding Data, ElementName=domainDataSource1}"
The most important thing is the ItemsSource, its binding  to our domainDataSource called DomainDataSource1.

A pager control to be displayed under the data grid
<sdk:DataPager Height="26" Name="dataPager1" PageSize="15" Grid.Row="2"
            Source="{Binding Data, ElementName=domainDataSource1}" DisplayMode="FirstLastPreviousNextNumeric" />

That’s it, very simple paging is complete. So lets go to the domainDataService1

<riaControls:DomainDataSource Name="domainDataSource1" LoadSize="15" QueryName="GetItemsByModuleTypeId"
                      AutoLoad="True" FilterOperator="Or">
                <domain:MRSDomainContext />
            <riaControls:DomainDataSource.FilterDescriptors >
                Value="{Binding ElementName=SearchTextBox,Path=Text}" />
                Value="{Binding ElementName=SearchTextBox,Path=Text}" />
                <riaControls:Parameter ParameterName="ModuleTypeLookupId" Value="38" />

My LoadSize is the same as my page size, so it will load once for each page.

A Reference to my DomainService need to be added and reference on the header of the page will be needed for that.
There is a two filters with an OR operation, in the domaindataservice body FilterOperator="Or", and add the filters in DomainDataSource.FilterDescriptors

I will try to post the reset if anybody is interested.