|
|
How do you add Silverlight to your web page? A typical Silverlight project has four files: an
HTML file that hosts or displays content, an aghost.js file, a XAML file, and a
JavaScript file. This document describes how to create a 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'll need the following items.
- the Silverlight plugin: If you haven't already done so,
follow this
link to install the Silverlight plugin for your browser.
- an HTML file: You'll need an HTML file to display Silverlight content. Use one of
your own, or copy this one.
(Right-click the link and select "Save As...". Save the file
somewhere you can access it easily.)
- a text editor: You'll need a text editor, such as Notepad, to edit your HTML
file.
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 control. The Silverlight.js file is a JavaScript helper file that enables your Silverlight
content to be viewed on multiple platforms. You'll create the
createSilverlight.js file as part of step 2.
-
Copy this Silverlight.js file to the
same directory as your HTML page: right-click the
Silverlight.js hyperlink and then select "Save As..." to store the
Silverlight.js file in the same directory as your HTML page.
-
Open your HTML page and add following markup inside the <head>
section. If you don't already have an HTML file you'd like 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'll 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 control will go-->
<div id="mySilverlightControlHost">
</div>
You can change the ID of the <div> tag,
if you like. If you are creating multiple Silverlight
controls 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("mySilverlightControlHost");
// This function creates the Silverlight control.
createMySilverlightControl();
</script>
If you are creating multiple Silverlight controls on the same page,
repeat this step for each one, making sure each create function name is unique.
Also make sure that each script block immediately follows the corresponding div that
you created in the previous step.
You've 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 control will go-->
<div id="mySilverlightControlHost">
</div>
<script type="text/javascript">
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightControlHost");
// This function creates the Silverlight control.
createMySilverlightControl();
</script>
</body>
</html>
step 3: define the creation function that initializes your
control
Open the createSilverlight.js file you created in step 1 and
add the following JavaScript function.
function createMySilverlightControl()
{
Sys.Silverlight.createObject(
"myxaml.xaml", // Source property value.
parentElement, // DOM reference to hosting DIV tag.
"mySilverlightControl", // Unique control ID value.
{ // Control properties.
width:'300', // Width of rectangular region of
// control in pixels.
height:'300', // Height of rectangular region of
// control in pixels.
inplaceInstallPrompt:false, // Determines whether to display
// in-place install prompt if
// invalid version detected.
background:'#D6D6D6', // Background color of control.
isWindowless:'false', // Determines whether to display control
// in Windowless mode.
framerate:'24', // MaxFrameRate property value.
version:'0.9' // Control 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 control (percentage sizes are allowed), the name
of the XAML file that contains your Silverlight content, and a value that specifies whether
the control is windowless.
If you are adding multiple Silverlight controls to the same page,
create a new function for each one. Make sure that each function
specifies a different value for the control id ("mySilverlightControl"
in this example).
step 4: create your Silverlight content files
Now that your HTML file is configured, it's time to 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, gnerate 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>
You 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 control will go-->
<div id="mySilverlightControlHost">
</div>
<script type="text/javascript">
// Retrieve the div element you created in the previous step.
var parentElement = document.getElementById("mySilverlightControlHost");
createMySilverlightControl();
</script>
</body>
</html>
creating multiple Silverlight controls
If you want to create more than one Silverlight control on
your page, repeat steps
2, 3, and 4 for each control.
-
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 creation function (created in step 3) must be uniquely named.
The control ID parameter must also be unique.
a sample project
If you've gotten stuck or would just like to see what a simple Silverlight project
looks like, copy the following files to your machine and navigate to the SampleProject.html
file.
what's next?
In the next part, create a XAML file, you'll learn
how to add content to your XAML file.
Copyright © 2007 Microsoft Corporation.
All rights reserved. Legal Notices.
|