在我们对
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" src="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"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
的快速入门所需涉及的资料