Moonlighting Linux: the future of rich web apps

David M Williams
Wednesday, 07 May 2008 19:11

Opinion and Analysis

In our sample code, for instance, we find four files. The first is an application manifest, a DLL of our compiled project, and then two library DLLs, System.Windows.Controls.dll and System.Windows.Controls.Extended.dll. These are included because they implement the two controls used on the form. Any assemblies referenced by your project will also be included.

So far, you could be forgiven for thinking that what you’ve seen is nothing different to PHP or ASP.NET with the exception of the run-time being a plug-in rather than server-side scripting.

Here’s something cool however. Silverlight offers a lot more graphical tricks and features than the above languages which ultimately are restricted to what HTML can offer. One such facility is animation using a sequence-based storyboard. This technique will be familiar to anyone who has developed in Flash previously.

These storyboards are supported purely within XAML, although they can be bolstered by C# code. This essentially means that if you can find the right tools – like LunaEclipse – a talented designer can produce effective and stunning user interfaces without having to resort to raw markup tags or program code.

Here’s an example animation which illustrates several things. Insert this into Page.xaml and recompile and reload.

The first thing to note is that we use the tag <Canvas.Triggers> to say we want to handle an event within XAML. Previously, we responded to the button click in the code-behind file. That wasn’t necessary; we could also have handled it within XAML. There’s flexibility in how you design.

The next tag specifies the event we which to catch, namely when the Canvas – our drawing space – is loaded. The actions we wish to perform when the event fires follow next. We use two DoubleAnimation tags. This tag adjusts an object’s property slowly over time to reach a defined value.

At the end of the code segment, just before the closing </Canvas> tag notice we’ve defined an Ellipse with dimensions of 200x200 pixels. That’s what we’ll work on.

The first DoubleAnimation tag increases the width to 400 over 1 second. The second increases the height to 400 over 1 second. To make sure you see it, both tags also reverse the behaviour – so the ellipse snaps back into shape – and repeats over and over.

<Canvas x:Name=”LayoutRoot” Background=”White”>
  <Canvas.Triggers>
    <EventTrigger RoutedEvent=”Canvas.Loaded”>
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation To=”400” Storyboard.TargetProperty=”Ellipse.Width” Storyboard.TargetName=”ellipse” Duration=”0:0:1” RepeatBehavior=”Forever” AutoReverse=”True” />
            <DoubleAnimation To=”400” Storyboard.TargetProperty=”Ellipse.Height” Storyboard.TargetName=”ellipse” Duration=”0:0:1” RepeatBehavior=”Forever” AutoReverse=”True” />
         <Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
  </Canvas.Triggers>

  <Ellipse Width=”200” Height=”200” Fill=”Blue” x:Name=”ellipse” />
</Canvas>

Although simple, this demonstrates what Silverlight/Moonlight can offer, providing a powerful and functional user experience within a web browser. There’s much more which can be said but this should serve to introduce the concepts and reinforce yet again that no matter what is new and cool, you’ll find it in open source.