Getting Started with Silverlight

Silverlight Technical Articles

Getting Started with Silverlight

 

Laurence Moroney
Microsoft Corporation

Updated April 30, 2007

Applies to:
   Microsoft Silverlight (formerly known as code name "WPF/E")
   Microsoft Expression Blend

Summary: This white paper provides a high-level overview into Silverlight and how it fits into the development stack for the next generation of Web applications. (8 printed pages)

Contents

What Is Silverlight?
The Evolution of Web Development: Moving to Web.Next
Building a Simple Silverlight Application
Create the UI for a Video Player
Understanding the Silverlight Invocation
Conclusion

What Is Silverlight?

Silverlight is a new Web presentation technology that is created to run on a variety of platforms. It enables the creation of rich, visually stunning and interactive experiences that can run everywhere: within browsers and on multiple devices and desktop operating systems (such as the Apple Macintosh). In consistency with WPF (Windows Presentation Foundation), the presentation technology in Microsoft .NET Framework 3.0 (the Windows programming infrastructure), XAML (eXtensible Application Markup Language) is the foundation of the Silverlight presentation capability.

This white paper will step you through the basics of Silverlight and how you can use the Microsoft stack of tools, including Microsoft Expression Blend, Microsoft Visual Studio 2005, and XAML to build rich graphical sites. First, let's take a primer on the background leading up to Silverlight and where it stands on the development landscape.

The Evolution of Web Development: Moving to Web.Next

When Tim Berners-Lee at CERN invented the modern Web, it was intended as a system that allowed static documents to be stored and linked on a network-based system. Over the years, innovation grew, with the logical next step being "active" documents that are generated at the time they are requested with time-specific or user-specific information. Technologies such as CGI empowered this. Over time, the ability to generate documents on the Web became paramount, and the technology evolved through CGI, Java, ASP, and then ASP.NET.

ASP.NET provided a milestone in the ability for a developer to develop quality Web applications quickly using a server-development paradigm and best-of-breed tools from the Visual Studio line of products.

A great barrier in Web applications proved to be the user experience, where technical constraints prevented Web applications from delivering the same richness of user experience that a client application with local data would provide.

The XMLHttpRequest object, released by Microsoft as part of Internet Explorer 5 in 2000, became the foundation of Asynchronous JavaScript and XML (AJAX) technology that allowed Web applications to provide a more dynamic response to user input, refreshing small parts of a Web page without requiring a complete reload of content. Innovative solutions built on AJAX, such as Windows Live Local maps, took Web applications a step further in being able to have a client-like user experience.

Silverlight is the next step in evolving the potential user-experience richness in which application developers and designers can present to their clients. It does this by allowing designers to express their creativity and save their work in a format that will work directly on the Web. In the past, a designer would design a Web site and a user experience using tools that provide a rich output, but the developer would have to meet the constraints of the Web platform in being able to deliver them. In the Silverlight model, designers can build their desired user experience and express this as XAML. The XAML can then be incorporated directly by a developer into a Web page using the Silverlight runtime. Thus, the two can work more closely than ever before to provide a rich client user experience.

As XAML is XML, it is text-based, providing a firewall-friendly, easy-to-inspect description of the rich contents. While other technologies—such as Java Applets, ActiveX, and Flash—exist that can be used to deploy richer content than DHTML/CSS/JavaScript, they all send binary content to the browser. This is difficult to audit for security, not to mention difficult to update, as any changes require the entire application to be reinstalled, which is not a user-friendly experience and can lead to stagnation in pages. When Silverlight is used, and a change is needed to the rich content, a new XAML file is generated server-side. The next time the user browses to the page, this XAML is downloaded, and the experience is updated without any reinstallation.

At the heart of Silverlight is the browser-enhancement module that renders XAML and draws the resulting graphics on the browser surface. It is a small download (under 2 MB) that can be installed when the user hits the site containing the Silverlight content. This module exposes the underlying framework of the XAML page to JavaScript developers, so interaction with the content on the page level becomes possible, and thus the developer can, for example, write event handlers, or manipulate the XAML page contents using JavaScript code.

But, enough with the theory! Let's get hands-on and take a look at our first Silverlight project.

Building a Simple Silverlight Application

Let's start by taking a look at the Microsoft Expression Blend to create a very simple application in XAML for Silverlight. To create a Silverlight application in Blend, select File->New project and the New Project dialog box opens. See Figure 1.

Figure 1. Creating a new Silverlight project with Expression Blend

Select OK and a new project will be created. This project will contain a default HTML page, some JavaScript code-behind this page, a XAML document, a JavaScript code behind for the XAML document and Silverlight.js.

Silverlight.js contains the code for downloading and instantiating the Silverlight control. This is provided to you as part of the Silverlight SDK.

Default.html is a standard HTML Web page. This contains three JavaScript script references, pointing to Silverlight.js, Default.html.js (which contains the application specific code for instantiating Silverlight), and Scene.xaml.js (which contains the event handlers for application events defined in the XAML).

This is designed to separate the page (default.html), from the instantiation logic (default.html.js), and the design (Scene.xaml), and the event code (Scene.xaml.js). But, enough with the theory, let’s get down to developing a simple application.

Create the UI for a Video Player

Add a video file to your project. To do this, right-click the project file in the Project Files window on the top right of the screen, and select Add Existing Item... .

When you select a WMV file, and add it to your project, the file will appear in the Project Explorer, and, a Media element will be added to your scene.

Figure 2. Adding a Media Element to the XAML Scene

You can now run your project, and the browser will launch and play back your video!

You can stop the automatic playback of the video by editing the XAML. You will see to the right of the XAML designer that there are two tabs: Design and XAML. Select the XAML tab and the XAML Editor will open. You can see this in Figure 3. Use this to edit the XAML text for the MediaElement to add an attribute AutoPlay=False.

Figure 3. Editing the XAML in the XAML Editor

Now if you run the application, you’ll see the Silverlight content rendering the first frame of your video, but it will not play it.

Adding Controls to Your Video Player

Add two text blocks to the application, and give them the text Play and Stop and the names txtPlay and txtStop, respectively. When you are done, the XAML will look something like this:

Copy Code

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="640" Height="480"
   Background="White"
   >
   
<MediaElement AutoPlay="False" x:Name="Movie_wmv" Width="320" Height="240" Canvas.Left="128" Canvas.Top="56" Source="Movie.wmv" Stretch="Fill"/>
   
<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" Canvas.Top="336" Text="Play" TextWrapping="Wrap"/>

   <TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" Canvas.Top="368" Text="Stop" TextWrapping="Wrap"/>
</Canvas>

Next, add the event handler declaration to the XAML for the text blocks. You do this by declaring the handler for a mouse-click by using the MouseLeftButtonDown attribute. On the txtPlay text block, add an event handler to DoPlay, and on the txtStop text block, add an event handler to DoStop. When you are done, the XAML will look like this:

Copy Code

<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" 
      Canvas.Top="336" Text="Play" TextWrapping="Wrap"  
      MouseLeftButtonDown="javascript:DoPlay"/>

<TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" 
      Canvas.Top="368" Text="Stop" TextWrapping="Wrap" 
      MouseLeftButtonDown="javascript:DoStop"/>

Now when the user clicks on one of the text blocks, it will raise an event that you can catch and process from a JavaScript function.

Handling the Events in JavaScript

The template created a Scene.xaml.js that can be used to capture and process user events in JavaScript. You specified DoPlay and DoStop event handlers within the XAML, so you should implement them here. The code to do this is shown here:

Copy Code

function DoPlay(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("Movie_wmv");
   theMedia.Play();
}

function DoStop(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("Movie_wmv");
   theMedia.Stop();
}

In this case the Silverlight Control is called SilverlightControl, and the JavaScript var called theHost references it. This is then used to find the Media element, which in this case is called Movie_wmv. When you added the movie to the project, this media element was created for you, and the name was based on the name of the movie. So if you have a movie called Movie.wmv, this will be called Movie_wmv. If you used a different movie, then the control would be called something else.

The media element has Play and Stop methods that can then be used to start or stop the media from playing back.

Now that we have a reference to the media element, we can call those methods, and the movie will stop or start. You can see this in action in Figure 4.

Figure 4. Running the application

You’ve now built your first Silverlight application! For more resources on Silverlight, check out the new Silverlight Developer Center and http://www.silverlight.net/.

Understanding the Silverlight Invocation

The HTML page makes a call to createSilverlight(), which is present in the code-behind page Default.html.js.

Copy Code

Sys.Silverlight.createObjectEx({
      source: "Scene.xaml",
      parentElement: document.getElementById("SilverlightControlHost"),
      id: "SilverlightControl",
      properties: {
          "",
         height: "",
         version: "0.9"
      },
      events: {
         onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)
      }
   }); 

This takes a number of properties, including those used to define the Xaml to render, the appearance of the Silverlight control, and the onLoad and onError event handlers.

The source: property is used to define the XAML that you want the Silverlight control to render. This can be an external file (as in this case) or a named <script> tag on the page that contains XAML.

When you place a Silverlight control on a page, it should be placed within a named <DIV>. The parentElement: property should be filled in with the name of this <DIV>.

The ID of the control is specified with the id: property.

The physical attributes of the control, such as height, width, and version are set using an array loaded into the properties: property. For the full set of properties, see the Silverlight SDK documentation.

Conclusion

In this white paper, you were given a high-level overview of Microsoft Silverlight and how it fits into the development stack for the next generation of Web applications. You saw how XAML is used as the glue that binds the specifications of the designer with the tools of the developer and the delivery to the user. You took a look at Expression Blend and how it can be used to define UI for your Web page, and how these can be programmed against using JavaScript.

What you did in this article was only scratching the surface of what is possible with Silverlight. There is a wealth of functionality within this technology that you can use to start building the next Web today. It should be a fun ride; so, hop aboard!