Google search sample in silverlight

Looks like I caught the silverlight virus after all. I can't help it, it's fun and very easy to learn especially if you have existing WPF skills. Yesterday I took a moment to produce a google search sample in silverlight. In this article I want to show off the result and of course show how I made the sample.

Start with the fun part

Before I start talking about how to use JSON, REST, etc. in Silverlight I just want to show what the google search sample actually is. Here's a screenshot, to see the application in action you have to download the code and start it on your machine. The XAP and the source are included as attachment to this post.

Implementing a basic search client

The search sample is build around the SearchAgent class which is a proxy for the google AJAX search API. This API doesn't require any API keys or anything like that, just call the URL from your favorite RIA framework and off you go.

The google search API makes use of a REST protocol to invoke search queries and returns the result in JSON format. To perform a search query you do a HTTP  request to the following URL: http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q={0}&start={1}

The q parameter will contain the query to execute and the start parameter determines the offset at which google should start offering the items in the resultset found by the search engine.

This first part is easy enough with the standard WebClient, the only tricky part here is the async behavior of the WebClient class. Instead of using synchronous calls, silverlight is build around a model where async calls are the norm. I personally think that this is a good thing, as most developers will find themself doing async calls for pretty much everything that uses a webservice. I have experienced this in both Windows Forms and WPF and am glad that Microsoft decided to support this model of background processing better in silverlight. The method pair used to retrieve search results looks like this:

 

/// Performs the search operation
private void PerformSearch()
{
    WebClient client = new WebClient();

    client.OpenReadCompleted += new OpenReadCompletedEventHandler(OnSearchQueryCompleted);
    client.OpenReadAsync(new Uri(String.Format(SearchMethod, _searchQuery, (PageIndex * 4))));
}

/// Handles the search results returned by google
private void OnSearchQueryCompleted(object sender, OpenReadCompletedEventArgs e)
{

}

 

Native JSON support

What surprised me the most when I started creating this sample was the fact that JSON was supported this good. I especially like the combination of Linq with JSON. It made my work a whole lot easier, because I could use the Select operator to convert a JSON array to an array of strongly typed objects in a matter of microseconds.

The following snippet is used to transform the results:

 

JsonArray resultData = (JsonArray)returnValue["responseData"]["results"];

var searchResultItems = resultData.Select(item => new SearchResult()
{
    Href = item["unescapedUrl"],
    Title = item["title"],
    Description = item["content"]
});

Silverlight controls

In silverlight 1.0 it was not possible to create control skins (Heck, even the controls didn't exist at the time). So this for me is a pretty cool addition to the silverlight framework. In this sample I exploited the possibilities to add the famous web 2.0 gradient and a semi transparent listbox.

There is however one thing that I am missing right now: HTML support for textblocks. It would be really cool if Microsoft includes a control in a future version of silverlight that supports HTML rendering. It doesn't need full HTML support, but a basic HTML 4 set of tags would be kinda cool.

Pager control

In the user interface department I wanted to create the Goooooogle page, but I'm not exactly Joe the Designer so I skipped creating images for this effect. Instead I added an itemscontrol with an itemtemplate that contains a button with the number of the page the user can jump to. The endresult still looks good and is usable too. So if you are a Joe the Designer and want to fix it, please do. I will be looking forward to the result!

The endresult

You have seen the endresult of an hour work at the beginning of this article. The only thing I want to add here is that Silverlight 2.0 is a big step forward towards what Flash is today. I am excited to see where this is heading in the coming months/years.

Share this