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" 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 的快速入门所需涉及的资料