As the Internet evolves, developers have access to many new technologies that can be used to build rich Web applications that enhance the overall end user experience. Adobe's Flash technology has been the dominant rich media format for years and AJAX is utilized quite heavily on many sites. Microsoft's release of Silverlight 1.0 throws a new technology player into the mix that provides a powerful and viable alternative for building rich Web-based applications that give end users a more "desktop like" experience.
Silverlight 1.0 provides a way to build rich and interactive Web applications that are based on XML and JavaScript technologies. Behind the scenes, Silverlight relies on an XML format called Extensible Application Markup Language (XAML) that can be used to build dynamic applications that stream media, animate and transform objects, and display data retrieved from back-end services. Because XAML is a text-based format, it can be dynamically created using any type of development platform ranging from Java to ASP.NET to Rails and can be created using any text editor.
To run Silverlight 1.0 applications end users need to install a plug-in that is a little over 1 MB in size. The installation is quick and easy and works in various browsers, including FireFox, Internet Explorer, and Safari. Silverlight also runs on multiple operating systems including Windows and Macintosh with support for Linux being provided by an open source group. Silverlight certainly doesn't have the installed base that Flash has, but its XML foundation makes it an attractive option for building rich and dynamic Web applications. The upcoming release of Silverlight 2.0 adds significant enhancements into the mix including the ability to run C# or VB.NET (to name just two languages) within the browser.
Using Silverlight 1.0 in a Web Page
Silverlight 1.0 relies on several key players that are used together to create an application. First, Microsoft has released a JavaScript file named "Silverlight.js" that handles detecting browsers and instantiating the Silverlight plug-in. Users who don't have the plug-in installed can be redirected to an installation page or perform an in place installation depending upon how the application is configured. Next, a custom file typically named "CreateSilverlight.js" is created to handle instantiating a Silverlight object instance and supply properties to the control such as height, width, and background color. Finally, a Web page is created to host the Silverlight control and reference the Silverlight.js and CreateSilverlight.js files mentioned earlier.
The Silverlight.js file supplied by Microsoft contains two different JavaScript functions that can be called to instantiate a Silverlight object and run it within a page. The first function is named createObject() and the second function is createObjectEx(). Both functions perform the same overall task although the way parameters are passed to the functions differs. The createObject() function accepts standard parameters (see Listing One) whereas createObjectEx() accepts a JavaScript Object Notation (JSON) object containing parameter data (see Listing Two). I generally prefer using createObjectEx() because JSON describes the parameter data better, leading to simplified maintenance down the road. Having said that, you can choose to call whichever function you like and still achieve the same end result.
function CreateSilverlight()
{
Silverlight.createObject(
'XAML/Default.xaml',
document.getElementById('divSilverlight'),
'slControl',
{
width: '500',
height: '500',
background:'#ffffffff',
isWindowless: 'false',
version: '1.0',
},
{
onLoad: null,
onError: null
},
null,
null
);
}
Although you can call createObject() or createObjectEx() from within the Web page that's hosting the Silverlight control, you'll normally make the calls within the custom CreateSilverlight.js file. Looking through Listing Two (since it clearly defines parameter names and values using JSON), you'll notice that several different parameters can be passed including the source XAML file path, parentElement in the Web page that contains the Silverlight control, id of the control, as well as various properties and events.
function CreateSilverlight()
{
Silverlight.createObjectEx({
source:'XAML/Default.xaml',
parentElement: document.getElementById('divSilverlight'),
id: 'slControl',
properties: {
width: '500',
height: '500',
background:'#ffffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: null
},
context: null
});
}
When calling createObject() or createObjectEx(), you'll always pass the path to the XAML file that defines the objects, animations, and transformations that the Silverlight control will display. You'll also pass the DOM element in the Web page that acts as the container for the control. In this example, the getElementById() function is called to locate a <div> tag with an id of divSilverlight. Next, you'll want to give the Silverlight control an id which can be useful when locating and manipulating the control using JavaScript. Finally, you'll want to provide values for several different Silverlight control properties and events such as height, width, isWindowless, and version. Events such as onError and onLoad can be assigned to JavaScript event handlers which is useful when you'd like to perform an action after the Silverlight control has completely loaded in the page or when an error occurs in the control.
In addition to standard properties such as height and width, you can also define the frame rate that should be used as the Silverlight control renders animations using the framerate property and control if in place installs occur by using the inplaceInstallPrompt property. The default installation option is to send the end user to Microsoft's Silverlight control download page. The Silverlight 1.0 SDK contains a complete listing of all parameters/properties and acceptable values.
Listing Three shows a Web page that references the Silverlight.js and CreateSilverlight.js files, defines a container for the Silverlight control, and calls a function named CreateSilverlight() that wraps the call to createObjectEx(). Once loaded, the page displays the Silverlight control, which in turn loads and displays the appropriate XAML file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Simple Silverlight Application</title>
<script type="text/javascript"
src="Scripts/Silverlight.js"></script>
<script type="text/javascript"
src="Scripts/CreateSilverlight.js"></script>
</head>
<body>
<form id="form1">
<div>
<div id="divSilverlight">
</div>
</div>
<script type="text/javascript">
CreateSilverlight();
</script>
</form>
</body>
</html>
Conclusion
Creating Silverlight applications involves several different technologies including XAML, JavaScript, and HTML as discussed in this article. Once you understand how the different technologies interact it's fairly straightforward to get started building Silverlight applications especially once you learn and master the XAML language. A complete Silverlight application that leverages the concepts in this article as well as several other technologies such as AJAX and Web Services is available here You can also learn more about Silverlight and .NET technologies through my blog.
