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

本文介绍了如何使用Silverlight创建简单应用程序的过程,包括HTML文件结构、JavaScript脚本加载及Silverlight内容初始化方法。通过实例演示了如何加载XAML文件并设置其属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在我们对 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 的快速入门所需涉及的资料
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值