Wahlin on .NET

Using Microsoft's Silverlight Control in a Web Site

Dan Wahlin walks you through the steps and code for creating a Silverlight application from scratch.

• By Dan Wahlin
• 10/01/2007

Adding Silverlight to Web Pages
Although the Silverlight tools for Visual Studio .NET (available here) can be used to create Silverlight applications, they were still in beta at the time this article was written. As a result, I'm going to focus on the steps to create a Silverlight application from scratch. By doing that, you'll have a better understanding of what's involved and how the different pieces fit together. Here are the general steps I outlined in the previous article with additional details included where appropriate.

Step 1: Create the Web Application
Create a new ASP.NET Web site in Visual Studio .NET 2005 or Web Developer Express using the standard File New Web site ASP.NET Web Site option. Why should you create an ASP.NET Web site? You don't have to use ASP.NET at all since Silverlight can be hosted in a standard HTML page; however, by creating an ASP.NET Web site, you'll be able to leverage ASP.NET AJAX and other ASP.NET technologies if needed, which can be useful when a Silverlight application needs to retrieve data from Web services and other sources.

Step 2: Include Silverlight.js in the Web Application
Once you've created the Web site, add Microsoft's Silverlight.js file into your Web site. I normally place it within a folder named Scripts that contains all JavaScript files used in the Web site. Silverlight.js is a file supplied by Microsoft that prompts users to install Silverlight if they don't have it and loads the Silverlight control if they do. You can get the Silverlight.js file from the Silverlight SDK available from http://www.silverlight.net or from the code download available with this article.

Listing 1 shows a portion of code from Silverlight.js that determines whether the Silverlight control has been installed. Looking through the code, you can see that it works with Internet Explorer, Safari, Firefox and other browsers.

The Silverlight.js file also includes two key methods named createObject() and createObjectEx() that can be called to create an instance of the Silverlight control. Additional details about how the createObjectEx() method can be used are shown in a later step.

Step 3: Create the XAML File
Once the Silverlight.js file has been added to the Web site, create a XAML file that contains the shapes, media, animations or transformations that the application should perform. I'll provide additional details about the XAML language in future articles, but Listing 2 shows an example of a simple XAML file that writes out text to the Silverlight control.

Although I won't discuss it here, it's possible to embed the XAML directly in the page. I'll discuss that feature in a future article, although if you're interested in more details right now, you'll find coverage in the Silverlight 1.0 SDK.

Step 4: Define the Silverlight Container
Add an HTML or ASP.NET page into your Web site that will host the Silverlight control. This page will define a div element container where the Silverlight control will be placed in the page. The code below shows what the div should look like (the id attribute can be any value you'd like). You can apply CSS styles to the div element to affect positioning and other characteristics as needed.

<div id="divSilverlight"></div>

Step 5: Create the Silverlight Control Instance
In this final step, you'll reference the Silverlight.js file that you added to the Web site, and create a script that handles creating a Silverlight control instance. Creating the Silverlight control instance can be done in the page itself or in a separate .JS file. Microsoft examples normally create a separate file named CreateSilverlight.js but you can, of course, name the file anything you'd like.

You'll first need to reference the Silverlight.js file added to the Website in an earlier step. Do this by adding the standard script tag into the page and setting the src attribute to the Silverlight.js file's location (Listing 4 shows an example). Next, you'll need to create another JavaScript file named CreateSilverlight.js and add it to the Scripts folder. The code in this file instantiates the Silverlight control and references the XAML file that will be used by the control.

Listing 3 shows an example of the CreateSilverlight.js file. This code creates the Silverlight instance by calling the createObjectEx() method defined in Silverlight.js. The call to createObjectEx() handles passing several parameter values including the name of the XAML file to use, the div container element where the Silverlight control will be placed, the ID of the Silverlight control instance and several properties such as width, height and version. While this code could be embedded directly within the target page where the Silverlight control will be used, by placing it in a separate file you can use it in multiple pages

Once you've created the CreateSilverlight.js file and referenced it in the page where the Silverlight control will be hosted, you'll need to call the CreateSilverlight() method shown in Listing 3. This can be done in several different ways but is typically done by adding a script tag below the Silverlight container div defined earlier in Step 4. The code below shows an example of calling the CreateSilverlight() method defined in CreateSilverlight.js.

 
<script type="text/javascript">
  CreateSilverlight();
</script>

An example of a complete page that references the Silverlight.js and CreateSilverlight.js files in addition to defining a div container element is shown in Listing 4.

In the next article I'll provide additional details on the createSilverlight() and createSilverlightEx() methods provided in the Silverlight.js file and explain the differences between the two methods.

• Get Code Download