Silverlight doesn't require any JavaScript - Jon Galloway

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:

Silverlight with inline XAML

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:

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.

Published Wednesday, October 31, 2007 2:30 AM by Jon Galloway

Comments

# re: Silverlight doesn't require any JavaScript

"You don't have to use a line of JavaScript to display Silverlight content in a page."

It is not professional to let activating Activx browser especially for an application that requires action users.

Wednesday, October 31, 2007 7:04 AM by Guillaume

# re: Silverlight doesn't require any JavaScript

Thanks, Jon!  Sure feels good to wake up and learn something.

Wednesday, October 31, 2007 9:12 AM by Josh Stodola

# re: Silverlight doesn't require any JavaScript

@Guillaume - Yes, I agree with you. I'm wondering if you read the post beyond the title. The third sentence says this:

"Note: I'm not saying that you shouldn't use Silverlight.js and CreateSilverlight.js to instantiate a Silverlight object - you most definitely should."

Wednesday, October 31, 2007 11:28 AM by Jon Galloway

# re: Silverlight doesn't require any JavaScript

The "doesn't require" Javascript is a bit misleading.

I have to give permission in the browser for "active scripting", which to most end users, is 95% Javascript.

That said, although silverlight does have some neatness to it, it is IMHO, just another distraction from the fact that IE is holding back the web by not conforming to the CSS/JS/DOM standards.

Except for A/V needs (movies and sound), I don't need anything that silverlight or flash has to offer.  I'd rather have usable content, text I can select, links I can open in another tab etc.

Wednesday, October 31, 2007 1:11 PM by bruce

# re: Silverlight doesn't require any JavaScript

Jon, I have to ask, what is the reason that false is surounded by single quotes for the isWindowless property?  Looks kinda funny to me.

Thanks.

Friday, November 2, 2007 3:04 PM by Josh Stodola

# re: Silverlight doesn't require any JavaScript

Your title is horribly misleading. Silverlight most definately 100% requires javascript!

You may not need to write much to get it running, but to do anything useful with it, you will need some javascript.

Sunday, November 4, 2007 7:20 PM by don

# re: Silverlight doesn't require any JavaScript

@don: Using Silverlight 1.1 you can program without using ANY javascript, although you should use Silverlight.js and CreateSilverlight.js for instantiating your Silverlight objects.

Silverlight 1.1 will be brilliant once it moves past the alpha phase it is in now

Thursday, November 8, 2007 6:25 PM by GavinB