.NET
Silverlight and the Rich Client Browser
By Dino Esposito, February 11, 2008
The hosting model of Microsoft Silverlight
Content for a Silverlight Plug-In
A Silverlight-enabled page is centered on a XAML file. XAML is a declarative XML-based language used in Windows Presentation Foundation (WPF) to define user-interface elements, data binding, events, and other features. The URL that the Silverlight plug-in points to must return XAML data. It can either be a static XAML file deployed to the Web server or a dynamic resource that returns a response of type text/xaml. For example, it could be an ASP.NET HTTP handler.
Depending on the version of Silverlight you support, you can have a XAML document with a different set of tags. Silverlight 1.0 supports a small subset of the whole XAML syntax limited to a few elements such as media, rectangle, canvas, textblock and a few more. Silverlight 2.0, which will be released in the course of 2008, is expected to support the full range of XAML elements thus making possible 100-percent WPF programming over the Web.
You can build the XAML source file using two primary development tools -- Expression Blend and/or Visual Studio 2008. Mostly targeted to designers, Expression Blend lets you create interactive UIs and media-rich experiences. With Visual Studio 2008, instead, developers can author XAML script by typing and make it even richer by adding both script and managed code. (Managed code, though, is only supported in Silverlight 2.0.)
The XAML content is downloaded to the client and cached as any other Web resource. Next, the plug-in parses the content and converts it into an object model. Finally, the content is rendered into the browser. The browser has no direct exposure to XAML. The browser simply points to a URL that serves a HTML page. The script in the page creates the <object> tag to reference the Silverlight plug-in. Finally, the plug-in takes care of downloading XAML and processing it. In Silverlight 2.0, the plug-in will also download client assemblies to back up the XAML.
The source XAML can also be embedded in the host page as inline text. You use a special <script> tag with a type of text/xaml. From the browser's perspective, this content is nothing more than a data island and, as such, it is blissfully ignored when it comes to render the page.
<script type="text/xaml" id="xamlContent">
<?xml version="1.0"?>
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
:
</Canvas>
</script>
How can you bind this chunk of XAML markup to the Silverlight plug-in? You give the <script> tag that contains the inline XAML a unique ID and use that ID prefixed by # as the URL of the document:
Silverlight.createObject("#xamlContent", ...);
It is key to note that the <script> tag with the inline XAML content must precede the HTML element that contains the Silverlight plug-in.
If any errors occur during the processing of the XAML content, the error event is fired. If the exception goes unhandled, then a system defined function kicks in and displays a client message box such as that in Figure 3.
Figure 3: The Silverlight's default error handler
If you want to write a custom error handler, then you create a JavaScript as below and bind it to the onError property you see in Listing One.
function onErrorOccurred(sender, args)
{
var msg = "Silverlight Error: \n\n";
msg += "Error Type: " + args.errorType + "\n";
msg += "Error Message: " + args.errorMessage + "\n";
msg += "Error Code: " + args.errorCode + "\n";
alert(msg);
}
The sender argument represents the object that the error occurred on. The args argument returns information about the error type, message, and code. If it were a parser error, then you find also information about the XAML element and position in the file. If it were a runtime error, then the argument also indicates the method where the error occurred.
Silverlight Pages and Applications
The Silverlight plug-in can be the only element contained in the host page or the page can contain other ASP.NET controls and HTML literals. If the Silverlight plug-in is the only element in the Web page, you're likely having a full-screen WPF application operating over the Web. It's still a sandboxed application, but with rich graphic and media capabilities. In Silverlight 1.0, you use JavaScript to add glue code and logic to make the various XAML elements interact. In Silverlight 2.0, in addition to JavaScript (it will actually be Managed JScript) you can also use any other supported .NET managed language such as C# and Visual Basic .NET.
The Silverlight plug-in, however, can also take a small portion of the Web page and be mixed up with classic HTML elements. In this case, you can arrange Silverlight-to-HTML communication and use JavaScript to dynamically edit the contents of the XAML document. If HTML access is enabled, you first retrieve the DOM element that represents the Silverlight plug-in and then use the Silverlight object model to access the content. Here's an example:
var plugin = document.getElementById("SilverlightControl1");
var textBlock = plugin.content.findName("status");
textBlock.text = "...";
The property content points to the root of the XAML document. The method findName lets you locate any XAML element with a x:Name property set to the specified string. Once you hold a reference to a XAML element, you proceed with the element specific object model to make changes. Finally, you should note that some XAML property may actually be attached properties and not just direct properties defined on the object. An attached property, for example, is the Left property that, defined on the Canvas element, is actually assigned by any XAML element child of the Canvas. Here's the syntax you use to programmatically read or write an attached property:
textBlock["Canvas.Left"] = 100;
You can also access properties via a pair of get/set methods, as below:
textBlock.setValue("Canvas.Left", 100);
In this case, the setValue method hides the difference between direct and attached properties.
Conclusion
Silverlight is the Web extension to WPF and this statement will be even truer with the advent of Silverlight 2.0 and the announced full support for managed languages on the client. Basically, it will be a revamped ActiveX platform, just done properly from the interoperability and security standpoint. Silverlight is a browser plug-in that constitute a separate download for all users. Users can choose to install Silverlight as they navigate to a page that requires it or in an offline manner. Unlike AJAX, Silverlight is an extension to the Web that is realized via a plug-in-the only possible way to add new features to existing browsers. For this reason, you still need a Web page to point users to and wrapping the plug-in. This article discussed the hosting model and possible ways for pages to interact with Silverlight-hosted documents.
