Microsoft released Silverlight 2.0 beta 1 at MIX08 last week. Comparing to Silverlight 1.1, the 2.0 beta 1 release has significant improvements and changes. To evaluate the state of Silverlight 2.0 as a RIA development tool, I wrote a mashup application.

What this Silverlight application does is simple. It allows you search Flickr by entering a tag. The result (GeoRSS feed) will be displayed in a thumbnail image slider. You can click a thumbnail image, then the location will be displayed on a map (Microsoft Virtual Earth) as push pin and a larger image can be shown in the infobox when mouse-over the push pin. There are several controls on the application to control the map, such as toggle map control panel and zoom in/out with Silverlight slider. Here is the screen shot.



You can try this application here. Now let me show you the details on how this application was developed.

Development Tool

First, let's go over what we need for developing this mashup:

• Silverlight 2.0 Beta 1 - This is the Silverlight plugin or runtime for the browsers. Very small foot print so the installation is quick.
  
  
• Microsoft Visual Studio 2008
  
  
• Silverlight 2.0 Tool Beta 1 for Visual Studio 2008 - For developers, VS 2008 fits better, even though Microsoft Expression Blend is another Silverlight application development tool. Blend is for designer as what Flash Studio is.
  
  
• Silverlight 2.0 Beta SDK - This actually included in the above tool.
  
  
• Microsoft Virtual Earth SDK 6.0 - What you really get is the help file for the VE 6.0 SDK. The VE SDK or API is in JavaScript so that you don't have anything actually installed to your computer.
  
  
• IIS or other HTTP server (for a good reason explained later) - This is for testing your application locally.

An important reminder, if you have previous version of Silverlight tool for Visual Studio, you really need to uninstall it first. You would think Microsoft will take care of the upgrade, it doesn't at all.

Create a Silverlight 2.0 Project

Just like every other modern IDE driven development environment, you need create a project first with Visual Studio. The installation of Silverlight 2.0 Beta tool for VS 2008 gives you a Silverlight template. Once the project is created, the environment looks like this:



Here are a few things you would notice that are different from previous version:

• There is a toolbar for Silverlight now at the left. It contains 30 Silverlight UI controls. This is the first time Silverlight provides build-in UI controls besides the TextBox control.
  
  
• There is a visual design area at top with a slider for zoom in/out the view. But don't get too excited. The design area is read only. Other than view the UI, nothing can do there. To use the control toolbar, you drag and drop the control onto the source code. Yes, it is odd.
  
  
• There is NO property inspection tool at right you'd expect, to help adjust UI control.
  
  
• The generated files and the directory structure are different from previous version. One more XAML file, app.xaml (and code-behind file), is created. The test HTML file is created in ClientBin directory instead of in the project root.

Silverlight 1.1 is the past so I won't get into details to compare it. I'll just focus on developing a new Silverlight 2.0 application.

Develop the Application UI

There are two classes (XAML files) created to allow you work on:

• App (app.xaml, app.xaml.cs) - This is the application class, which is required by every Silverlight-based application to start an application running and to show the main application UI. We don't work on this file unless need global data, resource, assets or functions.
  
  
• Page (page.xaml, page.xaml.cs) - The UI design starts from here. It's the main UI of a Silverlight application. The Page class derives from UserControl and is implemented using a combination of one file for XAML markup (page.xaml) and one file for code-behind (page.xaml.cs).

By default, the page.xaml is created as this:

Now we can start dropping desired controls from the control toolbar onto the above code to form the intent UI. Speaking of default, if you are an Adobe Flex developer, you would just drag and drop the UI components on to the design area and the default look could be decent enough to allow you move on to code. That's not the case with Silverlight in VS. Try to drop a Button on the above code and see what will happen. The button will take over the whole space so that you can't find where button is, before you realize it needs to set the size to have a real button shown as a button.

Here is the final UI XAML:

The XAML code is very straight forward. Especially if you have ever worked with Flex, this is the same way of designing Flex application in MXML.

You might noticed that I replaced Grid and used StackPanel all the way for the UI layout. This version of Silverlight doesn't have too many options for UI layout. I used StackPanel with Orientation property (Vertical or Horizontal) as work with HBox or VBox in Flex. Worked just fine.

I used Slider control (code highlighted) to adjust the map zooming. But the feature of the Slider control is very primitive so far. There might be way, but I can't find it to set the sliding step, adjust the ticks, put label on ticks, etc. I know you might be able to do that via Silverlight complex styling template tags. But with Flex slider in mind, it's a bit frustrating to make it works.

I do like the way Silverlight defines content component for the List control (code highlighted). In Flex, it's bit of woks to visually custom the contents of a list or a grid. In Silverlight or MAXL, that can be easily done using DataTemplate. You can mix varies of controls inside the template.

The event handling on UI is simple. The event handling functions are created automatically in the code-behind file page.xaml.cs when event properties are specified. Thus, let's move on to actions.

Fetch Flickr GeoRSS Feed by Tag

All the actually works are defined in the page.xaml.cs file, which is in C#. Connection to Flickr is a HTTP request. In Silverlight, remote connection is asyncnous, just as in Flex.

The above code sends a request to Flickr. The handleFeed function will be called once received the response. flickrTagURL is a constant of the fix URL. feedURL is a input text field for entering a tag. If you are curious, the Flickr URL looks like this:


What Flickr returns is GeoRSS feed. That raised a problem. Microsoft does has System.ServiceModel.Syndication package to parse ATOM and RSS feed. But there is no obvious way to parse GeoRSS (please share if you know better). I don't want to use third party parser for this application. Thus, in the handleFeed function, I ended up using XMLReader parsed the feed myself. Not a good way of doing it though.

That's how I did it, just scan through the feed and pick up what I needed. There is a custom class GeoItem created to store the retrieved information such as item title, description, latitude, longtitute and image URL. In Flex, parsing GeoRSS could be done relatively more easily because E4X handles XML more elegantly. If you are interested in it, I wrote a post awhile ago covered GeoRSS parsing using in Flex E4X way.

In the end, I passed the GeoItem list to the image list mentioned earlier like this:


That gets the photo slider (list) populated. However, to test the result, you can't just open the TestPage.html in a browser. You need access your application from a web server, otherwise the photos won't show up. That's the good reason mentioned earlier to have a web server in place for the app. I think there is a security sandbox issue involved but I didn't investigate it any further.

Again, I like the way how Silverlight List control works with contents and data. Now we've got the data, it's about time to deal with the map.

Work with Virtual Earth Map

There are two aspects of integrating Silverlight with Virtual Earth. One is the UI and another one is communication between Silverlight managed code and the map.

Silverlight doesn't come with a map control so that there is no direct way to embed a map inside a Silverlight application. Virtual Earth map is rendered and controlled via JScript inside a HTML page. So, the solution for layout is to put the the map DIV on top of the Silverlight application within the page. Here are the steps to make the whole thing work:

Add the Virtual Earth map to the pageI copied the generated TestPage.html to index.html and worked on it. This is because every time you build your app, the TestPage.html got regenerated, even though nothing changed inside. I don't want loss the JavaScript code put in it. To add a VE map, you need include the VE JavaScript library, put in a map DIV, write a function to load the map, and, call the function at page body onload. Simple, isn't it? Here are the code (assume you know where to put them): Lay the map on top of the Silverlight applicationTo do this, you need set couple of parameters on Silverlight. Just add these two to the Silverlight obj definition in the HTML page index.html: Then, define a style for the map DIV to make it show up at where exactly you want it to: That's it. Now the map should look just like be part of the Silverlight application.

Communicate with the mapTalking to the map from within Silverlight is mush easier than you would think. First, you need create some JavaScript functions side the HTML page to manipulate the map. Such as a function to add a push pin on the map:From the Silverlight application, all you need to do is call the function and pass in data needed. To call the above add push pin function, in my case, is when the image is clicked in the image list: All other map control functions work the same way as this one.

To deploy the application, the easiest way is to copy the whole ClientBin directory to a web server. It could be more involved if the application is created as a ASP web application at the first place. But unless you want to the server side Silverlight components to integrate with server side .Net services, keep it in a plain old and good HTML page is a simpler and more portable approach.

This is a simple Silverlight application that gives you a peek on how this new 2.0 beta 1 release works with a RIA developer. You can view this application here and download all the source coder here.

Read more from Moxie Zhang.