Consuming RESTful Web Services in Silverlight

Overview

This post is an extension of Rob Bagby's series on RESTful services. His 11th post details setting up a RESTful WCF service that can be consumed in Silverlight.

The key points are:

• Creating a new Service Host Factory and Interceptor to support HTTP Verb tunneling, since Silverlight supports only GET and POST verbs.
• Issuing calls from a client application to the RESTful service (including Silverlight and Fiddler)

This provides a great starting point for creating RESTful services and consuming them with Silverlight, so I decided to create a RESTful service layer around Zleek that utilizes LINQ to Entities.

Here are my take-aways from the experience:

• The WCF Rest Starter Kit makes generating RESTful services extremely easy!
• The ADO.NET generated entity classes are declared as partial so that you can easily extend them with your business logic.
• You should create a separate Data Contract version of your entities in order to facilitate serialization

I updated my Agnition.Silverlight.Utils library (see my Previous Post on Silverlight Extensions) with some utility classes for dealing with RESTful services, including request creation and serialization.

Step-By-Step

1. Download the WCF Rest Starter Kit
2. Create a blank solution and add the Microsoft.ServiceModel.Web project from the starter kit as well as the Agnition.Silverlight.Utils project into it.
3. Create a class library for your ADO.NET Entities
4. Create an Entity Data Model from your database
   
5. Create partial classes for each of your entities that you wish to write business logic or create data contracts for. Ideally this will be in a separate class library project.
6. Create a class library for your data contracts.
7. Create a Silverlight class library for data contracts. You will add all data contracts here as existing links to your other data contracts library to facilitate code sharing between your .NET 3.5 and Silverlight 2.0 libraries.
   
   
8. Optionally create Silverlight business entity classes (possibly in another library) for your Silverlight application.
9. Create a Silverlight application that you will use as your client. Ideally you should create a separate ASP.NET web application linked to the Silverlight application for ease-of-testing.

At this point, your solution structure should look similar to the following:

Now we can start fleshing out the service and client. Let's start out by creating the service. Follow Rob's Post to walk-through creating your Service Host Factory and Interceptor. After that is complete, get started making the sevice more accessible to Silverlight.

1. Remember those data contract libraries? Now it's time to flesh them out. For each entity, create a class with public properties for each piece of data you wish to expose. You can include relational properties this way as well. Here is an example:
   
2. Provide a way to project your entity class into your data contract. The easiest way (syntactically) to do this is to create an operator that will allow you to project the entity class into your data contract type while using casting syntax. The following screenshot illustrates both creating the operator and using the cast syntax to perform conversions:
   
3. Create a web service method using OperationContract and WebInvoke (or WebGet) attributes. Remember that to be truly RESTful, retrieval operations should use GET, inserts/updates should use PUT, deletes should use DELETE and appends should use POST. Response codes should be used effectively as well. Here is a GET example:
   

At this point you can either test the service using Fiddler (see Rob's post), or go ahead and create the client application.

1. Create a way to get the service URL into the Silverlight application. I like to use startup parameters. Here is how they are declared:
   
   They can only be extracted in the Application.Startup event, so I like to create a Configuration class that gives strongly-typed access to my parameters later.
   
   
2. Now we are ready to call the service and deserialize the result:
   

That's it! Easier that you thought it would be, right? Please post any comments/questions you have about this. Here is the updated Agnition.Silverlight.Utils library.

Silverlight Extenders

Source updated 12/24 with cross-browser support

Source updated 12/30 with RotateScaleExtender repaint fix

Work on the final version of Zleek is progressing nicely. The new UI is coming along, as well as the backend. The new features, including integration with other photo services and video support, are just about complete as well.

Over the coming months before our release, I will be posting code snippets and libraries that I put together for Zleek that may be helpful for other Silverlight developers.

This first post is a combination of a few extenders that I put together:

• DragExtender: Adds mouse drag functionality to any FrameworkElement
• RotateScaleXtender: Adds mouse rotate/scale functionality to any FrameworkElement
• KeyExtender: Adds extra keyboard support, including handling of DOM events and extra keys
• FillContainerExtender: Automatically resizes the Silverlight application to fill its container.

Here is the running example.

The source code in the test harness is pretty simple. You declare an instance of the extender and give it a reference to the FrameworkElement you want to add functionality to, and the extender does the rest. There are extensibility points inside of the extenders that should make them useful for any application.

Here is the source code, and here's a snippet from the test harness showing example usage:

   1:  using System;

   2:  using System.Windows.Controls;

   3:  using Agnition.Silverlight.Input;

   4:  using Agnition.Silverlight.Controls;

   5:   

   6:  namespace ExtenderTestHarness

   7:  {

   8:    public partial class Page : UserControl

   9:    {

  10:      public Page() {

  11:        InitializeComponent();

  12:   

  13:        // Initialize extenders

  14:   

  15:        _fillContainerExtender = new FillContainerExtender(this.LayoutRoot);

  16:   

  17:        _keyExtender = new KeyExtender(this, true, true, true);

  18:        _keyExtender.KeyDown += new EventHandler<KeyCodeEventArgs>(KeyExtender_KeyDown);

  19:        _keyExtender.KeyUp += new EventHandler<KeyCodeEventArgs>(KeyExtender_KeyUp);

  20:   

  21:        _dragExtender = new DragExtender(this.DragMe);

  22:        _dragExtender.StateChangeStart += new EventHandler<StateChangingEventArgs>(DragExtender_StateChangeStart);

  23:   

  24:        _rotateScaleExtender = new RotateScaleExtender(this.DragMe, 0.75, 6);

  25:        _rotateScaleExtender.StateChangeStart += new EventHandler<StateChangingEventArgs>(RotateScaleExtender_StateChangeStart);

  26:      }

  27:   

  28:      private void FullScreenButton_Click(object sender, System.Windows.RoutedEventArgs e) {

  29:        // Toggle full screen

  30:        _fillContainerExtender.IsFullScreen = !_fillContainerExtender.IsFullScreen;

  31:   

  32:        // Toggle display of warning

  33:        FullScreenWarning.Visibility =

  34:          FullScreenWarning.Visibility == System.Windows.Visibility.Collapsed ?

  35:          System.Windows.Visibility.Visible : System.Windows.Visibility.Collapsed;

  36:      }

  37:   

  38:      private void KeyExtender_KeyDown(object sender, KeyCodeEventArgs e) {

  39:        // Demonstrates KeyCode event arguments Key and TextValue

  40:   

  41:        // Show which key was pressed

  42:        if (e.Key == KeyCode.Shift) {

  43:          MouseMode.Text = "Mouse Mode: Rotate/Scale";

  44:        }

  45:        else {

  46:          // Don't show message on shift, to prevent spamming while holding

  47:          KeysPressed.Text += e.Key.ToString() + " ";

  48:        }

  49:   

  50:        // Render the text

  51:        if (e.TextValue != null) {

  52:          KeyText.Text += e.TextValue;

  53:        }

  54:        else if ((e.Key == KeyCode.Backspace) && (KeyText.Text.Length > 0)) {

  55:          // Check for backspace

  56:          KeyText.Text = KeyText.Text.Substring(0, KeyText.Text.Length - 1);

  57:        }

  58:      }

  59:   

  60:      private void KeyExtender_KeyUp(object sender, KeyCodeEventArgs e) {

  61:        // Demonstrates KeyCode event arguments Key and TextValue

  62:   

  63:        // Show which key was pressed

  64:        if (e.Key == KeyCode.Shift) {

  65:          MouseMode.Text = "Mouse Mode: Drag";

  66:        }

  67:      }

  68:   

  69:      private void DragExtender_StateChangeStart(object sender, StateChangingEventArgs e) {

  70:        // Demonstrates how to cancel an event in order to combine two MouseMovementExtenders

  71:   

  72:        // If not holding shift, allow dragging

  73:        e.CancelEvent = _keyExtender.IsShiftDown;

  74:      }

  75:   

  76:      private void RotateScaleExtender_StateChangeStart(object sender, StateChangingEventArgs e) {

  77:        // Demonstrates how to cancel an event in order to combine two MouseMovementExtenders

  78:   

  79:        // If holding shift, allow rotate/scale

  80:        e.CancelEvent = !_keyExtender.IsShiftDown;

  81:      }

  82:   

  83:      private readonly FillContainerExtender _fillContainerExtender;

  84:      private readonly KeyExtender _keyExtender;

  85:      private readonly DragExtender _dragExtender;

  86:      private readonly RotateScaleExtender _rotateScaleExtender;

  87:   

  88:    }

  89:  }