AlanO's Blog

SlideShow: My First Silverlight Application

I have been keeping a close eye on Silverlight since the first beta release months ago because of the new capabilities that it adds to the web developer's arsenal. I have been particularly interested in developing rich web application with Silverlight using managed code. Although I have stayed up-to-date with reading about Silverlight in blogs and going through sample code, I have not really built a Silverlight application (I am not counting the 'Hello World' application I built using the first beta release). My recent update to Vista, however, forced me into writing my first application.

I have a photo gallery in my website. One of the options for viewing an album is via Windows Media Player (a Windows Meda playlist is generated for the album). Since my upgrade to Vista, some albums would no longer play well in Media Player; in many cases, I would see a black picture instead of the real one and the picture will only display if I move the Windows Media Player window. I thought this would be a great opportunity for me to get some experience in building a Silverlight application to replace the Windows Media slideshow--- a real application with very simple requirements.

I built a Silverlight SlideShow application for Microsoft Silverlight 1.1 Alpha Refresh in C#. I learned a lot of lessons from this short experience that hopefully might be useful for beginners. Although there's a lot of information out there, it takes time to sift through all of it and find an answer to an issue. Maybe walking through my experience in a nutshell will provide information to some in terms of what to expect.

Before I continue, note that I am covering an alpha version of a product here and the information I provide here may quickly become outdated.

DEVELOPMENT PREP

1. I went to Silverlight: Get Started for a quick refresher on what I needed. The page provides a lot of valuable links that will prove to be very useful in many stages of the development process.
2. I re-read and re-viewed blogs and videos demonstrating basic Silverlight development, even the ones using Beta 1.0 (javascript version).

SETTING UP THE DEVELOPMENT ENVIRONMENT

I installed the following:

1. Microsoft Silverlight 1.1 Alpha Refresh for Windows
2. Microsoft Visual Studio 2008 Beta 2 - this took a very long time, at least an hour
3. Microsoft Silverlight Tools Alpha Refresh for Visual Studio (July 2007)
4. Expression Blend 2 August Preview
5. Microsoft Silverlight 1.1 Software Development Kit Alpha Refresh - this contains very useful documentation and samples, including a set of custom controls (source code included)

DEVELOPMENT

I don't want to bore you with all the details but here are some interesting things I found/used.

Working with Managed Code

This is just funny more than anything. As an experienced ASP .NET developer, it took some time to condition myself to thinking that in a Silverlight project, although I am writing in managed code, the code in the code-behind file will not be executed on the server side!

Timer

I needed a timer for the interval between pictures. The current version of the Silverlight Framework does not have a class that implements something like the .NET Timer class. I found two options:

1. Use DoubleAnimation from a dummy Storyboard.
2. Use 'System.Windows.Browser.HtmlTimer'. Strangely, this class is already marked as obsolete. And even stranger is the fact that there is no replacement for the obsolete class; oh well, it's alpha. I used this option because the implementation is more straightforward and I did not need a high resolution timer anyway.
    

UI Design

As expected, coming up with the UI design took up a lot of my time because:

1. I wanted to come up with an updated look that takes advantage of the UI effects that Silverlight offers. I had to familiarize myself with the available options.
2. Expression Blend is too complicated for me. My previous experience with it was not very pleasant; I was very confused by it --- too many possibilities with what I can do with the presentation gave me a headache. I tried to avoid using it and instead coded in XAML via trial and error. In the end, Blend prevailed. It served as a very valuable tool for WYSIWYG layout (as opposed to estimating pixel sizes and locations which I should never do again). I survived my fear of Blend by staying away from animations (which I am not yet very familiar with) and sticking to basic layout.

Buttons / Effects

I wanted to come up with custom controls, buttons, for the playback controls. I had two options:

1. Use the controls that came with the SDK. I would have used the button control but I did not like the look of it and was not willing to modify it. The SDK provided a lot of reference code, though, to consider my next option.
2. Create a custom control.

I would have created a custom control but I did not have much time. Instead, I came up with a better idea for my purposes. Considering my lack of familiarity with the technology, I opted to build an extender for image objects instead. I created an 'ImageRollOverExtender' that add's a 'rollover' behavior to specified images by scaling the image by a specified amount (default is 1.2) on 'MouseEnter', then resetting it back (to scale 1) on 'MouseLeave'.

To implement a shadow on text, I used two textblocks that have different foreground colors and slightly offset from each other's location.

Making the Component Scriptable

One of the design elements I thought of carefully was the mechanism to populate the slideshow with pictures. A lot of the examples I've seen got data into the application by calling a web service. I thought that in my case, the slideshow would be most convenient to use if it could be affected directly by script as in:

<script language="javascript" type="text/javascript">
    function OnSilverlightLoaded(sender, args)
    {
        var slideShow = sender.Content.SlideShow;
        slideShow.Title = "Things";
        slideShow.AddPicture("album/Thing1.jpg");
        slideShow.AddPicture("album/Thing2.jpg");
        slideShow.AddPicture("album/Thing3.jpg");
        slideShow.AddPicture("album/Thing4.jpg");
        slideShow.AddPicture("album/Thing5.jpg");
        slideShow.Interval = 3000;
        slideShow.Start();
    }    
</script>

With this approach, I could easily include the slideshow into an ASP.NET page and generate a script for pictures that I want to include (the javascript function above is attached as an event handler to the Silverlight control's 'onLoad' event). In addition, this avoids the complication of having to come up with a schema for input and output, which is the case when implementing the web service approach. The Silverlight Framework provided an easy means of implementing this. It was a matter of decorating class members that I wanted to expose to the web page with a 'Scriptable' attribute and adding one line of code to register the class as a scriptable object (using 'WebApplication.Current.RegisterScriptableObject').

DEPLOYMENT

Deployment was a matter of doing an 'XCOPY' to the website, much like deploying an ASP.NET application. In general, you only need to copy the XAML files, web pages, and binaries (excluding code files such as '.cs' files). The important thing to do is to preserve the names and relative locations of files to avoid issues. I saw a post where you had to add MIME types to IIS to get application to work in terms of downloading to the client, but I did not have to do that.

CONCLUSION

Building this slideshow application has given me a taste of Silverlight application development and has exposed me to the potential of this new technology. I like it a lot. I have high hopes for this product considering what it already offers in its alpha state. It truly empowers web developers to create rich web applications more easily.

DOWNLOAD

You can get the source for the application at: http://aocampo.com/Downloads/SilverlightSlideShow.zip. I invoke my disclaimer.

posted @ Wednesday, August 15, 2007 2:38 AM