- Embedding the Silverlight Control Manually
- Letting Silverlight.js Handle the Dirty Work
- Understanding Your Hosting Options
- Interacting with the Silverlight Control Programmatically
- Conclusion
This chapter is from the book
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:
- Create a separate script file called CreateSilverlight.js (by convention).
- Define a parameterless function (called createSilverlight by convention) inside CreateSilverlight.js that makes the call to createObject or createObjectEx.
- Reference both Silverlight.js and CreateSilverlight.js from SCRIPT elements in your HTML document (usually inside the document's HEAD).
- 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).
- 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.
){kind=link}
){kind=link}
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: {}
}
);
}
Digging Deeper: Avoiding "Click to activate and use this control" in Internet Explorer
Depending on how ActiveX controls are used, current versions of Internet Explorer require viewers of a web page to "activate" it by clicking it (or pressing Enter or the spacebar when it has focus). Once activated, the control can accept keyboard and mouse input. Hovering over such controls shows a border and tooltip, as displayed in Figure 1.4.
)
Figure 1.4 The annoying "Click to activate and use this control" behavior in Internet Explorer.
This behavior is certainly annoying, but it is especially annoying for content that is supposed to blend seamlessly with HTML. For this example, why would a viewer of this page care about activating a logo? This anti-feature exists because of a recently settled patent case (Eolas v. Microsoft) that had required Microsoft to change Internet Explorer's handling of ActiveX controls.
Fortunately, there are techniques for avoiding the activation behavior, as covered in various articles (such as http://msdn2.microsoft.com/en-us/library/ms537508.aspx). Even better, by following the recommended approach of using Silverlight.js and CreateSilverlight.js, you don't need to do anything further. This is why viewing the pages from Listings 1.1 and 1.3 gives the "Click to activate and use this control" prompt, but the page from Listing 1.4 (and the remaining examples in this book) does not.