Thursday, May 10, 2012

RESTful WCF Services with jQuery Mobile (part 2)

In order to get up and running as quickly as possible with jQueryMobile, we're going to copy the Single Page template. Note: In order to simplify this example, I'm adding the single page template HTML directly to the WCF project. I would normally use a multi-page template and separate the UI from the services in a production project and I suggest you do the same.
With that said, create a new html document in your project's root named index.html. Navigate to the Single Page Template, view the source, copy it, and paste it over the contents of the index.html document. Congratulations, you've just integrated jQueryMobile with your project. Now you just need to request and receive data from your service.
The template is broken into a header, content, and a footer section. All of the scripts are loaded from a remote server so you don't need to download anything into your project at this time. Start by removing the paragraph elements within the content section. Add a unordered list element with a data-role of listview. jQueryMobile will handle the styling of this list to make it look like your standard iOS tableview component. We're also going to add a hidden listitem element with an id of categoryTemplate. What we end up with looks like the following. Note that there's also a reference to a category.js file. Create a blank file with that name for now. Finally, we add the javascript to call our WCF service. The function below uses the $(document).ready() function to wait for the content (including jQueryMobile) to load. once it does, the ajax function is called. It shows a page loading message with an animated image when the request starts and hides it when the request has completed. We're specifying that we're sending and receiving json data using a POST method just as defined in the WCF method attributes. Finally, we use the data returned by the service. Recall the structure from the previous post, the object name is GetProductCategoriesResult, so we iterate over the contents of that object, creating a clone of the template node and replacing its text. Finally, we call the listview(refresh) to ensure that jQueryMobile styles the content appropriately.

Friday, May 4, 2012

RESTful WCF Services with jQuery Mobile (part 1)

One of the most essential techniques in mobile application development is getting data to and from a remote server and displaying it in your application's user interface. As such, it's also one of the more common questions asked in the PhoneGap discussion group. In this post, I'm going to cover the basics of configuring a WCF Service to accept requests using a RESTful interface, returning data in JSON format, and utilize the response to populate the user interface in a jQueryMobile user interface. For this example, the UI will be running from the server with the service, but it could just as easily be running within PhoneGap on a mobile device.

These techniques aren't unique to mobile development. The basic pattern can be applied to any web site. Additionally, while this post covers WCF Services in .NET, other server platforms and technologies would work just as well with jQueryMobile.

The first step in developing a dynamic, AJAX driven user interface is exposing your web service endpoints. Visual Studio 2010 and the Windows Communication Foundation really simplifies this task. It's easy to beat up on Microsoft for their missteps, but WCF is a really solid technology and is the Swiss Army Knife of data plumbing.

Visual Studio 2010 has taken much of the configuration pain out of WCF. It makes the simple things simple, and the complex things possible. Let's start by opening Visual Studio 2010 and creating a new WCF Service Application. Name the project MobileService and the solution MobileSolution, saving the project where the rest of your projects are stored (for convenience sake, I like to store projects in c:\projects, but that's just me.
When the project is created, we start with some stubbed out code to load a class named Service1 using interface IService1 through a service named Service1.svc. Since none of this applies to the solution we want to build, we're going to get rid of it all and start from scratch.
  1. Delete the IService1.cs and Service1.svc files
  2. Remove everything from the Web.config file between <system.serviceModel> and </system.serviceModel>
Right-click on the MobileService project and select Add->New Item. Select AJAX-enabled WCF Service, naming it MobileService.svc
This will add missing elements back into your web.config and create the service file. It also takes care of assigning ASPNetCompatibility. The AspNetCompatibilityRequirements attribute is required for RESTful services. Visual Studio has enabled Web Script in the web.config file. This is a Microsoft-specific method of binding javascript to your WCF method. It won't work with REST, so let's remove it by eliminating the <enableWebScript /> line from the web.config file. While you're at it, rename the behavior to MobileService.webHttpBehavior and add a webHttp element. The name is used to describe what the behavior is for an will be referenced later in the config. The webHttp element specifies that the webHttp binding will be used. This relatively simple binding uses the URI + verb dispatcher to be used. This is what you'll end up with when you're done:
With the configuration straightened out, we'll turn our attention to the body of the service. Start out by eliminating the boiler plate method. For our scenario, we're going to accept a POST and return a list of strings in JSON format. The code for this is shown below. What's important to note is the WebInvoke attribute. This is our connection from the request to the function body. If we were using a verb other than post, we would map the Uri elements to function parameters. Because we're using POST and because this method doesn't require parameters, we're omitting this step. Also note that the message style is wrapped. This allows us to send JSON data to and from the server. At this point, we can fire up Fiddler2 and test this service. Run your application with F5 and copy the url. Switch to fiddler and click on the composer tab. Add the url of your service, the port it's running on, the name of the service, and the UriTemplate from the method. You'll also need to specify that you're working with data in json format by adding Content-type: application/json to the request headers. When you're done, you'll have something like this:
Click the execute button and if you put everything together right, you should see a 200 response in the list of http traffic to the left. Opening that response, you should see something like this:
This shows you the structure of the JSON data returned by your service. Next up - creating a jQueryMobile page that consumes that data.