none
Essential Silverlight翻译连载---第二章 续2 RRS feed

  • 常规讨论

  • 在我们对Silverlight进行深入研究之前,对模板里的文件来个近距离接触。我们并不打算讲解XAML文件(包括与之关联的JavaScript脚本),因为它包含了很多本书不曾讨论的技术。让我们从Default.html文件开始,它就包含在例2-1内。

    2-1HTML文件(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属性内提供正确的XAMLURL。代码如例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-16Mac 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
    版主