My First Silverlight App - Lessons Learnt
So today I have been working on my first production Silverlight application, if that is what you would call it. It will be used as a simple promotional device on the Isle of Man TT site, promoting the TT Live! service for 2008. You can see the page in action at:
http://www.iomtt.com/TT-Live.aspx
(Note: this page will only be active until 6th June 2008, which is the end of the TT period.)
For the benefit of Googlers, I've prepared some lessons learnt and observations made.
Images
Images within the Silverlight control can only be JPEG or PNG format, otherwise you get a AG_E_NOT_FOUND error. Found this out only within the Silverlight Forums. Could have pointed that out on the videos, guys!
Timing within KeyFrames
When working with KeyFrames, the KeyTime is relative to the parent Animation. For example:
<DoubleAnimationUsingKeyFrames BeginTime="00:00:15" Storyboard.TargetName="Frame4WebCams" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:05" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:05.2000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
JavaScript integration is ace!
I normally despise JavaScript, partly because there are so many pages out there on the web with JavaScript errors it is disheartening to want to inflict more bugs and unreliable scripts onto users.
I do like the way that functionality has been split out into the JavaScript element. This is in contrast to Flash, which uses a single file for both presentation and functionality. This split of functionality means that the host web page and server can interact with the control in a more logical fashion - particularly if you're a .NET developer. It also helps me improve my JavaScript!
One way I used JavaScript was to create a Replay button at the end of my little presentation.
I have a canvas for my Replay button:
<Canvas x:Name="BuyButton" Canvas.Top="145" Canvas.Left="259" Canvas.ZIndex="50"
MouseLeftButtonDown="onMouseClick">
Which calls my event handler in BLOCKED SCRIPT
function Replay_onMouseClick(sender, mouseEventArgs)
{
this.storyBoard=sender.findName("Frame1Storyboard");
this.storyBoard.begin();
}
But what I found super sexy is that I can find the storyboard that is in charge of my animation from the sender object, and just tell it to start. I found this thanks to the new JavaScript debugging in Visual Studio 2008, by the way. Not through the inspection tools, but by banging in random command lines in the Immediate window. I got lucky.
Development Experience
There is a lot of work Microsoft need to do to make the development experience more intuitive and cohesive. For instance, I have Visual Studio 2005, 2008 and Expression Studio February 2008 Beta. My VS 2005 supports Silverlight - to a point. My VS 2008 for some reason doesn't. My Expression February 2008 Beta works much better than previous versions. Overall, I end up being quite confused about what should be done where.
I'm also trying to learn the Expression product suite and bringing what I know from Flash I think I am getting to grips with it. I cannot see any of our designers using their tools, though, as I think Microsoft would wish. From what I can tell from their marketing, they are hoping for designers to generate the UI or visual components in Expression/XAML and pass the solution/projects on to the developers. These files can then be sent back and forth between departments as needed. I am not convinced this will work, however. Quite apart from anything, don't designers live in the Mac camp, beyond the ocean? ("There be dragons there")
Also, whilst the XAML produced by hand and by the tools is clean enough and well-structured, it is obviously structured according to the requirements of the presentation, rather than semantically. For example, I would have liked to highlight which TextBlocks related to headings, either by a Heading1TextBlock (being equivalent to an H1 tag) or by attribute, eg. <TextBlock HeadingLevel="1" />. This more open manner of managing content encapsulated within a Silverlight control or component does allow search engines access for indexing (unlike Flash), but doesn't give them the full semantic experience that is so important in effective indexing of content.
I must say the QuickStart videos at www.silverlight.net were essential and very useful in getting this far. If only my shouting at the presenters would have given me the answers I needed.
Don't think you can modify your XAML in Expression Blend and F5 to refresh your browser output. Doesn't work, resulting in repeated Ctrl+Refreshes to clear caches, etc. Took me a while to figure that out, too. (Visual Studio 'locks' the file, even when in "pause" mode). You do have to recompile each time.
I have found the optimal experience is having the following open and switching between the three:
- Microsoft Expression Blend - for the visual development of the XAML elements
- Microsoft Visual Studio 2008 (editing using the XAML editor, though I don't get a preview) - for the down and dirty XML tweaking and JavaScript hacking
- Adobe PhotoShop - for the graphics
One more thing; why does Expression Blend open Microsoft Word for an HTML editor by default? When will Microsoft dump their insistence that people want to develop web pages in Word, and generating the crap output that it generates? I would think any developer worth his salt would jump around in frustration if a designer modified something in the HTML editor in MS Word, wrecking their beautiful XHTML mark-up! (Okay, maybe not that beautiful).