Silverlight 1.0 relies on JavaScript to provide much of the user interaction behaviour so I decided to have a play with it today. I admit that I’m more interested in 1.1 and the .net support but I thought it would be good practice to implement something for the current version. I was supplied with the XAML page containing a number of similar events and storyboards. I quickly spotted that they only differed by the image they animated and the contents of a text control. I wrote a quick JavaScript class and an array with an element per storyboard, with this I only need one canvas which I can manipulate with the attributes of the currently selected class. It worked well but I didn’t spot that not all of the images had the same dimensions. I was tempted to extend my storyboard class with size attributes for the image but then I realised that this flew in the face of the semantic XAML so I changed my design. Rather than have the JavaScript supply the attributes (file name, width, height) of an image it is much better to keep that information in the XAML. However, I don’t want (or need) all the storyboards and canvas’ to be duplicated. My design is to have one invisible canvas containing all the image elements needed. The JavaScript then examines the image element to provide the necessary attributes to change the active canvas. The major drawback to this design is there is a loss of semantics, since I now have a fake canvas with a load of images.
The reason for this post is to point out that writing JavaScript for Silverlight can be tricky. A balance needs to be struck between efficient and user friendly code and the semantic support that XAML offers.
IT Bytes 