Essential Silverlight翻译连载---第二章 续2
常规讨论
-
在我们对Silverlight进行深入研究之前，对模板里的文件来个近距离接触。我们并不打算讲解XAML文件（包括与之关联的JavaScript脚本），因为它包含了很多本书不曾讨论的技术。让我们从Default.html文件开始，它就包含在例2-1内。
例2-1：HTML文件（Default.html.js）示例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SilverlightJSApplication1</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" originalAttribute="src" originalPath="Silverlight.js"></script>
<script type="text/javascript" src="Default.html.js"></script>
<script type="text/javascript" originalAttribute="src" originalPath="Default.html.js"></script>
<script type="text/javascript" src="Scene.xaml.js"></script>
</head>
<body>
<div id="SilverlightPlugInHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>（译者注：本例及其后代码将全部从我的VS2005上拷贝出来，有可能会跟原版稍有不同）
这个文件做了以下几件事情：
l 把Silverlight.js辅助类库做为<script>元素载入。
l 把Default.html.js这个JavaScript文件（Default.html的“code-behind”脚本）做为<script>元素载入。
l 把Scene.xaml.js这个JavaScript文件（XAML示例文件的“code-behind”脚本）做为<script>元素载入。
l 这个页面包含了一个ID为“SilverlightPlugInHost”的<div>元素，稍后将由它控制Silverlight的内容。
l 执行JavaScript方法createSilverlight()（它被定义在Default.html.js文件内）
您特别需要注意<div>标签的ID属性的内容，因为在后面它将控制Silverlight。您需要显式地告诉JavaScript（包括Silverlight）插件这些内容放在哪里。这项工作在Default.html.js文件内完成，如例2-2：
例2-2：载入Silverlight内容的JavaScript文件（Default.html.js）
function createSilverlight()
{
var scene = new SilverlightJSApplication1.Scene();
Silverlight.createObjectEx({
source: 'Scene.xaml',
parentElement: document.getElementById('SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
properties: {
width: '400',
height: '400',
background:'#ffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
},
context: null
});
}
if (!window.Silverlight)
window.Silverlight = {};
Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
}
正如您所见，CreateSilverlight()方法是在Default.html.js中定义的。它首先实例化一个Silverlight.Scene对象，此刻我们还不需要它。接下来执行Silverlight.createObjectEx()方法，这个方法专门用于对帮助浏览器插件初始化并载入XAML内容。这个方法声明了一个对象做为控制所有的相关信息参数。这个JSON的语法如下：（JSON：JavaScript Object Notation，做为Javascript语法的一部份。译者注：JSON即一种开放式和基于文本的数据交换格式，它提供了一种标准数据交换格式，更适用于 Ajax 样式的 Web 应用程序。）
{property1: "value1", property2: "value2", ...}
各参数作用如下：
parentElement
显示Silverlight内容的页面中的<div>标签中的ID属性所指的值。
source
将要载入的XAML文件的URL。
id
Silverlight内容的标识，将在后面帮助JavaScript访问Silverlight。
properties
一系列的属性值，包括舞台的尺寸（width，height），背景颜色（background）
version
运行示例所需的Silverlight插件的版本。
Events属性用于关联事件，将在第5章进行详细讲述。不管怎么样，您需要设置onError：null以避免JavaScript错误。由于模板里的代码比较复杂，我们现在就自己创建第一个Silverlight应用程序吧。创建一个新的XML文件并命名为HelloWorld.xaml。所有Silverlight XAML文件的根元素是<Canvas>（可以比喻为HTML中的<div>元素或ASP,NET中的<asp:Panel>）。在那，您将放置一个橙色的方块（<Rectangle>）元素和一个文字块（<TextBlock>元素）。最后代码如例2-3所示：
例2-3：一个简单的Hello World XAML文件（HelloWorld.xaml）
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Width="300" originalAttribute="src" originalPath="Scene.xaml.js"></script>
</head>
<body>
<div id="SilverlightPlugInHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>（译者注：本例及其后代码将全部从我的VS2005上拷贝出来，有可能会跟原版稍有不同）
这个文件做了以下几件事情：
l 把Silverlight.js辅助类库做为<script>元素载入。
l 把Default.html.js这个JavaScript文件（Default.html的“code-behind”脚本）做为<script>元素载入。
l 把Scene.xaml.js这个JavaScript文件（XAML示例文件的“code-behind”脚本）做为<script>元素载入。
l 这个页面包含了一个ID为“SilverlightPlugInHost”的<div>元素，稍后将由它控制Silverlight的内容。
l 执行JavaScript方法createSilverlight()（它被定义在Default.html.js文件内）
您特别需要注意<div>标签的ID属性的内容，因为在后面它将控制Silverlight。您需要显式地告诉JavaScript（包括Silverlight）插件这些内容放在哪里。这项工作在Default.html.js文件内完成，如例2-2：
例2-2：载入Silverlight内容的JavaScript文件（Default.html.js）
function createSilverlight()
{
var scene = new SilverlightJSApplication1.Scene();
Silverlight.createObjectEx({
source: 'Scene.xaml',
parentElement: document.getElementById('SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
properties: {
width: '400',
height: '400',
background:'#ffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
},
context: null
});
}
if (!window.Silverlight)
window.Silverlight = {};
Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
}
正如您所见，CreateSilverlight()方法是在Default.html.js中定义的。它首先实例化一个Silverlight.Scene对象，此刻我们还不需要它。接下来执行Silverlight.createObjectEx()方法，这个方法专门用于对帮助浏览器插件初始化并载入XAML内容。这个方法声明了一个对象做为控制所有的相关信息参数。这个JSON的语法如下：（JSON：JavaScript Object Notation，做为Javascript语法的一部份。译者注：JSON即一种开放式和基于文本的数据交换格式，它提供了一种标准数据交换格式，更适用于 Ajax 样式的 Web 应用程序。）
{property1: "value1", property2: "value2", ...}
各参数作用如下：
parentElement
显示Silverlight内容的页面中的<div>标签中的ID属性所指的值。
source
将要载入的XAML文件的URL。
id
Silverlight内容的标识，将在后面帮助JavaScript访问Silverlight。
properties
一系列的属性值，包括舞台的尺寸（width，height），背景颜色（background）
version
运行示例所需的Silverlight插件的版本。
Events属性用于关联事件，将在第5章进行详细讲述。不管怎么样，您需要设置onError：null以避免JavaScript错误。由于模板里的代码比较复杂，我们现在就自己创建第一个Silverlight应用程序吧。创建一个新的XML文件并命名为HelloWorld.xaml。所有Silverlight XAML文件的根元素是<Canvas>（可以比喻为HTML中的<div>元素或ASP,NET中的<asp:Panel>）。在那，您将放置一个橙色的方块（<Rectangle>）元素和一个文字块（<TextBlock>元素）。最后代码如例2-3所示：
例2-3：一个简单的Hello World XAML文件（HelloWorld.xaml）
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />
<TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"
Foreground="Black" Text="Silverlight" />
</Canvas>
（译者著：作者对这第一个例子交待得很不清楚，并且按照他所提供的代码所完成的程序也不能运行。在VS2005中没有创建xaml文件的项，所以这段代码我放到了模板自带的Scene.xaml文件内。把Scene.xaml文件里的所有代码删除并使用例2-3代码即可）
代码提示将帮助您完成代码的输入，如图2-14所示。
下一个需要创建的文件是Default.html.js，它包含createSilverlight()方法。您可以使用原来的Default.html.js文件，并把它的所有不需要的元素删除（实例化跟场影关联的外部JavaScript代码）。不要忘记在source属性内提供正确的XAML的URL。代码如例2-4所示。
例2-4 简单的Hello World XAML文件（HelloWorld.xaml）
（译者注：这里应该是JavaScript文件Default.html.js）
function createSilverlight()
{
var scene = new HelloWorld.Scene();
Silverlight.createObjectEx({
source: 'Scene.xaml',
parentElement: document.getElementById('SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
properties: {
width: '400',
height: '400',
background:'#ffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
},
context: null
});
}
Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
}
（译者注：使用原版代码，程序无法正确运行，有一些代码不能删，这里把这些代码加了进去。或许是因为我对整个Silvrelight的体系结构还不熟悉，导致无法运行作者的代码，等将来完全了解后再回来改这段）
浏览器运行这段代码就好象施了魔法。如果您还没有安装Silverlight插件，将会弹出提示让您安装，如果安装了就会看到图2-15所示的文本和橙色矩形。
我们还差一个Silverlight.js文件没介绍。这个JavaScript类库的功能为：侦测网页浏览器是否存在（unfortunately, it has the same habit as ASP.NET AJAX and only accepts Firefox of all the Mozilla browsers, e.g., Netscape, SeaMonkey, and others 译者注：这段原文不知道是否有错，感觉有些不对头，只放原文上来吧）。提供Silverlight.createObjectEx()方法并且帮助应用程序使用JavaScript API访问Silverlight内容（详见第8章）。只需要把Silverlight.js文件拷贝到Silverlight应用程序中就可以实现这项功能。
Silverlight版本更新的速率可能会非常地快。默认情况下，Silverlight会第天检查一次是否有新版本（只要用户访问带有Silverlight内容的站点）。如果有新的版本，会提示用户下载并安装新的插件（图2-16是Mac OS X操作系统中的升级对话框）。它甚至有可能会自动升级，这取决于操作系统和配置。
进阶读物
http://silverlight.net/GetStarted/
这里有开始学习Silverlight所需的资源。
http://silverlight.net/quickstarts/
Silverlight的快速入门所需涉及的资料
My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com
My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com
