On-demand XAML

Download Silverlight XAML Only When You Need It


LANGUAGES: C# | XAML | JavaScript



On-demand XAML

Download Silverlight XAML Only When You Need It


By Dino Esposito


To build rich Internet-based applications, more programming power is needed than a classic Web API can commonly offer. A classic Web application is made of pages that, regardless of the server-side technology (ASP.NET, Java Server Pages, PHP), download HTML and JavaScript to the client. A rich Internet application is based on the idea that more work is done on the client or, at the very minimum, more advanced presentation features are implemented to improve the overall user experience.


Building a really rich Internet application with only HTML and JavaScript is challenging. Designed to be a simple document format, the HTML markup language is more used today as an application delivery format. To be up to the task, though, HTML lacks a number of important capabilities, such as rich layout, graphics, and media. Extending the HTML syntax is out of question because any such solution would work on a limited number of browsers, and wouldn t be any more widely used than Dynamic HTML 10 years ago. What else, then, can be done? A cross-browser, and a possibly cross-platform, plug-in is the only safe and viable way out. Enter Microsoft Silverlight.


Setting Up the Silverlight Plug-in

With Silverlight, you can host rich content in a Web page that is downloaded from the server. The Silverlight plug-in, not the browser, though, will parse this rich content to serve up a user interface that wouldn t be possible with plain HTML. The rich content is expressed using XAML, the markup language of Windows Presentation Foundation (WPF) applications in the .NET Framework 3.x.


There are two versions of Silverlight, one of which is currently in Beta. Version 1.0, released last September, supports only a small subset of the XAML language. The next version, instead, supports the full XAML syntax.


From the perspective of a Web page, the Silverlight plug-in is an tag that references an XAML document located on the host server. The XAML document is downloaded on the client and processed. Any resulting user interface is inserted in the browser s page using a windowed control. The Silverlight windowed control can appear everywhere in the page. Typically, you indicate a placeholder element for it when you instantiate the plug-in. Instantiation and initialization of the Silverlight plug-in occur via script. The following code snippet shows one possible way to reference Silverlight s object model, which can t be anything different from a JavaScript file (the Silverlight.js file must be available on the host server and is part of the Silverlight SDK):






If you re using it from within a non-ASP.NET AJAX page, you simply resort to a plain


As an alternative, you can invoke the JavaScript function from within the body of the placeholder element, as shown here:




The placeholder is the container of the XAML content and is normally a

or a tag, depending on the fact that you want it to be a distinct block of markup or flow with the rest of the page. Figure 1 shows the typical content of the Silverlight starter function, which is where you reference the XAML document to download.


function createSilverlightHost()


















Figure 1: The Silverlight starter method.


The first three arguments are worth a further look. The first argument is the URL to the XAML content to download. The second argument is the DOM reference to the placeholder where the Silverlight plug-in will be embedded. Finally, the third element is the ID of the windowed control that represents the plug-in in the page DOM.


Getting XAML Content

Figure 2 provides an overall view of the Silverlight architecture. The plug-in exposes an automation API for developers to set and change the URL to the XAML content to be parsed by the runtime. In addition, it includes a component for downloading content incrementally. This component is the Downloader object. Finally, Silverlight features a mechanism that exposes internal XAML objects to JavaScript for programmatic manipulation.


Figure 2: The Silverlight architecture.


The Silverlight plug-in is essential to process any XAML content within a Web browser. Current Web browsers, in fact, don t know how to handle an XAML document. What current browsers can do with direct XAML content is simply what they do for XML or RSS data feeds: represent the content in a graphical way using built-in templates. The Silverlight plug-in does much more and, more importantly, does exactly what you code.


You bind the plug-in to its XAML content by using the code in Figure 1. Alternatively, you can programmatically bind the plug-in to XAML content using the following script:


document.getElementById("SilverlightControl1").source =



The XAML content is downloaded to the client and cached as any other Web resource. If you use a static XAML document, you must have it deployed to the Web server. You also can point the plug-in to an HTTP handler that serves dynamically generated XAML content. Next, the plug-in parses the content and converts it into an object model. Finally, the content is rendered into the browser.


Inevitably, Silverlight 1.0 is compared to Adobe Flash. The bottom line is that there isn t much that Flash does that Silverlight can t do. Silverlight scores a number of winners (media capabilities, programmability, animation) and clearly loses the comparison on one point: adoption and cross-platform support. However, one of the points that is often made in favor of Flash is about the time it takes to display the content. Unlike Flash, Silverlight needs to download and parse the whole XAML content before it can start displaying something. Clearly, for large content on a slow network, this may become a serious issue.


XAML in Data Islands

The XAML document is downloaded on a separate roundtrip. This approach is beneficial because it allows you to cache the resource, which won t be downloaded on each visit to the page. However, in this case, you may pay the costs of delayed initialization in case of large XAML files. As an alternative, consider embedding the XAML content in the body of the Web page. This is not necessarily a better approach all the way, but it definitely represents an additional option to consider. You embed the XAML content in the Web page using a special


From the browser s perspective, this content is like a data island; as such, it is ignored during page rendering. How can you bind an XAML data island to the Silverlight plug-in? To begin, give the