[This topic is pre-release documentation and is subject to change in future releases of Microsoft Silverlight.]
How do you add Silverlight to your web page? A typical Silverlight project has four files: an HTML file that hosts the Silverlight plug-in instance, a silverlight.js file, a XAML file, and a JavaScript file that supports the HTML file. This document describes how to create a very basic Silverlight project and add Silverlight content to an HTML file in three steps. This guide contains the following sections.
before you get started...
Before you can create Silverlight content, you will need the following items.
step 1: add script references to your HTML page
In this step, you add references to the Silverlight.js and
createSilverlight.js JavaScript files to your HTML page
and create an element to host your Silverlight plug-in. The Silverlight.js file is a JavaScript helper file that enables your Silverlight content to be viewed on multiple platforms. You will create the
createSilverlight.js file as part of step 2.
-
Get the Silverlight.js file.
You can get this file from within the Tools folder of the Silverlight 1.0 SDK.
-
Open your HTML page and add following markup inside the <head>
section. If you do not already have an HTML file to use, right click this SampleHTMLPage.html link and then select "Save Target As..." to save SampleHTMLPage.html in the same folder as the Silverlight.js file.
<script type="text/javascript" src="Silverlight.js"></script>
- Create a blank file and name it
createSilverlight.js. You will use it in step 3.
-
In your HTML page (SampleHTMLPage.html), add another script reference inside the <head> section. This time, specify the src as createSilverlight.js.
<script type="text/javascript" src="createSilverlight.js"></script>
Your HTML page should now contain the following basic elements:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A Sample HTML page</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
</head>
<body>
</body>
</html>
step 2: create the HTML host element and initialization block
-
Create the host HTML element by adding the following three lines to your HTML file, between the <body> tags, where you want your Silverlight content to appear.
<!-- Where the Silverlight plug-in will go-->
<div id="mySilverlightPluginHost">
</div>
You can change the ID of the <div> tag, if you like. If you are creating multiple Silverlight plug-in instances on the same page, repeat this step for each one and make sure each ID is unique.
-
Create an initialization block: after the HTML you added in the previous step, add the following HTML + script.
<script type="text/javascript">
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightPluginHost");
// This function creates the Silverlight plug-in.
createMySilverlightPlugin();
</script>
If you are creating multiple Silverlight plug-in instances on the same page,
repeat this step for each one, making sure that either each create function name is unique, or that you use a function that takes a parameter that you always use to set a unique ID. Also make sure that each script block immediately follows the corresponding DIV that you created in the previous step.
You have reached the end of step 2. Your HTML file should contain the following elements.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A Sample HTML page</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
</head>
<body>
<!-- Where the Silverlight plug-in will go-->
<div id="mySilverlightPluginHost">
</div>
<script type="text/javascript">
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightPluginHost");
// This function creates the Silverlight plug-in.
createMySilverlightPlugin();
</script>
</body>
</html>
step 3: define the creation function that initializes your
plug-in instance
Open the createSilverlight.js file you created in step 1 and
add the following JavaScript function.
function createMySilverlightPlugin()
{
Silverlight.createObject(
"myxaml.xaml", // Source property value.
parentElement, // DOM reference to hosting DIV tag.
"mySilverlightPlugin", // Unique plug-in ID value.
{ // Per-instance properties.
width:'300', // Width of rectangular region of
// plug-in area in pixels.
height:'300', // Height of rectangular region of
// plug-in area in pixels.
inplaceInstallPrompt:false, // Determines whether to display
// in-place install prompt if
// invalid version detected.
background:'#D6D6D6', // 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 to use.
},
{
onError:null, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null); // Context value -- event handler function name.
}
This script contains several parameters you might want to customize, such as the
height and width of the plug-in (percentage sizes are allowed), the name of the XAML file that contains your Silverlight content, and a value that specifies whether the plug-in behavior is windowless.
If you are adding multiple Silverlight plug-ins to the same page, create a new function for each one, or use a parameterized creation function. Either way make sure that each function call result specifies a different value for the plug-in ID ("mySilverlightPlugin" in this example).
step 4: create your Silverlight content files
Now that your HTML file is configured, create your content.
-
Create a blank file called "myxaml.xaml" in the same directory as your HTML file. If you changed the source file parameter in the previous step, change this file name to match.
-
(optional) If you want your Silverlight project to handle events, generate code dynamically, or otherwise interact with the user, it will need to contain an additional script file. Create a JavaScript file to contain the script and then add a reference to that file in your hosting HTML page. The following example creates a reference to the a script file named my-script.js.
<script type="text/javascript" src="my-script.js"></script>
Your HTML file should then contain the following elements.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A Sample HTML page</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
<script type="text/javascript" src="my-script.js"></script>
</head>
<body>
<!-- Where the Silverlight plug-in will go-->
<div id="mySilverlightPluginHost">
</div>
<script type="text/javascript">
// Retrieve the div element you created in the previous step.
var parentElement = document.getElementById("mySilverlightPluginHost");
createMySilverlightPlugin();
</script>
</body>
</html>
creating multiple Silverlight plug-in instances
If you want to create more than one Silverlight plug-in on your page, repeat steps 2, 3, and 4 for each instance.
- Each host <div> tag (created in step 2a) must have unique ID.
- Each initialization block (created in step 2b) must immediately follow the
<div> tag you created in the preceding step (2a).
- Each plug-in ID parameter must also be unique.
what's next?
In the next part, create a XAML file, you will learn how to add content to your XAML file.
Copyright © 2008 Microsoft Corporation.
All rights reserved. Legal Notices.