您的位置:首页 > 编程语言 > C#

【翻译】Pro.Silverlight.5.in.CSharp.4th.Edition - 第一章 Silverlight介绍 03

2012-08-01 21:51 441 查看
目录:点击这里

上一篇:【翻译】Pro.Silverlight.5.in.CSharp.4th.Edition - 第一章 Silverlight介绍 02

组件缓存/程序集缓存

程序集缓存这种部署技术可以将从属的组件从XAP文件中分离开。这些从属的组件分别压缩成ZIP文档并和XAP文件处于同一文件夹中。在客户端存有常用的组件的副本情况下可以减少应用启动的时间。

默认情况下,VS创建的Silverlight应用程序没有配置成程序集缓存模式。如果想开启这项设置,在解决方案资源管理中双击属性节点,然后在如图1-10所示的属性窗口中将“Reduce XAP size by using application library caching”复选框勾上。接下来,重新编译应用程序,然后点击解决方案资源管理器最上方的“Show All Files”按钮,展开Bin\Debug文件夹就可以看到更改设置后的效果。可以看到每一个缓存组件都生成了一个ZIP文件。举个栗子,如果你的应用程序引用了System.Windows.Controls.dll,那你将发现XAP文件旁还杵着一个名为System.Windows.Controls.zip的文件。这个文件是System.Windows.Controls.dll的一个压缩包;而在开启程序集缓存设置之前的还包含着这个DLL的XAP文件中现在已经不再包含它了。

在部署ASP.NET 测试站点的时候,VS会将XAP文件和所有的缓存程序集的ZIP包都拷贝到站点的ClientBin目录下。图1-12显示了一个引用了System.Windows.Controls.dll和System.Windows.Controls.Navigation.dll的应用程序在编译之后ClientBin文件夹中的状况。



图1-12 开启程序集缓存后的从属组件编译情况

程序集缓存使得XAP文件得以缩小。文件越小下载也就越快,因此缩减XAP文件可以让应用程序启动更快。不过在客户端首次加载应用程序的时候不会有什么效果,因为首次加载需要将缩减后的XAP文件和分离的从属组件的ZIP文件都下载到本地机器中,这个耗时和不适用程序集缓存机制所需要的下载时间是一样的。

笔锋一转,程序集缓存的优势在客户端第二次运行应用的时候便体现出来了,由于从属组件已经在客户端浏览器缓存中,因此客户端不需要再次下载它们,只需要加载XAP文件即可。

下面这些注意事项是为了让你更好地使用程序集缓存机制:

已下载的组件的生存周期和浏览器缓存一样。一旦用户清空缓存,那这些缓存中的组件也会被删除掉。

客户端每次运行应用程序的时候,应用程序会检查缓存组件的新版本。一旦发现新版本,便会自动下载并替换缓存中的旧版。

如果一个应用程序下载了组件并置于浏览器缓存中,其他配置了程序集缓存机制的应用也可以使用它。

程序集缓存技术适用于那种文件比较大而且不经常变化的组件。针对那种组件不大、下载耗时不明显的应用程序,使用程序集缓存机制则可能画蛇添足。

通过一点少量的额外配置,你还可以将自己类库使用缓存机制。这种情况下,如果你的组件比较大而且不经常变动,那就非常有意义了。在第6章中将会介绍如何创建支持程序集缓存机制的组件。

HTML测试页面

整个部署蓝图中最后一个环节是HTML测试页面。这个页面是Silverlight内容的入口——换句话说,这个页面是浏览器中响应用户请求的页面。VS将这个文件的命名和项目的名称做了匹配(比如SilverlightApplication1TestPage.html),当然你完全可以按照自己的实际需要将其重命名为更有实际意义的名字。

这个HTML测试页面并不真正包含Silverlight标记语言或者代码。相反,它只是包含一个由少量的JavaScript脚本实现的用来放置Silverlight插件的内容区域。(由于这个原因,禁用了JavaScript脚本的浏览器看不到Silverlight内容。)下面这段代码展示了这个页面中的一些关键细节:

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0014)about:internet -->
<head>
<title>SilverlightApplication1</title>
<style type="text/css">
...
</style>
<script type="text/javascript">
...
</script>
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<!-- Silverlight content will be displayed here. -->
<div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="SilverlightApplication1.xap" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="5.0.61118.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0"
style="text-decoration:none">
<img src=" http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
<iframe id="_sl_historyFrame"
style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
</body>
</html>


其中关键部分就是展现Silverlight内容区域的<div>元素。它包含一个用来加载Silverlight插件的<object>元素。此<object>元素包含了四个关键属性。首先要注意的是不要修改data和type这两个属性——它们用于表明<object>元素呈现的是2版本或者更高版本的Silverlight。当然你可以需要修改height和width这两个属性,这两个属性决定了Silverlight内容区域的尺寸(接下来会讲到这段内容)

备注:在修改HTML测试页面中哪些看似不重要的细节的时候请务必谨慎。其中有一些小瑕疵的存在是为了兼容某种浏览器。比如说,<object>元素的data属性结尾处的逗号就是为了兼容Firefox浏览器。<div>最下方的不可见的<iframe>则是为了能在Safari浏览器中正常运行。总的来说,测试页面的内容中,适合你捣腾的内容只有以下这些:宽度和高度设置,参数列表和备用内容(the alternate content)。

如果你使用的是ASP.NET站点模式,这个测试页面在ASP.NET站点创建的时候就生成了(而且只生成这么一次)。你不用担心HTML页面在修改之后会被VS覆盖成初始内容。

如果你使用是不含ASP.NET站点的Silverlight独立模式,VS在每次启动项目的时候都会生成这个测试页面。这样的话,你在这个页面上的修改都会被覆盖掉。如果你想自定义测试页面,最简单的方法是创建一个新的测试页面给项目使用。方法如下:

首先至少把项目运行一遍,这是为了自动生成那个测试页面。

点击解决方案资源管理器最上方的“Show All Files”图标。

展开Bin\Debug文件夹。

找到那个测试页面文件,在相同的目录下拷贝粘贴一份,复制的这份就是你要使用的自定义的测试页面,将这个页面重命名为一个有意义的名字。

右击这个文件,选择“Include in Project”,将这个文件添加到项目中。

右击这个文件,选择“Choose Set As Start Page”,使这个文件成为项目的起始页。

改变Silverlight内容区域的尺寸

默认情况下,Silverlight内容区域的宽度和高度都是100%,所以Silverlight内容充满了浏览器窗口的所有可用空间。你可以用硬编码的方式给height和width(有限制而且通常无效)设置固定的像素尺寸。或者,你可以将这个包含Silverlight内容区域的<div>放置于页面中更受限制的地方——比如说:表的某一单元,另一个固定尺寸的元素或者放在多列布局的<div>元素之间。

虽然默认的测试页面将Silverlight内容区域的尺寸设置成充满浏览器窗口的所有可用空间,但是你的XAML页面可能还是需要硬编码的尺寸设置。具体设置方式是在根用户控件(UserControl)元素上设置Height和Width属性,以像素来设置相应的尺寸规格。如果浏览器窗口的尺寸比硬编码后的页面尺寸大,那么超出的部分就不会使用到;反之如果浏览器窗口的尺寸比硬编码后的页面尺寸小,那么页面超出的那一部分区域将处于窗口可视区域之外。

当你的有一个丰富的图形布局,这个图形布局处于绝对位置而且位置基本不会发生变化的时候,尺寸硬编码则显得比较有意义。否则,你最好还是把<UserControl>标记中的Width和Height属性设置去掉,这样,页面的尺寸会自动去适应Silverlight内容区域,进一步也就是自动适应浏览器窗口的尺寸,最终你的Silverlight内容也将自动适应并正常地显示在可用空间中。

为了对Silverlight内容区域的真实尺寸有一个更好的了解,你可以给<div>添加一个简单的样式来加上一个边框,比如:

<div id="silverlightControlHost" style="border: 1px red solid">


在第3章中会带你探索关于这方面的更多的细节,例如创建尺寸可变化的Silverlight页面。

Silverlight参数

<object>元素中包含一系列附加在Silverlight插件上的<param>元素。

表1-1列出了一些你可能会用到的基本参数。随着通过钻研本书的示例代码,你还会了解到一些其它的专业的参数,比如访问HTML、启动画面、透明度和动画等。

表1-1 针对Silverlight插件的基本参数

名称



source

指向Silverlight应用程序的XAP文件的URI,此参数必填。

onError

一个JavaScript事件处理程序,当Silverlight插件或者代码发生了未处理的错误的时候会处理此事件。如果是因为安装的Silverlight插件版本低于最低运行时版本参数(minRuntimeVersion parameter)也会调用到这个事件处理程序。

background

用于绘制Silverlight内容区域的背景的颜色值,在所有显示内容的后面(但是在相同空间下面HTML内容的前面)。如果你设置了页面的Background属性,此值会覆盖在页面背景之上。

minRuntimeVersion

客户端运行本应用程序所必需的Silverlight插件的最低版本。如果你需要使用Silverlight 5的特性,那么就将这个值设置为5.0.61118.0(因为稍早一些的版本是测试版)。如果Silverlight 4就足够了,那么将这个值设置为4.0.50401.0。如果Silverlight 3就足够了,则设置为3.0.40624.0。必须保证这个值和你编译应用程序所使用的Silverlight的版本相匹配。

autoUpgrade

一个布尔值,用于标记Silverlight是否要尝试自动升级(在Silverlight已经安装并且版本号过低的情况下)。默认值是true,你可以将其设置为false,这样,你可以使用onError事件来自定义版本问题的处理方式(如同“创建友好的安装体验”这一小节所描述)

enableHtmlAccess

一个布尔值,用于指定Silverlight插件是否能访问HTML对象模型。如果你需要通过Silverlight代码和测试页面中的HTML元素有交互,就将这个值设置为true(第17章将会深入讲解)

initParams

字符串类型,可以用来传递自定义的初始化信息。如果要在不同页面用不同的方式来使用同一个Silverlight应用,这个技术就会非常用(详见第6章)

splashScreenSource

在XAP下载过程显示的启动画面XAML的地址。第6章会介绍如何使用这个技术

windowless

一个布尔值,用于标记Silverlight插件是运行在窗口模式(默认值 false)下还是非窗口模式下。如果设置为true,那么位于Silverlight内容区域下方的HTML内容会透过显示。这适用于当你想实现Silverlight控件和HTML内容结合在一起的效果的情况。在第17章会介绍具体的实现方式。

onSourceDownloadProgressChanged

一个JavaScript事件处理程序,当XAP文件下载进度变化的时候会触发。你可以利用这个来创建一个加载进度条(详见第6章)

onSourceDownloadComplete

一个JavaScript事件处理程序,当XAP文件下载完毕的时候触发。

onLoad

一个JavaScript事件处理程序,当应用运行到XAP文件中的标记并且第一个Silverlight页面加载成功的时候触发。

onResize

一个JavaScript事件处理程序,当Silverlight内容区域的尺寸发生变化的时候触发。

替换显示的内容

<div>元素还包含一些HTML标记,当浏览器不识别<object>标签或者Silverlight插件不可用的时候,这些HTML标记就会代替正常要呈现的内容而显示在浏览器中。在标准的测试页面中,这个标记中包含一张含义为获取Silverlight插件的带超链的图片,点击这个图片,浏览器页面会导航到Silverlight下载页面。

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0"
style="text-decoration:none">
<img src=" http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>


创建友好的安装体验

许多用户在访问这个页面的时候可能还没有安装Silverlight插件,或者是Silverlight版本不合适。标准的做法是检测出问题所在并告知用户。然而,这可能不足以让用户做出正确的操作。

比如试想一个用户首次登录你的网站,看到了一个提示安装Silverlight的小图片。用户可能会不情愿安装一个不熟悉的程序,心里会犯嘀咕:“为什么要安装这个?”然后被这种有点技术性的东西吓倒。即使他们点击图片跳转到下载页面,他们还会面对一系列的关于下载Silverlight安装包并执行安装的提示。在这个时候,他们可能重新考虑,然后直接看其它网页了。

提示:研究表名如果让网页浏览者觉得这是 应用 的一部分,而不是从 技术 的角度来安装,他们会更容易接受并安装完插件。

要给用户一个更友好的安装体验,首先要自定义替换显示的内容。正如你在之前的内容中所了解的,如果客户端没有安装Silverlight插件,浏览器会显示一个Silverlight标记——由一个logo和一个获取Silverlight按钮组成的条幅。对于开发者来说这很明显,但是对于实际用户可能还是比较茫然。为了使之更一目了然,可以添加上一张带有你的应用程序的名称和logo、并在下方配上提示用户下载Silverlight插件来展示你的应用的提示语言的图,在这之后再在下方附上下载按钮。

第二个要解决的问题是Silverlight版本的控制。如果客户端已经安装了Silverlight,但是版本要低于应用程序的最低版本要求,这种情况下替换显示的内容也不会显示——相反,Silverlight插件会触发OnError事件,传入的参数ErrorCode(错误代码)是8001(表示要求升级)或者8002(表示要求重启),然后会显示提示用户进行版本升级的对话框。建议你用代码解决这个问题,这样更好。

首先,将autoUpgrade参数设置为false,这样可以禁用自动升级功能:

<param name="autoUpgrade" value="false" />


然后再看测试页面中onSilverlightError函数的版本错误代码,如果监测到版本问题,就可以使用JavaScript脚本改变放置Silverlight插件的<div>元素的内容。在附有正确的Silverlight版本的下载链接的前提下,用一个具有实际意义的图片给你自己的应用程序做个广告推广。(毕竟用户现在还没看到你的应用程序的具体样子,何苦不想一切手段来吸引用户的注意呢?)

function onSilverlightError(sender, args) {
  if (args.ErrorCode == 8001)
  {
    //查找Silverlight内容区域
    var hostContainer = document.getElementById("silverlightControlHost");
    //改变页面显示的内容,可以使用HTML来呈现
    hostContainer.innerHTML = "...";
  }
  //处理其他错误
}


  你可以将minRuntimeVersion参数的值设置得更高一点来测试你的代码:

<param name="minRuntimeVersion" value="6" />



以目标版本来匹配最低运行时

之前介绍过,你可以在任何时候修改你的应用程序的Silverlight版本(在资源管理器中双击属性节点,然后再弹出窗口中在Silverlight版本下拉列表中选择你要设置的版本即可。)不过,你必须要了解做这种设置的时候在测试页面中发生了什么改变。

如果你用的是自动生成测试页面的独立Silverlight应用模式,VS会在生成测试页面的时候将minRuntimeVersion属性与目标版本相匹配。咱们要的就是这个效果。

如果你用的是ASP.NET寄宿模式或者测试页面是自定义的,VS不会主动修改对应的minRuntimeVersion属性。这就会存在一个问题:编译时所使用的Silverlight版本和minRuntimeVersion属性不匹配。这种情况下,客户端可能通过最低版本限制而实质上客户端的版本并不是真正运行需要的版本。而此时用户也看不到带有安装链接的替换显示的内容——相反,在浏览器当前的Silverlight插件尝试启动你的Silverlight应用程序时会报异常并弹出的一个错误提示框,用户看到的只是这个毫无意义的对话框。

所以,当你修改了应用的Silverlight版本时候,最好相应的修改minRuntimeVersion属性值。



网站标记

在HTML测试页面中有些不常见的内容,比如第二行:

<!-- saved from url=(0014)about:internet -->


尽管这条记录是自动生成的,而且浏览器会忽略掉,但是它却实实在在地会影响应用调试的方式。这条记录叫做网站标记(mark of the Web),这个特殊的标志会让IE在比通常情况更严格的安全区域运行应用上的页面。

通常来说,网站标记是用来标志本地存储的页面最初是从哪个网站下载而来。但是由于目前VS无从得知你的Silverlight应用最终将部署在何处,所以这个URL指向的是about:internet,表明这个页面来自网上某个未知的地址。那个数(14)标明了URL的字符串的长度。如果想更详细地了解网站标记以及标准用法,请查看这个网址http://tinyurl.com/2ctnsj9

(此短地址对应的原始地址是http://msdn.microsoft.com/en-us/library/ms537628.aspx

现在就出现了一个显而易见的问题——换句话说,为什么VS要为下载到本地的页面特意加上一个标记?原因是如果没有网站标记,IE会用本机安全区域中不严格的安全设置来加载你的页面。如果IE的安全设置禁用了脚本和ActiveX控件,这就会出问题。最终结果是,当你运行的是一个本地硬盘上没有网站标记的测试页面的时候,你会看到如图1-13所示的那种纠结的警告提示,这种情况下你还得手动操作允许阻止的内容。最糟糕的是,每次你打开这个页面都要如此操作。



图1-13 Silverlight内容被禁止显示的页面

在部署成为一个真实的站点后这个问题就不存在了,但是在调试阶段这种情况太困扰了。要避免这种头疼的现象,当你的测试页面是自定义的时候最好还是加上这段标记。

本章总结

通过本章,你会大致了解Silverlight应用程序模型。学到了如何使用VS创建Silverlight项目、如何增加一个简单的事件处理程序、如何测试你的应用。你也基本认识了Silverlight应用程序的调试和部署的整个过程。

在接下来的章节中,你会了解到Silverlight平台的更全面功能。有时候,你需要提醒你自己:你是在一个轻量级的寄宿于浏览器的框架(尽管这个框架是建立于压缩后只有几兆字节的代码)中编码,因为大部分Silverlight代码看起来和完整的.NET平台下差不多。在Silverlight的所有特性中,能将一个微型现代编程框架打包成一个如此大小如此之小的玩意儿,这个能力明显是最给力的。

以上为第1章的所有内容
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: