do { Engine.BlogAbout(".NET","Silverlight"); } while ( alive );  

Mark Monster

Mark Monster  

Posts Tagged ‘Cloud’

Silverlight 3 talking to a RIA Service, everything hosted on Windows Azure

This is my first tryout of Windows Azure. I wanted to know if it’s possible to run the Preview of RIA Service on the CTP of Windows Azure.

First of all you’ll need a lot of different components, and if you want to host your solution in the cloud you’ll also need to register at Windows Azure.

- Register first: http://www.microsoft.com/azure/register.mspx

I assume you’ve already a machine running Visual Studio 2008 SP1. But even then you’ll need to download and install the following components if you haven’t done yet.

- Silverlight 3 Beta Tools for Visual Studio: http://www.microsoft.com/downloads/details.aspx?FamilyId=11dc7151-dbd6-4e39-878f-5081863cbb5d&displaylang=en

- .NET RIA Service May 2009 Preview: http://www.microsoft.com/downloads/details.aspx?FamilyID=76bb3a07-3846-4564-b0c3-27972bcaabce&displaylang=en

- Windows Azure Tools for Visual Studio May 2009 CTP: http://www.microsoft.com/downloads/details.aspx?FamilyID=11b451c4-7a7b-4537-a769-e1d157bad8c6&displaylang=en

 

Everything installed? Let’s start with the general setup

I first created an empty Solution, I always do this, because this is the only to have complete control over the naming. After that I added a Web Cloud Service, just like the screen below.

Add a Web Cloud Service

My solution still basic, no coding done yet, looks like this:

Solution view with Web Project and Web Cloud Project

Add a Silverlight Application project, and ensure that this Silverlight Application is hosted in the Webproject created in the previous step. Normally we would create a Silverlight Business Application, but we are going to associate RIA manually to this Silverlight Application.

New Silverlight application dialog

Let’s add a reference to the RIA library that’s needed to run this solution. You can find this library in: C:\Program Files\Microsoft SDKs\RIA Services\v1.0\Libraries\Silverlight\ (of course this can be different, depending on your installation location).

- System.Windows.RIA

There’s also a different library containing User Interface parts, we aren’t using it in this example but this is:

- System.Windows.Ria.Controls

Enable RIA on this Web Project

Before we start our coding, let’s configure the web project to enable RIA Services. I’ve explained it before, but for Windows Azure it’s a little bit different.

Add references to the following dll’s:

- System.ComponentModel.DataAnnotations

- System.Web.DomainServices

- System.Web.Ria

We still need to add the Http Handler for RIA Services. In my previous explanation I only explained how to do this for older versions of IIS. But Windows Azure is running on IIS 7. So the handler needs to be added to the handlers section in the system.webserver element.

<add name="DataService" verb="GET,POST" path="DataService.axd" type="System.Web.Ria.DataServiceFactory, System.Web.Ria, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

 

Enable RIA on the Web Cloud Project

To enable RIA on the Web Cloud Project you have to change the ServiceDefinition.csdef file. Set the enableNativeCodeExecution to true.

<?xml version="1.0" encoding="utf-8"?>
<ServiceDefinition name="MM.SilverToGold.Web.Cloud" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceDefinition">
  <WebRole name="WebRole" enableNativeCodeExecution="true">
    <InputEndpoints>
      <!-- Must use port 80 for http and port 443 for https when running in the cloud -->
      <InputEndpoint name="HttpIn" protocol="http" port="80" />
    </InputEndpoints>
  </WebRole>
</ServiceDefinition>

 

Coding

Now it’s time for coding, though I won’t explain much about the code. Please read my other RIA articles to get coding for RIA Service in your fingers.

First the RIA Service part, a very simple HelloWorldDomainService, just add the following class to your Web project.

using System.Web.DomainServices;
using System.Web.Ria;

namespace MM.HelloWorld.Web
{
	[EnableClientAccess]
	public class HelloWorldDomainService : DomainService
	{
		[ServiceOperation]
		public string HelloWorld(string name)
		{
			return string.Format("Hello {0}, from RIA Services running in the Cloud.", name);
		}
	}
}

When you now build the solution the Silverlight part will get generated.

Show the RIA Services generated file 

Coding the Silverlight part

We now have completed the RIA Services part, let’s do the Silverlight coding. First some UI, containing a button, a input field and a result field. I also added a Click event to the button.

<UserControl x:Class="MM.HelloWorld.Sui.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="White">
        <StackPanel>
            <StackPanel Height="45" Width="Auto" Orientation="Horizontal">
                <TextBlock FontSize="20" VerticalAlignment="Center" Width="201" Text="What's your name:"/>
                <TextBox x:Name="NameTextBox" Height="25" Width="192" Background="#FFFFFFFF" BorderThickness="2,2,2,2" FontSize="14"/>
            </StackPanel>
            <Button Content="Hello?" Click="Button_Click" Height="33" FontSize="20" Margin="5,5,5,5"/>
            <TextBlock x:Name="WorldResponse"/>
        </StackPanel>
    </Grid>
</UserControl>

Alright, in the Click event we want to call the RIA Service, and let’s hope the RIA Service running in the cloud answers us.

private void Button_Click(object sender, RoutedEventArgs e)
{
    var helloWorldDomainContext = new HelloWorldDomainContext();
    helloWorldDomainContext.HelloWorldCompleted +=
        HelloWorldDomainContextHelloWorldCompleted;
    helloWorldDomainContext.HelloWorld(NameTextBox.Text);
}

The code for the HelloWorldCompleted event is very simple, it’s just setting the text of a TextBlock. Please note the event automatically get’s you back to the UI-Thread, no manually checking for UI-Thread required.

private void HelloWorldDomainContextHelloWorldCompleted(object sender, InvokeEventArgs e)
{
    if(e.ReturnValue!=null)
        WorldResponse.Text = e.ReturnValue.ToString();
}

When you test this locally, it will run, but the interesting part of course: Will it run on Windows Azure?

Let it run on Windows Azure

To get your solution to Windows Azure you will first have to right-click the cloud-project, and choose for Publish. This will open a Windows Explorer window showing the files that are ready for publishing. In this example it looks like this.

image

We’ll now logon to the Windows Azure portal. In here you have to create a Hosted Services project. I’ve already done this before, but there are articles on the web about creating a Hosted Services project on Windows Azure. To be honest, you can even do this without an article. My portal looks like this.

Windows Azure Developer Portal

Let’s choose the Hosted Services project, this project is called “Monster Cloud” in my Azure environment. But you can have your own name. The next page looks like this.

Windows Azure Developer Portal - Hosted Services project

Let’s click the Deploy button, and see what happens.

Windows Azure Developer Portal - Deploy a new package screen

Ah we need to provide a few things. An application package, we have this already, it’s in our publish folder that was created for us: MM.HelloWorld.Web.Cloud.cspkg.

Let’s browse for this file, and also pick the Configuration Settings file, this is: ServiceConfiguration.cscfg.

All that’s left is providing a label name, and clicking the Deploy button. My screen looked like this before clicking Deploy.

Windows Azure Developer Portal - Deploy a new package screen, filled

When clicking deploy a lot of things are being done behind the scenes. First of all the files are uploaded, but also a kind of VM get’s created for us, this takes some time, might even take 5 minutes or longer. So you definitely have to have a bit of patience. After the deployment was complete my screen looked like this.

Windows Azure Developer Portal - Run the Azure package

Let’s click the Run button.

So let’s try the url that’s created for our staging environment. For a brief period of time, you can take a look at my staging environment.

It’s working as expected. We now have a Silverlight 3 application communicating with RIA Services, and everything running in the cloud.

Testing the Silverlight 3 communicating with RIA Services, all running on the cloud.

You can download the Source Files. If you have any questions or remarks please let me know.

Ps. This article is cross posted on: Mark Monster’s blog and Silverlight Help.