Back to Article List

Originally published November 2007 [ Publisher Link ]

Silverlight : The rich client for the browser

Web services data is readily available to numerous tiers in the enterprise, ranging from user desktop's to serverside applications making the most of SOA tenets. However, each of these tiers has certain characteristics that influence the way in which data is consumed and used to solve particular business problems. In the following article we will explore one particular bearer among these tiers which has gained enormous popularity in recent times: browsers, and the manner in which Silverlight stands to enhance this particular Web services client.

The attention browsers have gotten in the enterprise recently has been mainly on the back of Ajax, a mechanism that allows a browser to access data asynchronously and lift the often associated clunkiness and unresponsiveness of Web-based applications. But interesting as this latest movement has been, the nature of Ajax's data transfer is bound to that of either XML -- which is the X in the Ajax acronym -- or JSON -- a JavaScript based notation -- both of which have text-type payloads and can be interpreted by default in any browser.

While there is nothing wrong with these latter formats per se, there is a limitation in the nature of instructions these text-based payloads can perform on account of a browser's typical composition, which takes us to Silverlight , a browser plug-in designed to enrich the type of data which can be interpreted and executed in a browser environment. Of course, if you've been designing on the Web for a while you'll realize there are already a plethora of plug-ins available for such data enrichment -- such as Flash and Java -- but don't despair, there is something new under the hood as we will explore in the remainder of this article.

It can be argued that the first benefit Silverlight inherently has, comes not so much from its technical merits as it does from originating within the same company that has the lion's share in the browser market: Microsoft, with Internet Explorer. As much as the browser wars are over and some developers abhor non-technical issues, having the capability to flick a switch -- read automatic or critical update patch -- and have such a plug-in installed on a hefty user base is a powerful process, one which can tip the balance in favor of certain development techniques very quickly. So what has been an uphill battle now dominated by the rich Flash and Java browser plug-ins can fast become level ground even for a relative newcomer like Silverlight, given its creator's leverage.

On the technical front, Silverlight brings the addition of XAML (eXtensible Application Markup Language) to the browser. As its name implies, XAML is a markup language which provides a richer set of elements than the classical HTML markup used in browsers, with tasks ranging from 2-D animations, vector graphics and high fidelity audio to video manipulation. It's a new mixed bag of features with which application developers can work. Figure 1.1 illustrates a snapshot of an application using Silverlight, followed by its backing XAML structure.

Figure 1.1 Silverlight screen-shot

The previous images display an in-line movie with four colored controls used to dictate its behavior, the XAML structure that makes this display possible is illustrated in Listing 1.1

<!-- Source : Silverlight website quickstart  -->
<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Loaded="canvas_loaded">
    
  <MediaElement x:Name="media" 
     Source="thebutterfly.wmv" 
     Width="300" Height="300" />

  <Canvas x:Name="buttonPanel">

  
    <!-- Stops media playback.-->    
    <Canvas MouseLeftButtonDown="media_stop" 
       Canvas.Left="10" Canvas.Top="265">
      <Rectangle Stroke="Black" 
         Height="30" Width="55" RadiusX="5" RadiusY="5">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Orange" Offset="0.0" />

            <GradientStop Color="Red" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>       
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
    </Canvas>

  
    <!-- Pauses media playback. -->
    <Canvas MouseLeftButtonDown="media_pause" 
       Canvas.Left="70" Canvas.Top="265">
      <Rectangle Stroke="Black" 
         Height="30" Width="55" RadiusX="5" RadiusY="5">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Yellow" Offset="0.0" />

            <GradientStop Color="Orange" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>       
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
    </Canvas>

  
    <!-- Begins media playback. -->
    <Canvas MouseLeftButtonDown="media_begin" 
       Canvas.Left="130" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="55">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="LimeGreen" Offset="0.0" />

            <GradientStop Color="Green" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> 
    </Canvas>

  
    <!-- Switches to full screen mode. -->
    <Canvas MouseLeftButtonDown="toggle_fullScreen" 
      Canvas.Left="190" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="85">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Gray" Offset="0.0" />

            <GradientStop Color="Black" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5"
        Foreground="White" >full screen</TextBlock> 
    </Canvas>  
  
  </Canvas>

     
</Canvas>

Notice the extensive use of markup tags used to define everything from the movie source to the control's layout. Additionally, XAML in also used in combination with JavaScript to detect a users actions in the application, listing 1.2 illustrates this code.

// Source : Silverlight website quickstart
function media_stop(sender, args) {

    sender.findName("media").stop();
}

function media_pause(sender, args) {
    
    sender.findName("media").pause();
}

function media_begin(sender, args) {
    
    sender.findName("media").play();
}


function canvas_loaded(sender, args)
{
  
    var plugin = sender.getHost();
    plugin.content.onfullScreenChange = onFullScreenChanged;
    


}

function toggle_fullScreen(sender, args)
{
    var silverlightPlugin = sender.getHost();
    silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;  
   
}

function onFullScreenChanged(sender, args)
{

  
    var silverlightPlugin = sender.getHost();
    var buttonPanel = sender.findName("buttonPanel");
    
    if (silverlightPlugin.content.fullScreen == true)
    {
      buttonPanel.opacity = 0;
    }

    else 
    {
      buttonPanel.opacity = 1;
    }
    
    var mediaPlayer = sender.findName("media");
    mediaPlayer.width = silverlightPlugin.content.actualWidth;
    mediaPlayer.height = silverlightPlugin.content.actualHeight;
     

}

What's particularly special about these JavaScript functions, besides being associated with XAML elements, is that they call behavioral Silverlight functions, which in this case are used to expand the movie's layout to fit the whole screen and start, stop or pause it. While this is a very basic sample, it exemplifies how richer actions can be embedded directly in a Web-based applications using Silverlight.

Additionally, and proving to have a far wider scope than the current rich Web application languages, XAML is also the same building-block for WPF (Windows Presentation Foundation), which is the new generation technology on which desktop applications will be built on using the Microsoft product line, something which adds incremental traction to the adoption of Silverlight since XAML knowledge can equally be leveraged across both the desktop and browser.

But turning our attention to the Web services arena, Silverlight is also tightly knit to WCF (Windows Communication Foundation) or more specifically to one of its subsets tackling RESTful Web service design: Astoria, which we covered in an earlier column: Astoria: REST Web services extensions from Microsoft.

In this sense, not only can Silverlight play and manipulate the typical payloads -- XML and JSON -- associated with Ajax service requests along with XAML markup, it can also be enabled to reference service DLLs residing on the serverside tier just like you would with any other .NET application, but in this case straight from a browser environment, something analogous to the remoting mechanisms used in Flash and Java applets.

While its still early for Silverlight as it attempts to navigate uncharted territory for Microsoft in a rich Web-application market already dominated by other companies, its position alongside the wider encompassing .NET platform presents an interesting turn of events, one that cannot be underestimated given the already strong presence of WCF, BizTalk server and other initiatives in the Microsoft product line that revolve around services. Since your Web services will eventually be consumed by applications bound to a browser, Silverlight may prove to be an important piece in providing more eye candy to your end users.

Originally published November 2007 [ Publisher Link ]

Back to Article List