怎么样使用Splash Screen来过渡基于Silverlight的应用程序的下载过程-技术开发专区

怎么样使用Splash Screen来过渡基于Silverlight的应用程序的下载过程

作者：silverlight.cn 编辑：覃里 2007-09-05 14:49

【IT168技术文档】介绍
Microsoft Silverlight 托管代码模型需要将 Extensible Application Markup Language (XAML)的assemblies下载到客户端机器才能够正常呈现出内容.当这些assemblies很小的时候(当然它们一般都会很小), 用户不会受长时间等待的煎熬. 然而, 如果这些assemblies非常的大,你可以想要以显示一个splash screen来替代无聊的漫长的下载过程.

运行查看要求 (available from the Silverlight download site):

Microsoft Silverlight 1.1 Alpha.

Microsoft Visual Studio Code Name "Orcas" Beta 1.

Microsoft Silverlight Tools Alpha for Visual Studio Code Name "Orcas" Beta 1.

从非托管代码到托管代码的转换
一般情况下, 一个 splash screen应该从一个非托管的downloader开始.这个 downloader是可以作为普通对象用代码控制的,你可以从 createObject 调用来创建它.当downloader对象引发一个事件时,在非托管代码中,你就可以来进行处理了.

托管和非托管的基于Silverlight的应用程序的基本区别是是否XAML文件中control使用了x:Class 属性; 如果使用了, 它是一个托管application.在你接收到downloader发来的事件后 , 你可以通过重新载入XAML来使应用程序转换到托管代码方式, 当然这个新的 XAML 包含了 x:Class 属性. 这个 x:Class 属性就可以用才下载好的assembly来进行指向了.

准备 Project 文件
其实这有别的方法来建立这种类型的project, 但是在这个示例中,你将建立一个基本的 Silverlight project然后将添加一个文件来代表非托管方的转换. 你同样需要添加一些虚假的但很大的文件到你的DLL中来, 因为这才可以使用在下载这个大东东的时候你有机会看清楚splash screen.

开始设置project 文件
打开 Visual Studio.创建一个 Silverlight project, 你可以查看怎么来创建一个Silverlight Project. 对于这个示例, 命名project为 SplashScreenDownload.

在Solution Explorer, 右键单击 project, 选择 Add, New Item.

在Add New Item 对话框, 点击 Silverlight Page. 命名页为 ProgressAnim.xaml.

在 Solution Explorer, 删除ProgressAnim.xaml.cs 文件 (如果你用 Visual Basic 创建project则删除 ProgressAnim.xaml.vb ).你不需要这些文件,因为这个XAML文件是用来我们用来代表非托管的 XAML 页的.

打开 ProgressAnim.xaml.从Canvas 根中删除x:Class 属性和 Loaded 属性.

对于ProgressAnim.xaml 页的内容, 它代表了splash screen所呈现出来的UI, 你可以点击QuickStart开始处的 View Source 按钮,拷贝代码.当然你也可以自定义UI .

打开 TestPage.html.js 进行编辑. 改写 CreateObjectEx 方法, 使initial XAML的对象为 ProgressAnim.xaml. (而不要载入 page.xaml.)

为了模拟下载时间,你应该创建一个足够大的assembly. 你可以通过打包一个非常大的resource文件 ,当然实际上是不会真正使用它们的. 你的 project 已经生成了assembly了.找到你机器或别的地方的一些大文件.复制它们并粘贴到 project 目录中来, 并将它们以existing items的身份添加到project 中来 . 设置 build action使这些文件都编成 Embedded Resource. 我们这么做的目的就是使用你的assembly达到至少10MB大.

Build 你的project 确保已经compiles. 如果现在开始看页面,将看到splash screen . 接下来, 你将编写一个 downloader 代码和转换代码.

编写Downloader
在非托管的代码中, 你可以从主Silverlight control中来创建downloader . 当然,你需要在完成下载后得到一个提示.

编写downloader 函数
打开TestPage.html 进行编辑.在HTML head中创建一个 Script 块, 附上两个 SCRIPT SRC 引用.

编写一个JavaScript event handler 命名为 splashScreenLoaded. 在事件里, 通过document的ID来得到Silverlight control 的引用.

CS

var silverlightPlugin = document.getElementById("SilverlightControl");

通过createObject创建Silverlight control的Downloader 对象, 然后调用Downloader中的Open方法 . 当你调用Open方法后, 你会希望能够控制下载过程,请确保将Open的async 参数设置为 true. 编译你的project. 得到"SplashScreenDownload.dll" (先暂时忽略project默认的 ClientBin/ 输出目录路径;你将在以后的步骤中改变这个目录).

CS

//download manage code assembly while splash screen displays 
var downloader = silverlightPlugin.createObject("downloader");
downloader.open("GET", "SplashScreenDownload.dll", true);

添加一个handler来侦听Downloader的Completed 事件, 然后调用用来启动请求的 Send 方法.

CS

downloader.addEventListener("completed", "downloadCompleted");
downloader.send();

打开 ProgressAnim.xaml进行编辑.添加Loaded 属性到根element中作为event handler. 并将其值赋为 "splashScreenLoaded". 这样就和你刚才创建的event handler 挂上勾了. 接下来, 你应该定义Completed 事件的handler了 .

编写转换过程的Handler
在你下载完成后, 你应该更换当前的XAML文件了, 因为你现在已经完整的拥有了托管 assembly,当然它在XAML文件中有x:Class 属性 .

进行转换过程Handler的编写
回来 TestPage.html 进行编辑.

编写一个 JavaScript event handler 并命名为 downloadCompleted. 在这个handler中, 同样,也通过documentbyID的方法来获得Silverlight control的引用.

创建一个string 变量, 并使这个 XAML string 成为一个Canvas 根 element,然后它将被加入到ProgresssAnim.xaml 页中来. 请确保 x:Class 值正确的指向了你project中build的出来的 assembly. 在Canvas 开始和结尾标记之间, 添加一行代表子element的string: TextBlock 并将其 x:Name 赋值为 myTextBlock.

调用 Control.content.createFromXAML, 保存好这个返回值,并作为一个输入参数传递到你要重新创建的过程中.

得到ProgressAnim.xaml 根 Canvas的引用. 移除根结点及以下所有的animation内容. 要实现这个过程, 请调用 rootCanvas.Children.RemoveAt(0);.

添加一个从createFromXAML中返回的object类型的参数作为Children对象添加到到ProgressAnim.xaml根 Canvas中来.

CS

function downloadCompleted(sender, eventArgs) {
var xaml = "";
xaml += "<Canvas xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Class='SplashScreenDownload.Page;assembly=SplashScreenDownload.dll' Loaded='Page_Loaded'>";
xaml += " <TextBlock Text='hello, world!' FontSize='20' x:Name='myTextBlock' />";
xaml += "</Canvas>";
var silverlightPlugin = document.getElementById("SilverlightControl");
fragment = silverlightPlugin.content.createFromXaml(xaml);
rootCanvas = sender.findName("rootCanvas");
rootCanvas.children.removeAt(0);
rootCanvas.children.add(fragment);
}

最后一笔
到这一步,splash screen 和 downloader 都已经创建完成了. 然而, 你可能想添加更多 UI到你的托管代码里,这样在完成转换后你能看到更多有趣的东西. 目前来说,你只是加载了一个几乎为空的XAML file.

完善project中的托管代码呈现
打开 Page.xaml 进行编辑. 粘贴 TextBlock element 到Canvas 根下. 给这个element 的 x:Name赋值,并添加一些文字内容.

注意
在运行的时候, 这并不是真正使用的页. 真正的页内容是从前面的那个步骤(即用字符串编写的XAML内容). 你这样做只是重覆这个过程,这将为编译后的文件能得到前台对象的正确引用提供服务.

编辑x:Class 属性. 从assembly 值中移除 "ClientBin/" . 你这是在模拟客户端的行为,因为downloader只将下载完的文件放在HTML页的同级下. (你不能设置downloader的下载文件存放在客户端的路径)

CS

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="SplashScreenDownload.Page;assembly=SplashScreenDownload.dll"
Width="640"
Height="480"
Background="White"
>
<TextBlock x:Name="myTextBlock">Hello</TextBlock>
</Canvas>

在Solution Explorer中, 右键单击 project 然后选择 Properties. 在 Build 选框中, 从Output Path中删除 "/ClientBin" (这个值应该是个空值,这样才能保证你的assembly将 build到你的 project 根下).

打开 Page.xaml.cs 进行编辑(如果你用VB则是 Page.xaml.vb). 添加一行代码到已经存在的Loaded event handler中来 .

CS

public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables 
InitializeComponent();
myTextBlock.Text = "Hello ... from unmanaged code.";
}

Compile应用程序.你将可以看到在下载过种中splash screen显示出来了. 为了得到最好的观察效果 (当然,这也将是最耗时间的), 你应该远程的来查看 project. 你可以把project放到别的远程机器上,然后你再访问.

原文地址

关注我们