Silverlight1.0开发向导
第一步：在HTML页面加入Javascript引用
这步主要是要在HTML页面中插入Silverlight.js和createSilverlight.js这两个文件的引用，并创建一个HTML元素来作为silverlight插件的宿主。
Silverlight.js是跨平台浏览所需要的一个辅助性文件，你可以在Silverlight 1.0 SDK的Tools目录找到。
首先打开HTML页面并在<head>部分添加下列标签：
Java代码
- <script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="Silverlight.js"></script>
再创建一个空白的createSilverlight.js，我们随后会用到这个文件。在你的HTML页面中同样也添加这个脚本的引用，如下：
Java代码
- <script type="text/javascript" src="createSilverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
最后得到这样一个HTML页面：
Java代码
- <!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>
<!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>
第二步 创建HTML宿主元素和初始化段
在HTML文件中添加下面三行就可以创建用来呈现Silverlight内容的HTML宿主元素，
Java代码
- <!-- Where the Silverlight plug-in will go-->
- <div id="mySilverlightPluginHost">
- </div>
<!-- Where the Silverlight plug-in will go--> <div id="mySilverlightPluginHost"> </div>
你可以根据需要修改<div>标记的ID。重复上面的步骤就可以在同一页面内创建多个SilverLight的实例，不过要保证ID是唯一的。
创建初始化段：在刚添加的HTML标记之后加入下面的脚本。
Java代码
- <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>
<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>
对于页面中有多个SilverLight实例，则需重复上述步骤多次。你可以使用名称唯一的函数,或者你使用一个函数然后用唯一的ID来作为参数来创建这些实例。同时要保证每段脚本都紧跟在相关的DIV元素之后。
现在我们得到下面的html
Java代码
- <!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>
<!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>
第三步：定义创建函数来初始化插件的实例
打开第一步创建的 createSilverlight.js 并添加下面的JavaScript函数。
Java代码
- 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.
- }
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.
}
这个脚本里包含许多你想定制的参数,比如插件的长宽(也可以用百分比), 包含呈现内容的XAML文件名, 是否使用Windowsless模式。
在同一页面里如果有多个Silverlight插件，则要为每一个创建一个新的函数。或者比较简单的创建一个带参数的函数，然后根据插件的ID分别调用不同的代码。
第四部 创建Silverlight呈现内容。
现在HTML文件已经配置完毕，该创建呈现内容了。
在这个HTML所在的目录下创建一个名叫"myxaml.xaml"的空白文件。如果你在上一步使用了不同的文件名，记得与之匹配。
如果SliverLight项目要进行事件处理，或者与代码动态生成，或者与用户交互，它需要一些额外的javascript脚本，并在HTML页面中添加引用。下面的例子里我们引用了一个叫my-script.js的脚本
Java代码
- <script type="text/javascript" src="my-script.js"></script>
<script type="text/javascript" src="my-script.js"></script>
整个html如下：
Java代码
- <!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>
<!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>
创建多个插件须知：
-
创建多个插件只需要重复上面的2,3,4步骤。
每个宿主的<div>标签需要有唯一的标示。
每一段初始代码必须紧跟在对应的<div>标签之后。
每个插件的ID参数也必须是唯一的。