Azure AppFabric Service bus, Silverlight Integration - End-to-End (walkthrough) - Part 1

Posted at: 6/17/2011 at 1:03 PM by saravana

Introduction

In this article we are going to see the end to end integration of Azure AppFabric Service bus and Silverlight. First we are going to create a very basic "Hello World" Silverlight application that interacts with a WCF operation called "GetWelcomeText" and displays the text returned in the UI. In order to explain the core concepts clearly, we are going to keep the sample as simple as possible. The initial solution is going to look as shown below. The SL application hosted on a local IIS/AppFabric(server) web server and accessed via a browser as shown below.

 clip_image002

Next, we are going to extend the same sample "Hello World" example to introduce Azure AppFabric service bus as shown in the below picture and show the power of AppFabric Service bus platform, which enables us to use the remote WCF services hosted geographically somewhere in the wild.

clip_image004

Original Source: http://blogs.digitaldeposit.net/saravana

The first part of the article doesn't going to touch anything on Azure AppFabric service bus, it's all about creating a simple SL/WCF application.

Create a Hello World Silverlight Application

Open Visual Studio (use Run as Administrator), and Click New Project from the Start page, which will bring the "New Project" window as shown below

clip_image006

Select Silverlight from Installed Templates, and choose "Silverlight Application" from the list. Provide "AppFabricSBandSLIntegration" as the name and click OK. In the next screen ("New Silverlight Application"), just leave the default values and click OK. The solution structure will look as shown below.

clip_image008

Add a simple WCF service:

Right click on AppFabricSBandSLIntegration.Web ASP.NET application and select "Add New Item", which brings the "Add New Item" window as shown below.

clip_image010

Select "Web" from Installed templates and "WCF Service" from the list provide "AdminService.svc" as the name and click "Add".

Next, rename the default method name "DoWork" to "GetWelcomeText" and changed the return type from "void" to "string" both in IAdminService.cs and AdminService.cs files. The implementation now looks as shown below.

clip_image012

Rebuild the solution by pressing Ctrl+Shift+B.

Convert the web application to use IIS:

By default the ASP.NET web application will be configured to run on a local server (cassini), for our demo we are going to configure it to run under IIS/AppFabric(server). Right click on the AppFabricSBandSLIntegration.Web project, select "Properties". In the properties windows select "Web" from LHS and select the option "Use Local IIS Web Server". Click on "Create Virtual Directory" button to create the virtual directory and click OK on the popup window (you must have opened Visual Studio by Run as Administrator; else this step will give error.)

clip_image014

clip_image016

Build the solution by pressing Ctrl+Shift+B, and navigate to http://localhost/AppFabricSBandSLIntegration.Web/AdminService.svc and make sure no errors encountered.

Configure web.config file with appropriate WCF settings

For this step we are going to use the WCF service configuration tool SvcConfigEditor.exe. Open a Visual Studio command prompt and type SvcConfigEditor.exe. Once the application is opened, click File/Open and navigate to web.config file found under AppFabricSBandSLIntegration.Web folder.

Click on "Create a New Service" link and click the browse button. Navigate to AppFabricSBandSLIntegration.Web/bin/ AppFabricSBandSLIntegration.Web.dll and select AppFabricSBandSLIntegration.Web.AdminService once selected the screen should look as shown below

clip_image018

Click on the "Next" button in the wizard and make sure the contract is selected as shown below.

clip_image020

Click "Next", On "What communication mode is your service using?" option select "HTTP"

clip_image022

Click "Next", On "What method of interoperability do you want to use?" option select "Basic web service interoperability"

clip_image024

Click "Next", On "What's your address of your end point", clear http:// and click "Yes" on the warning.

On the final summary screen, click "Finish". Your web.config file will now look as shown below.

clip_image026

Rebuild the solution by pressing Ctrl+Shift+B. Right click on AdminService.svc file and select "View in Browser". Make sure it displays as shown below without any errors.

clip_image028

Now we have completed all the required stuff on the WCF services side, let's move on to the client side Silverlight application.

Prepare the Silverlight application to communicate with the WCF Service.

Add Service Reference:

The very first step is to create the service reference to our AdminService.svc WCF service. Right click on the AppFabricSBandSLIntegration Silverlight project and select "Add Service Reference", which will bring the window as shown below.

clip_image030

Paste the url of our AdminService.svc file and click "Go". Once the service is resolved, provide "AdvancedServiceReference" as the namespace and click "OK".

The above step should automatically add ServiceReference.ClientConfig file to the AppFabricSBandSLIntegration Silverlight project as shown below.

clip_image032

Open the MainPage.xaml file and add a TextBlock as shown in the below snippet.

clip_image034

Open the MainPage.Xaml.cs file and add the following lines of code. Basically we are instantiating the proxy client, hooking up the "Completed" event and call the asyn method GetWelcomeTextAsync. Once we receive the response from WCF service, SL runtime will automatically execute the code present in the event handler. We are simply displaying the "Hello World from WCF Service" text returned from WCF service in the text block we created in the previous step.

clip_image036

At this stage everything is completed and pressing the "F5" button should execute the ASP.NET/Silverlight application and display the following result

clip_image038

In part 2 of the article, we'll see how we can introduce Azure AppFabric Service bus in the middle between the Silverlight client and the WCF service. You may be wondering, why I have used the SvcConfigEditor.exe to configure the WCF service rather just simply asking the user to paste 4 lines of configuration Xml. The main reason for using the tool is, when we modify the configuration for Azure AppFabric Service Bus, it makes it easy to understand all the available configuration options.

Nandri

Saravana Kumar

Tags: | |  Categories: Azure | AppFabric | Silverlight | ASP .NET
Actions: Email this article Email | Kick it! | DZone it! | Save to del.icio.us | Technorati Links
Post Information: Permanent LinkPermalink | CommentsComments(0) | Comments RSS

Comments

Comments are closed