Silverlight Slideshow (Part I)
As a Software Design Engineer on the UberDemo team, I‘m very fortunate to be able to experiment with a large variety of technologies. Right now we’ve begun gearing up for MIX07, and so I was ask to put together a slideshow for the upcoming MIX07 site that utilizes the new Silverlight technology, which just happened to be released to public on Dec 04, 2006 as the “December Community Technology Preview (CTP)”. Read more about Silverlight.
It is our team's goal to fully exploit our own technologies to create compelling prototypes and demos. Sometimes we like to push the boundaries of what a particular technology is capable of, to create an even better user experience (UX). We also typically provide feedback to the product teams, if we find issues, or feel strongly about a feature that we think needs to be added into a product early in development, or even sometimes to attempt to prevent cool features from being cut!
It’s my hope that readers of this blog will be able to learn from our experiences and avoid some of the pitfalls that we invariably run into when developing demos on beta and pre-beta software.
In the demo that I am working on now (not complete yet), I was asked to create Silverlight app that cycled through a set of photos from Flickr. Silverlight, being a web friendly version of WPF, is well suited for consuming Flickr web services. Silverlight itself doesn’t provide anything in the way of making web services easier to call, but it does provide a very performant rendering surface for the images.
I experimented with calling the web services using an HTTP REST request and requesting a JavaScript Object Notation (JSON) response in multiple ways, each with advantages and disadvantages. Here are 3 ways I discovered:
- XmlHTTPRequest object. Advantage: Can run from web client. Disadvantage: In IE, throws a warning when doing cross-domain calls and exposes the Flickr API key to anyone that views source.
- Client JavaScript Request. Advantage: Can run from web client. Disadvantage: Cross-domain call without warning (see /// A SECURITY WARNING in jsr_class.js), and exposes the Flickr API key to anyone that views source.
- Using the .NET WebRequest class from an ASP.NET page. Advantage: Browser agnostic, doesn’t throw a cross-domain warning, and doesn’t expose the Flicker API key. Disadvantage: requires a server component, and client-side/server-side code mingles and is a bit more convoluted.
I went with option #3 for this demo, although I haven’t yet experimented cross-browser yet WRT this. I’m sure that this would also affect #1 and #2. It is in my plans to do this though, to insure a robust application.
It also should be noted that all of the above methods can suffer equally from a script injection attack when a JSON response is returned and processed, so you really need to trust your source web service provider.
Once I was able to get a list of images as a JSON object, I now wanted to iterate through them and display and animate them, however I ran into an issue with animation. The animation required moving an Image, or in my case a Rectangle filled with an ImageBrush, through an arbitrary set of points. The problem was that if I had a multiple storyboards only the first animation occurred. Fortunately I found a workaround to this Silverlight bug [since fixed].
Here are the specifics of the storyboard animation issue that Karsten Januszewski (a friend and fellow team member) posted for me to get it out there quickly. I wanted to get this out to a large audience so that others wouldn’t have to suffer the temporary confusion that I went through.
-Hans Hugli