Have you seen the Silverlight?

Creating a Silverlight JavaScript application

This article was originally published in VSJ, which is now part of Developer Fusion.

It doesn’t matter which of Blend 2 or Visual Studio you use to create your project, as you get the same set of files from both. These are listed in Figure 6.

Figure 6
Figure 6: The five core Silverlight files

Let’s dive into each of these files in a little more detail, starting with the default page.

Default.html + Default.html.js

Default.html is the page that will host the Silverlight plug-in, and it contains the following HTML:

<!DOCTYPE HTML PUBLIC ... >
<html
xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    	<title>Hello, Silverlight
    		</title>
    	<script type=”text/javascript”
    	src=”Silverlight.js”></script>
    	<script type=”text/javascript”
    	src=”Default.html.js”></script>
    	<script type=”text/javascript”
    	src=”Scene.xaml.js”></script>
    	<style type=”text/css”>
    		.silverlightHost {
    			height: 480px;
    			width: 640px;
    		}
    	</style>
    </head>
    <body>
    <div id=”SilverlightControlHost”
    	class=”silverlightHost”>
    	<script type=”text/javascript”>
    		createSilverlight();
    	</script>
    </div>
    </body>
</html>

The code divides naturally into two areas. The first area is important because it links in all the script files that are going to be needed for Silverlight (and which are examined below); the second contains the call to the createSilverlight() function that is used to create the Silverlight control and load in the initial XAML.

Default.html.js contains the code for the createSilverlight() function, which is shown below. Again, I’ve highlighted a few important items.

function createSilverlight()
{
    var scene = new
    	HelloSilverlight.Scene();
    Sys.Silverlight.createObjectEx({
    	source: “Scene.xaml”,
    	parentElement:
    	document.getElementById(
    	“SilverlightControlHost”),
    	id: “SilverlightControl”,
    	properties: {
    		width: “100%”,
    		height: “100%”,
    		version: “0.9”
    	},
    	events: {
    		onLoad:
    	Sys.Silverlight.createDelegate(
    			scene, scene.handleLoad)
    	}
    });
}
// other code elided for clarity
...

The first thing to note is that you need to specify the source for the scene’s XAML. This will often be the URL of a XAML document, but as it can be any URL you can easily use a server-side handler to dynamically generate the content for the control. We’ll examine just one way to do this later in the article.

The second item of note is the version number for the plug-in. Silverlight 1.0 beta requires this to be set to 0.9, with the Silverlight 1.1 alpha requiring version 0.95.

Finally, you’ll notice that a handler for the root element’s Load event has been created. The root element is the outermost element in the XAML, and by handling its Load event you get the opportunity to connect up event handlers for the other elements declared in your scene. The code for this handler can be found in the scene.xaml.js file. Of course, you can modify this page to reflect your own page designs, including replacing this page with a full-blown ASP.NET (or ASP.NET AJAX) page so that you can generate the elements shown above dynamically.

Silverlight.js

This file contains the script to check that the Silverlight plug-in is present and that the browser supports Silverlight. This will display a link to the plug-in should it not already be installed, assuming that the browser supports Silverlight. Note that you shouldn’t need to edit this file.

Scene.xaml + Scene.xaml.js

Finally, we come to the actual scene itself, which is where you’ll spend most of your time as a Silverlight developer. The scene.xaml file contains the XAML to represent the UI that will be rendered inside the plug-in, with its matching event handlers and other code in the scene.xaml.js.

So let’s take a look at defining the UI in XAML and handling some events.

You might also like...

Comments

About the author

Dave Wheeler United Kingdom

Dave Wheeler is a freelance instructor and consultant who specialises in .NET application development. He’s a moderator on Microsoft’s ASP.NET and Silverlight forums and is a regular speaker at ...

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“UNIX is basically a simple operating system, but you have to be a genius to understand the simplicity.” - Dennis Ritchie