Library tutorials & articles
Have you seen the Silverlight?
- So what is Silverlight?
- Server-side generation of the user interface
- Creating a Silverlight JavaScript application
- Silverlight and XAML
Creating a Silverlight JavaScript application
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.
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 Dev...
Related articles
Related discussion
-
Java Script, File uploading on ftp server using java script code
by h_c_a_andersen (2 replies)
-
Problem when using TemplateField and ImageButton
by ashiquemca (15 replies)
-
PrintDocument printing using DOS print
by squrrel (1 replies)
-
Total Sum Value of columns as header row by "LabourID" in gridview
by kcns (0 replies)
-
Getting Culture Information through Javascript
by kishorrudra (5 replies)
Related podcasts
-
JavaScript gets Faster: Brendan Eich, CTO of Mozilla Corporation and Creator of JavaScript
Scott talks to Brendan Eich from Mozilla about TraceMonkey, the new super-fast JavaScript engine. Where does Brendan think JavaScript is headed? What does the rise of JavaScript mean to Flash, Silverlight and RIAs in general?
Events coming up
-
Mar
15
DevWeek 2010
London, United Kingdom
DevWeek is Europe’s leading independent conference for software developers, database professionals and IT architects, and features expert speakers on a wide range of topics, including .NET 4.0, Silverlight 3, WCF 4, Visual Studio 2010, REST, Windows Workflow 4, Thread Synchronization, ASP.NET 4.0, SQL Server 2008 R2, LINQ, Unit Testing, CLR & C# 4.0, .NET Patterns, WPF 4, F#, Windows Azure, ADO.NET, Entity Framework, Debugging, T-SQL Tips & Tricks, and more.
This thread is for discussions of Have you seen the Silverlight?.