询问者
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
2009年3月11日 8:24