Tuesday, June 2, 2009

Silverlight 3.0 Beta and WCF Services

Hi All,

I was just looking at changes from Silverlight 2.0 to Silverlight 3.0 for accessing WCF services. Fantastic !!

First change is introduction of “Binary XML” message transport over http and Second change is introduction of new tool called as “SLsvcUtil.exe” for generating Client Proxy for WCF Service.

Advantages of using Binary XML –:

1) You will see size of the message reduced up to some extend.

2) It is optimized for Speed.

3) Can be effectively used for Binary Large objects.

Important Note – It is not optimized for small messages. It is even not optimized for Strings.

So, I thought let’s prepare a simple Lab manual which will help people to see, Visualize and implement WCF Services in Silverlight 3.0.

Pre-requisites for this Lab are as follows-

1) Silverlight 3.0 must be installed on your machine-

2) For designing optionally you can have Microsoft Expression Blend 3.0 Preview-

3) Visual Studio 2008 or Visual Studio 2010 Beta-

So, let’s get started by -

1) Create Silverlight project by the name “InvokingWCFInSL3”.

2) Now, let’s add a DAL (Data Access Layer) which will allow us to access the data from the Database of your choice. For doing the same I am using my own database which is configured on SQLExpress instance on my machine.

Here I am using ADO.NET Entity Data Model as a DAL (Data Access Layer).

3) First add a new item in the web application with the name “CustomersEDM.edmx” and follow the wizard to configure the database table as shown bellow-

EDMPicture

4) Now, let’s add a WCF Service in the web application with the name “FindCustomer.svc”.You can do the same by adding a “Silverlight- enabled WCF Service” which will automatically do the necessary settings for you in “Web.Config” file which we will see within few minutes.

5) Once you are done, let’s write the Service logic to access the data through the ADO.NET Entity data model by using LINQ as shown bellow-

[OperationContract]
public IEnumerable<CustomerInformation> GetCustomersByCity(string City)
{
CustomersEntities ed=new CustomersEntities();
var query = from c in ed.CustomerInformation
where c.City.Contains(City)
select c;
return query;
}





6) Now as you finished writing WCF Service, let’s browse it by right click to “FindCustomer.svc” and view it in Browser.



7) Now, Let’s see one more new feature of Silverlight 3.0 Beta. In Silverlight 3.0 SDK, you will find a tool called “SLsvcutil.exe” for creating a client proxy. This is a similar tool which people use for generating Client proxy in WCF called “Svcutil.exe”.



Here is a path -



C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Tools



8) So, How to use this tool? Well let’s see- you can see all the options available with SLSvcutil.exe tool by “SLsvcutil.exe /?” command.



For convenience I am making a copy of the tool under C:\Try folder.



9) Open “Visual Studio 2008 command prompt” and change the directory to C:\Try- as shown bellow-



commandprompt







10) Now copy the URL of WCF Service with WSDL and write bellow command on command prompt-



GenerateProxy



So, after pressing enter key, you will see there are two files generated in C:\Try folder.



i) CustomerProxy.cs.



ii) ServiceReferences.ClientConfig.



If you do not give config file name, default config file name is “ServiceReerences.ClientConfig”. I am using default name.



11) Now as you have generated a proxy and configuration file, let’s see our Web application’s Web.Config file. You will see the major change their itself.



WebConfigPict



12) So, here is a custom binding which will allow your SOAP Message to be transported as Binary over http. WOW !!



13) Now let’s copy both the files (CustomerProxy.cs and ServiceReferences.ClientConfig) from C:\Try folder and paste it inside Silverlight application and start writing the code for accessing the proxy as bellow-



14) For showing data in a nice way I have made a small design in “MainPage.xaml” as bellow-




<UserControl 
x:Class="WCFInSL3_WhatIsNew_PartI.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="Black">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="txtCityLabel"
Text="Enter City -"
FontSize="12"
Foreground="Yellow"
Margin="10"/>
<TextBox x:Name="txtSearchCustomerByCity"
Width="200"
Height="20"/>
<Button x:Name="btnSearch"
Content="Search Customer"
Height="20"
Width="100"
Margin="5,0,0,0"
Click="btnSearch_Click"/>
</StackPanel>

<StackPanel>
<ListBox x:Name="listCustomers"
ItemsSource="{Binding}"
Background="Black">
<ListBox.ItemTemplate>
<DataTemplate>
<Border CornerRadius="10,10,10,10"
BorderThickness="5"
BorderBrush="Yellow"
Background="Green"
Width="380" >
<StackPanel HorizontalAlignment="Left">
<TextBlock Text="{Binding CustomerID}"
Margin="5,0,0,0"
Foreground="Yellow"
FontSize="12"/>
<TextBlock Text="{Binding CustomerName}"
Margin="5,0,0,0"
Foreground="Yellow"
FontSize="12"/>
<TextBlock Text="{Binding Address}"
Margin="5,0,0,0"
Foreground="Yellow"
FontSize="12"/>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</StackPanel>
</Grid>
</UserControl>





15) Now let write a code inside “MainPage.xaml.cs” file on button click event which will fetch the data from database for a given city as shown bellow-




public partial class MainPage : UserControl
{
FindCustomerClient proxy = new FindCustomerClient();

public MainPage()
{
InitializeComponent();
proxy.GetCustomersByCityCompleted +=
new EventHandler<GetCustomersByCityCompletedEventArgs>
(proxy_GetCustomersByCityCompleted);
}

void proxy_GetCustomersByCityCompleted(object sender,
GetCustomersByCityCompletedEventArgs e)
{
listCustomers.DataContext = e.Result.ToList();
}



private void btnSearch_Click(object sender, RoutedEventArgs e)
{
proxy.GetCustomersByCityAsync(txtSearchCustomerByCity.Text);
}
}











16) So, you are almost done!! Hit F5 and test your Silverlight application. It should show you the result as bellow -(in my case)



output



And also see the Binary data which is coming from WCF service as bellow. To show this binary data, I am using “Nikhil Kothari’s Web Development Helper Tool”. You may use different tool as per your convenience.



BinaryResponse



17) Now as you have seen, SOAP Binary Message transportation over http, I am just making few changes. Which will show you difference between Silverlight 2.0 and Silverlight 3.0 Beta-



18) Just to demonstrate here, I am doing direct changes in WCF Service’s config file and client side config file.



i) Open Web.Config file from Web application under which out WCF Service is hosted and do following change as shown bellow-




<bindings>
<customBinding>
<binding name="customBinding0">
<!--<binaryMessageEncoding/>-->
<textMessageEncoding/>
<httpTransport/>
</binding>
</customBinding>
</bindings>





ii) Now Open, ServiceReferences.ClientConfig file from Silverlight project and do the following changes as shown bellow-




<bindings>
<customBinding>
<binding name="CustomBinding_FindCustomer">
<!--<binaryMessageEncoding />-->
<textMessageEncoding/>
<httpTransport maxReceivedMessageSize="2147483647"
maxBufferSize="2147483647" />
</binding>
</customBinding>
</bindings>







19) So, Now we are using <textMessageEncoding/> at both the end Server as well as Client, let’s see how the message is transferred to client-



ServiceResponseinText



20) So, That’s All !! Enjoy !!

No comments:

Post a Comment