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: 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.
Comments