The Register ®

Biting the hand that feeds IT

The Register » Software » Applications »

Original URL: http://www.theregister.co.uk/2007/11/05/get_started_with_silverlight/

Get started with Silverlight

By Rob Blackwell
Published Monday 5th November 2007 23:03 GMT

Hands on There has been much hype and more than a little confusion during the last year or so surrounding Microsoft Silverlight.

Is it a Flash killer? Is it a designer tool or a developer tool? Surely it's for streaming videos? Is it a cross platform, browser-based version of Microsoft's Common Language Runtime (CLR)?

Microsoft will go some way towards clearing up the confusion this week during sessions for developers interested in using Silverlight to build rich internet applications (RIAs) attending the company's TechEd and DevConnections shows in Barcelona, Spain, and Las Vegas, USA.

Silverlight doesn't actually fit neatly into any existing category. Instead, it's an exciting and important new technology that could help to change the way we build Web applications.

Silverlight 1.0, released earlier this year offers only a JavaScript programming model. That will change with the next major version, Silverlight 1.1 that is currently in Alpha and will also feature Microsoft's CLR. This will bring the ability to program RIAs and media-based applications using .NET languages like C#, VisualBasic.NET and IronPython, while providing for smoother collaboration between developers and designers.

In this introductory piece I'll show how you build a simple Silverlight application. I'll take you through the basics of a "Hello World" application and give you enough information to start to explore the wide range of possibilities for yourself.

In a nutshell

Silverlight is a browser-based runtime environment for building rich media applications. It's a browser plug-in that effectively extends the browser's Document Object Model (DOM) by adding graphical, multimedia and presentation facilities that can be defined in eXtensible Application Markup Language (XAML). It can be scripted using JavaScript.

Silverlight works with Firefox and Safari on the Mac and Firefox and Internet Explorer on Windows. You don't need an ASP.NET application or a Windows Server to deliver a Silverlight application, meaning that PHP programmers using a Linux and Apache stack can just as easily incorporate Silverlight content.

The basics

Whichever platform you use to develop, you'll need to install the Silverlight 1.0 runtime for your browser. If you visit a site that uses Silverlight, and you don't yet have the Silverlight runtime installed, you'll be directed to an installation process. The runtime is surprisingly small (less than 2MB). The Silverlight home page (http://www.microsoft.com/silverlight/) lets you install the plug-in and see demonstrations. The Microsoft Silverlight 1.0 Software Development Kit (SDK) is available along with other resources for Windows from MSDN (http://go.microsoft.com/fwlink/?LinkID=88923).

A Silverlight application typically consists of XAML markup and JavaScript code. You also need an HTML file to call the application. We'll start with four files:

The HTML contains references to the JavaScript files, provides a DIV tag to host the Silverlight control and then calls the JavaScript code to start the Silverlight content:

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The Silverlight.js file is a standard file, distributed as part of the Microsoft Silverlight 1.0 SDK and widely available elsewhere on the Web.

The CreateSilverlight.js file defines the createSilverlight() function that is called from the HTML. It finds the DIV tag that will host the Silverlight control and provides the glue to load and start your XAML content (defined in Scene.xaml).

function createSilverlight()
{  
        Silverlight.createObjectEx({
                source: 'Scene.xaml',
                parentElement: document.getElementById('SilverlightPlugInHost'),
                id: 'SilverlightPlugIn',
                properties: {
                        width: '400',
                        height: '400',
                        background:'#ffffff',
            isWindowless: 'false',
                        version: '1.0'
                },
                events: {
                    onError: null,
                        onLoad: null
                },              
                context: null 
        });
}

All the magic happens in Scene.xaml – this is where we define our Hello World application.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

        <TextBlock FontFamily="Times New Roman" 
                           FontSize="70" 
                           FontStyle="Italic" 
                           Foreground="Red"   
                           Text="Hello World" />

</Canvas>

I'll explain the thinking behind XAML in a moment, but for now save these four files to a new directory and load the HTML into your browser. If you are running locally, your browser may warn you about Active X controls and block the content (this isn't the case when you run from a web server). Unblocking should give you a page like this:

XAML and Microsoft

XAML first appeared with the Windows Presentation Foundation (WPF) to describe the various graphical and multimedia assets along with their placement, characteristics and behaviours. XAML decouples presentation information from application logic allowing files to be shared between developers and designers. XAML is at the heart of the fledgling Microsoft Expression tools for design and will be prevalent in the forthcoming Visual Studio 2008.

A XAML file typically starts with a canvas, onto which you can place various graphical objects. In the example above, we added a TextBlock, but we could have equally used a Rectangle, Ellipse, Polygon or any one of a number of predefined elements. The MediaElement even provides access to video playback.

Animations can be specified by creating a Storyboard and a number of event triggers. All this can be extended by developers using JavaScript code.

Adding video

Now that we have a basic framework in place, we can start to experiment and add features just by changing the scene.xaml file.

You can easily plug in your own video content – here I've just taken one of the videos that come with Windows, renamed it to MyVideo.wmv and copied it into the project directory.

You can reference the video with a MediaElement and then use it in a VideoBrush.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        
        <MediaElement Name="Video" Source="MyVideo.wmv" Opacity="0"  />

        <TextBlock FontFamily="Times New Roman"
                           FontSize="70"
                           FontStyle="Italic"
                                FontWeight="Bold" 
                           Text="Hello World" >
                <TextBlock.Foreground>
                        <VideoBrush SourceName="Video" />
                </TextBlock.Foreground>
        </TextBlock>

</Canvas>


Now when you run the HTML the video content plays back, masked by the text.

Going with the flow

There's nothing to stop you taking this example, extending it and incorporating it into your own site, but that's only part of the Silverlight story – with the Silverlight Streaming Service (currently in Alpha), Microsoft is also offering to host your application. Currently, that's free of charge.

You can sign up for a Silverlight Streaming account here (http://silverlight.live.com), and host up to 4Gb of content including video. Individual videos can be no larger than 22Mb – equating to about 10 minutes at 300Kbps.

The current Silverlight Streaming service gives you access to a global, high performance, high availability content distribution network - the same content delivery network that recently carried the video clips and demonstrations for the launch of Microsoft's Halo 3.

You start by creating a manifest.xml file that tells the streaming service which XAML file to load and run:

<SilverlightApp>
        <version>1.0</version> 
        <source>Scene.xaml</source>
</SilverlightApp>

Next you create a ZIP file that includes this manifest file, the Scene.xaml file and the video MyVideo.wmv. You can also include JavaScript files that add functionality, but we'll keep this demonstration application simple.

On Windows, multiple select the files, right click and select Send To Compressed (zipped) folder - you can use any of the popular ZIP compression programmers, but you need to make sure that the manifest file appears in the top level root of the zip file - zipping the parent directory will not work.

Having signed up, you simply log in to Silverlight using a Windows Live ID - something you must use - and then click Manage Applications. Select Upload a Silverlight Application, specify a name and browse for your ZIP file. Click Upload. Depending on your connection speed, this may take a while. If all goes well, you will be presented with a page that allows you to test your application. You will also be given sample HTML and JavaScript that you can cut and paste into your own web site to host the application.

Next steps

To create more serious XAML applications you really need a good XML editor. The Microsoft Silverlight 1.0 SDK includes an add-in for Visual Studio 2005 that provides context-sensitive XAML editing and IntelliSense. The forthcoming Visual Studio 2008 will include a XAML based Graphical User Interface builder.

Expression Encoder is available as a free trial download and allows you to edit and manipulate video and audio clips. Available here (http://www.microsoft.com/expression/products/overview.aspx?key=encoder), Expression Encoder – part of the Expression suite - will generate XAML video player applications in a variety of styles for use with Silverlight Streaming with an appropriate manifest.xml file.

Conclusion

So to wrap up, Silverlight is a browser-based plug-in that extends programming in DOM using XAML to program video and graphics. Using XAML, you can construct a basic framework that's relatively simple to customize and extend while the Silverlight Streaming Service lets you harness Microsoft's content distribution network to deliver media on a global scale. These are early days for Silverlight, but the platform shows great promise. ®

Rob Blackwell is director of R&D for Active Web Solutions (http://www.aws.net) who worked with the Royal National Lifeboat Institute (RNLI) to build its award winning Sea Safety tracking system. You can keep up with Rob here (http://www.robblackwell.org.uk/).

© Copyright 2008