Silverlight doesn't require any JavaScript
Summary
It's easier to understand Silverlight when you understand that, at its heart, it's a simple browser plug-in. JavaScript is extremely useful for browser detection, and it's the only way to interact with Silverlight 1.0, but JavaScript not at all required to display a Silverlight control with XAML content.
Note: I'm not saying that you shouldn't use Silverlight.js and CreateSilverlight.js to instantiate a Silverlight object - you most definitely should. Rather, for the purpose of understanding what Silverlight is and how it works, I'm illustrating that you can create and use a Silverlight control without any JavaScript at all.
JavaScript - it's so hot these days...
When you start looking at Silverlight code, the first thing you'll probably notice is the JavaScript and JavaScript includes. There's a good article on MSDN which describes Silverlight.js and CreateSilverlight.js; here's my over-simplification:
- Silverlight.js has one job: safely creates Silverlight plugins when told. It exposes a methods - Silverlight.createObject() 1 - which handles the creation of a Silverlight plugin. It works cross-browser, detects if the version of Silverlight that you're requiring is installed, and can show an install prompt if the browser is supported, but Silverlight isn't installed. Silverlight.js doesn't do anything by itself; someone needs to call createObject(). And that's where CreateSilverlight.js comes into play.
- CreateSilverlight.js instantiates your control. It sets some properties and calls the createObject() method in Silverlight.js. That's it. If you're using a tool or a designer, this file will be created for you. Otherwise, you can cook it up yourself - it's a single function which calls Silverlight.createObject().2
It's a good system, but it's important to understand that...
You don't have to use a line of JavaScript to display Silverlight content in a page.
If you have Silverlight installed an you're running either IE7 or Firefox 2, save the following text to a file with an .htm extension and open it in either browser.
<html> <head> </head> <body> <script type="text/xaml" id="xamlContent"> <?xml version="1.0"?> <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Rectangle Height="200" Width="200" Stroke="Black" Fill="Wheat" StrokeThickness="5" RadiusX="10.0" RadiusY="10.0"/> <TextBlock Canvas.Top="100" Canvas.Left="10"> No Javascript, wheeeee!!! </TextBlock> </Canvas> </script> <div id="controlHost"> <object id="silverlightControl" type="application/x-silverlight" height="400" width="400"> <param name="Source" value="#xamlContent" /> </object> </div> </body> </html>
You didn't do it, did you? Why not? I made it so incredibly easy! Fine, here's what it looks like in IE7:
So, at its heart, Silverlight is a browser plug-in which renders XAML, and that doesn't require JavaScript.
Aside: don't get too excited about that inline XAML just yet...
There are all kinds of interesting possibilities in using inline XAML, but unfortunately there's a bit of a showstopper3. Firefox has an open bug - Bug 356095 (NPAPI GetProperty grabs garbage depending on <!DOCTYPE> statement in HTML) which prevents it from using inline XAML if a DOCTYPE is defined. And if you don't have a DOCTYPE defined, your page gets rendered in "quirks mode", which basically means the HTML renderer drops back to IE4 / Netscape 4 rendering.
So, what's with the Silverlight JavaScript, then?
It's good stuff. It's doing important work - it's a safe, consistent, cross browser approach to loading a plugin - something I've advocated before with FlashObject for Flash. We've talked about why you don't technically need JavaScript to embed Silverlight controls in your page, but practically dictates that you should use it. I recommend this article for further information on using CreateSilverlight.js and Silverlight.js, mostly because it has this awesome diagram:
.png)
1 There's another method, createObjectEx(), which does exactly the same thing as createObject() does, it just allows you to pass in your parameters in JSON syntax. Here's the entire listing for CreateObjectEx() as shipped in the standard Silverlight.js file:
Silverlight.createObjectEx=function(b) { var a=b,c=Silverlight.createObject(a.source,a.parentElement,a.id,a.properties,a.events,a.initParams,a.context); if(a.parentElement==null)return c };
If you're using the hosted version of Silverlight.js for Silverlight Streaming, createObjectEx() adds in support for the streaming:/ pseudo-protocol. That's fancy-talk for saying it can translate URL's from streaming:/16445/TicTacToe syntax to a real URL on the Silverlight Live Streaming Service content distribution network.
2 Example:
function createSilverlight() { Silverlight.createObject( "TicTacToe.xaml", // Source property value. parentElement, // DOM reference to hosting DIV tag. "SilverlightElement", // Unique plug-in ID value. { // Plug-in properties. width:'1024', // Width of rectangular region of plug-in in pixels. height:'800', // Height of rectangular region of plug-in in pixels. inplaceInstallPrompt:false, // Determines whether to display in-place install prompt if invalid version is detected. background:'white', // Background color of plug-in. isWindowless:'false', // Determines whether to display plug-in in windowless mode. framerate:'24', // MaxFrameRate property value. version:'1.0' // Silverlight version. }, { onError:null, // OnError property value -- event-handler function name. onLoad:null // OnLoad property value -- event-handler function name. }, null, // initParams -- user-settable string for information passing. null); // Context value -- passed to Silverlight.js onLoad event handlers. }
3 Thanks, Will, for the heads up on this one.