Tech Brief

Silverlight for Developers

Microsoft's lightweight platform for developing rich Internet apps.

It's been three months since Microsoft introduced Silverlight, the cross-browser, cross-platform plug-in for delivering the next generation of media experiences and rich interactive applications.

Formerly code-named "Windows Presentation Foundation/Everywhere" (WPF/E), Silverlight offers a flexible programming model that, like WPF, uses eXtensible Application Markup Language (XAML) as its foundation. Silverlight supports JavaScript, Visual Basic, C#, Python and Ruby, and integrates with existing Web applications. The plug-in allows delivery of high-quality video to all major browsers running on the Mac OS or Windows.

Why Silverlight?
When it comes to building user experience, graphic designers are a critical part of the workflow, but the process of moving from design to implementation often breaks because developers work with different technologies. Designers express their vision with one set of technologies, and developers have to interpret this vision as closely as possible, often compromising many of the design decisions. To this end, Microsoft has introduced XAML as the binding language between the two. XAML is an XML-based language that's used to define the overall user interface, including graphical elements, controls, animations and interactions. The designer can use the Microsoft Expression toolkits to produce their designs as XAML, and the developer can use this same code directly in an application.

Silverlight empowers the user experience by supporting rich media functionality such as the ability to play back 720p high-definition video with software rendering, or concurrent streams of video, along with native graphics and animation overlays.

How Does Silverlight Work?
At its core, Silverlight is a browser plug-in that renders XAML, exposing its internal Document Object Model (DOM) and event model. The browser instantiates the plug-in and, as part of this process, renders the XAML content. Events happening within this space are then captured and processed using JavaScript code (Silverlight 1.0 or 1.1) or .NET code (Silverlight 1.1).

Figure 1 shows how Silverlight 1.0, which is currently in beta, works in the browser. It's hosted by HTML and declared using the Silverlight JavaScript libraries. Developers can write application logic in JavaScript, which is parsed by the browser's JavaScript parser. So, for example, if Silverlight defines a video area on the page (using the control), and "Play," "Pause" and "Stop" buttons to control it, the programmer can simply write JavaScript in response to the "MouseLeftButtonDown" event on these buttons, calling the appropriate methods on the control.

Figure 1: Silverlight 1.0 in the Browser
[click image for larger view]
Figure 1: Silverlight 1.0 in the Browser

Figure 2 shows how Silverlight 1.1, now in alpha, enhances this model using a new "mini" Common Language Runtime (CLR) for .NET code. The programmer can develop the application logic using C#, Visual Basic or dynamic languages such as Ruby or Python, and compile this code into a DLL that gets downloaded along with the HTML, JavaScript and other browser elements.

Figure 2: Silverlight 1.1. in the Browser with the .NET Framework
[click image for larger view]
Figure 2: Silverlight 1.1. in the Browser
with the .NET Framework

In this scenario Silverlight 1.1. includes a version of the .NET Framework and the CLR, which provides an alternative programming interface for the application logic. This provides far greater performance than JavaScript as well as complex functionality such as Web services, networking, data access, a rich-control model and more. The .NET Framework is consistent across all platforms supported by Silverlight, including the Mac.

Silverlight 1.1 also provides an extensibility model for add-on controls. Many controls vendors are building add-ons for Silverlight to provide complex functionality such as charting, data-bound controls and more.

Running a Silverlight Video Player
Here’s a simple example of a XAML file that implements a video player, complete with play and pause buttons:

Silverlight XAML file

The C# code that implements the play and pause functionality for this page looks like this:
C# code

Figure 3 shows how this application will look at runtime.
Figure 3 shows how this application will look at runtime.
[click image for larger view]
Figure 3: Application at runtime.

Where to Learn More
The Silverlight Community site at http://silverlight.net contains samples, tutorials and quickstarts for Silverlight. You can find detailed developer information at http://.microsoft.com/silverlight and http://msdn.microsoft.com/silverlight.

Some great blogs from the development team behind Silverlight can be found at:

The Channel9 site for Silverlight can be found at http://channel9.msdn.com/tags/Silverlight.
comments powered by Disqus
Most   Popular
Upcoming Events

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.