Home > Articles > Programming > ASP .NET

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Letting Silverlight.js Handle the Dirty Work

Embedding Silverlight content manually with an OBJECT or EMBED element has a number of issues. There's the concern about browser differences (although that can be avoided by always sticking to EMBED). Most importantly, it would be a fair amount of work to properly handle Silverlight detection. For example, although placing a download link as alternative content inside the OBJECT element (or using a NOEMBED element) seems simple enough, it doesn't behave appropriately if somebody has the wrong version of Silverlight installed. If a web page contains Silverlight content that uses future features unavailable in 1.0, viewers with 1.0 installed will not see the alternative content. Instead, the Silverlight 1.0 add-on will attempt to render the content and will fail.

Microsoft would be making a huge mistake if they asked everyone to do the appropriate version detection work on their own. The code involved is not straightforward, and version detection logic—for any software—is notorious for being done incorrectly. (As silly as it sounds, someone might write logic that behaves properly for version numbers such as 1.0 and 1.1, but would fail years later when version 4.0 appears.) Sure enough, the Silverlight Software Development Kit (Silverlight SDK) provides a JavaScript file called Silverlight.js that defines a simple JavaScript function handling everything from injecting an appropriate OBJECT or EMBED element into an HTML document to checking if the right version of Silverlight is installed, and then directing the viewer to the appropriate place to install it if it isn't. You should always use the functionality in Silverlight.js (discussed in this section) rather than directly using OBJECT or EMBED unless your content must appear in an environment where JavaScript is not allowed.

Silverlight.createObject

The simple function exposed by Silverlight.js is Silverlight.createObject. Here is how createObject could be called in JavaScript to generate an OBJECT/EMBED element as shown in Listings 1.1 and 1.3:

Silverlight.createObject(
  "Chapter1.xaml",                        // source XAML
  document.getElementById("placeholder"), // parent HTML element
  "silverlightControl",                  // id for the control
  // properties:
  { width: "390", height: "100", version: "1.0", background: "Yellow" },
  // events:
  {}
);

The first parameter becomes the source value for the dynamically generated OBJECT or EMBED element, and the third parameter becomes its id. The second parameter can be an existing HTML element to contain the new OBJECT or EMBED element. In this example, the standard document.getElementById function is used to retrieve an element from the page via its HTML id (placeholder), but you could also pass document.body if you want to append the new element directly to the page's body.

The fourth and fifth parameters to createObject are associative arrays of properties and events, respectively, supported by the Silverlight add-on. The properties array is a mix of values that either alter the logic inside Silverlight.js (such as version), are applied directly to the OBJECT or EMBED element (such as width and height), or are applied as PARAM element children when the OBJECT element is used (such as background). The various properties (and events) are covered in the upcoming "Understanding Your Hosting Options" section. The only new property shown here is version, which should simply be set to the version of Silverlight you're targeting (1.0).

Silverlight.createObjectEx

Silverlight.js defines a second function for embedding Silverlight content called Silverlight.createObjectEx. (The Ex suffix is an old Win32 convention that has mysteriously made its way into this file. It typically denotes a newer or "extra" version of a function.) The only difference between createObject and createObjectEx is that the latter accepts a single associative array parameter with all the same information. For example, here is the previous call to createObject translated into a call to createObjectEx:

Silverlight.createObjectEx(
  // Just one parameter, an array with 5 elements:
  {
    source: "Chapter1.xaml",
    parentElement: document.getElementById("placeholder"),
    id: "silverlightControl",
    properties:
      { width: "390", height: "100", version: "1.0", background: "Yellow" },
    events: {}
  }
);

The nice thing about createObjectEx is that calls to it are self-descriptive. You can clearly see what piece of data is the source, parentElement, and so on without the need for comments. For this reason, examples in this book use createObjectEx rather than createObject. The syntax for calling createObjectEx might look unusual, but it's basically JSON (JavaScript Object Notation), a popular data interchange format based on simple JavaScript constructs.

Putting It All Together

The createObject or createObjectEx function can be called from any JavaScript file or inline SCRIPT element, but Microsoft has published the following recommended approach for using these functions:

  1. Create a separate script file called CreateSilverlight.js (by convention).
  2. Define a parameterless function (called createSilverlight by convention) inside CreateSilverlight.js that makes the call to createObject or createObjectEx.
  3. Reference both Silverlight.js and CreateSilverlight.js from SCRIPT elements in your HTML document (usually inside the document's HEAD).
  4. Place an HTML element that you want to contain the Silverlight content, such as a DIV, inside the document and choose an id (used by your createSilverlight function).
  5. Call the parameterless function inside inline JavaScript in the HTML document.

Listings 1.4 and 1.5 follow this approach to get the same result pictured in Figures 1.1 and 1.3.

Listing 1.4. Embedding Silverlight Content Using the Recommended Silverlight.js Approach

<html>
  <head>
    <title>Great Estates</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="CreateSilverlight.js"></script>
  </head>
  <body style="background:blue">
    <!-- A Silverlight-based logo: -->
    <div id="placeholder">
      <script type="text/javascript">createSilverlight();</script>
    </div>
    <p style="font-family:Tahoma; color:white">
      An idyllic new community located high on a hill and offering captivating
      waterfront views. Tailored to meet both the needs of upsizing and
      downsizing buyers, Great Estates offers custom quality architecture and
      design at an affordable price point.
    </p>
  </body>
</html>

Listing 1.5. CreateSilverlight.js—The Recommended Script File with the Parameterless createSilverlight Function

function createSilverlight()
{
  Silverlight.createObjectEx(
    {
      source: "Chapter1.xaml",
      parentElement: document.getElementById("placeholder"),
      id: "silverlightControl",
      properties:
        { width: "390", height: "100", version: "1.0", background: "Yellow" },
      events: {}
    }
  );
}

  • + Share This
  • 🔖 Save To Your Account