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