使用ASP.NET AJAX 1.0框架PreviewGlitz进行网页动画编程

一、引言

微软最新推出的AJAX框架为ASP.NET AJAX 1.0（下载地址为 [url]http://ajax.asp.net/downloads/default.aspx[/url]），此框架由ASP.NET 2.0 AJAX Extensions 1.0和ASP.NET AJAX Control Toolkit两个基本部分组成。此外，还提供了一个更新一些的CTP（社区测试试用）版本，下载页面如下图1所示：

图1：下载示例程序所用的CTP版本附加脚本库

声称为“国内第一本Atlas图书”的《Atlas基础教程—ASP.NET Ajax快速开发》（美：Laurence Moroney著；陈黎夫译；2006年11月，人民邮电出版社）第九章“使用AtlasUIGlitz脚本库”中，对于ASP.NET AJAX框架（原名为Atlas）提供的附加脚本库提供的动画功能作了较好的展示，但是新版本的ASP.NET AJAX框架1.0一问世，这一章中内容立即变得“面目全非”。第一，据本人分析，原文中的所有案例都是基于Atlas脚本声明性编程，而在新框架中这种 方式已经不再推荐使用；第二，原来的脚本库名已改（AtlasUIGlitz.js→PreviewGlitz.js，新文件存储于程序集 “Microsoft.Web.Preview.dll”中），且功能上与原先也有所不同。

本文基于目前最新框架的CTP版本，对它提供的淡入淡出动画功能在网页编程中进行试验。注意，在此，我们所使用的编程方式为JavaScript脚本编程方式。

【注意】本文示例试验环境为：Windows XP Professional＋VS2005＋ASP.NET 2.0 AJAX Extensions 1.0（见上图1）＋ASP.NET AJAX Futures January CTP；恕不赘述。

二、创建淡入淡出动画示例

伴随上面的CTP版本的程序集“Microsoft.Web.Preview.dll”提供了源码形式的几个.js脚本文件，但原文件把几百行的脚 本集中到了一行内（不知什么原因？），且没有任何注释，可读性极差。因为本文讨论的“淡入淡出”动画效果部分在原文中比较简短，所以，我干脆整理了一下， 列举如下：

//---------------------------------------------------------- // Copyright (C) Microsoft Corporation. All rights reserved. //---------------------------------------------------------- // PreviewGlitz.js Type.registerNamespace("Sys.Preview.UI.Effects"); //……………………（省略其它内容） //--------------------------------------------------- //FadeAnimation动画功能 //--------------------------------------------------- Sys.Preview.UI.Effects.FadeEffect=function(){ throw Error.invalidOperation() }; Sys.Preview.UI.Effects.FadeEffect.prototype={ FadeIn:0,FadeOut:1 }; Sys.Preview.UI.Effects.FadeEffect.registerEnum("Sys.Preview.UI.Effects.FadeEffect"); Sys.Preview.UI.Effects.FadeAnimation=function(){ //初始化基类，以便调用基类中的功能 Sys.Preview.UI.Effects.FadeAnimation.initializeBase(this) }; //使用javascript prototype模型功能定义此类中的方法及属性 Sys.Preview.UI.Effects.FadeAnimation.prototype={ _effect:Sys.Preview.UI.Effects.FadeEffect.FadeIn,get_effect:function(){ return this._effect}, set_effect:function(a){ this._effect=a}, getAnimatedValue:function(c){ var a=0,b=1; if(this._effect===Sys.Preview.UI.Effects.FadeEffect.FadeOut){ a=1; b=0 } return Sys.Preview.UI.Effects.Glitz.interpolate(a,b,c) }, onStart:function(){ var a=0; if(this._effect===Sys.Preview.UI.Effects.FadeEffect.FadeOut) a=1; this.setValue(a)}, onEnd:function(){ var a=1; if(this._effect===Sys.Preview.UI.Effects.FadeEffect.FadeOut) a=0; this.setValue(a)}, setValue:function(a){ Sys.Preview.UI.Effects.Glitz.setElementOpacity(this.get_target().get_element(),a) } }; Sys.Preview.UI.Effects.FadeAnimation.descriptor={ properties:[{ name:"effect",type:Sys.Preview.UI.Effects.FadeEffect}] }; //注册这个新类 Sys.Preview.UI.Effects.FadeAnimation.registerClass("Sys.Preview.UI.Effects.FadeAnimation", Sys.Preview.UI.Effects.Animation) //下面这一句是必须的 if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();

(一)构建示例页面

启动Visual Studio 2005，选择“文件→新建网站…”，然后选择“ASP.NET AJAX CTP-Enabled Web Site”模板，命名工程为“AjaxFadeAnimation”，并选择C#作为编程语言（如图2所示），最后点击OK。

图2：使用“ASP.NET AJAX CTP-Enabled Web Site”模板快速创建AJAX应用程序

注意，系统自动在网站根目录下，创建了一个Bin子目录，并在该目录下提供了一个“Microsoft.Web.Preview.dll”文件。而 且还注意到，系统自动为Default.aspx页面添加了一个ScriptManager服务器控件。这个控件是整个ASP.NET AJAX 1.0框架的核心，它管理着客户端运行时所需要的用于实现客户端功能的各种JavaScript脚本库的部署。而且，在新版本的框架中，这个控件的功能更 为强大，使用更为简易。还应特别注意，这时系统也自动地添加了对于System.Web.Extensions.dll程序集的引用，但是，没有显式地列 举于Bin子目录下。然后，把Default.aspx页面修改成如下图3所示形式：

图3：设计调用Web服务的客户端Web页面

上图中，我们简单地加入了两个HTML Input Button控件和一个DIV对象（下部的×××大矩形）。我们的目的是，运行网页后，点击这两个不同的按钮实现下部DIV对象的淡入淡出动画效果展示。

下面是这个页面相应的源码形式：

   
   
   
   

    
    
    
    <%@ Page Language="C#" AutoEventWireup="true" 
   
   
   
   
   
   
   
   

    
    
    
    CodeFile="Default.aspx.cs" Inherits="Default2" %>
   
   
   
   
   
   
   
   

    
    
    
     < Assembly="Microsoft.Web.Preview">
     
      < Assembly="Microsoft.Web.Preview"><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
     
    
   
   
   
   
   
   
   
   

    
    
    
     < Assembly="Microsoft.Web.Preview">
     
      < Assembly="Microsoft.Web.Preview">  Inherits="Default2" %>
     
    
   
   
   
   
   
   
   
   

    
    
    
     < Assembly="Microsoft.Web.Preview">
     
      < Assembly="Microsoft.Web.Preview">
   
   
   
   

    
    
    
     < Assembly="Microsoft.Web.Preview">
     
      < Assembly="Microsoft.Web.Preview">  "
      [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
     
    
   
   
   
   
   
   
   
   

    
    
    
     < Assembly="Microsoft.Web.Preview">
     
      < Assembly="Microsoft.Web.Preview">
      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

   
   
   
   

    
    
    
     < Assembly="Microsoft.Web.Preview">
     
      < Assembly="Microsoft.Web.Preview">           style="width: 155px; height: 37px" language="javascript" 
     
    
   
   
   
   
   
   
   
   

    
    
    
     < Assembly="Microsoft.Web.Preview">
     
      < Assembly="Microsoft.Web.Preview">            FadeUsingFutures(true)" />
      
    
    
    

     
      < Assembly="Microsoft.Web.Preview">           height: 37px" type="button" value="Fade In" language="javascript" 
     
    
   
   
   
   
   
   
   
   

    
    
    
     < Assembly="Microsoft.Web.Preview">
     
      < Assembly="Microsoft.Web.Preview">            FadeUsingFutures(false)" />

      
    
    
    

     
      < Assembly="Microsoft.Web.Preview">           background-color: #ffcc00">
      
    
    
    
 
      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

      
    
    
    

     
    
   
   
   
   

显然，我们在这里又添加了许多内容。首先，请注意下面一块代码：

< Assembly="Microsoft.Web.Preview"> < Assembly="Microsoft.Web.Preview">

根据框架及从网上查询的其它资料，ScriptManager控件必须位于一个< form>块内，否则必定出现错误（忘记了，但我试验过！）。其次：

Name="PreviewGlitz.js" />

不能改为：

< Assembly="Microsoft.Web.Preview">  < Assembly="Microsoft.Web.Preview">Name="Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js" />

形式；否则，将会出现类似如下所示错误提示：

1.Assembly 'Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' does not contain a Web resource with name 'Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js' 2.Assembly 'Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' does not contain a Web resource with name 'Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js'

以上都是新框架规定使用的“死格式”，在此不赘述。

在接下来的javascript脚本中，对应新框架建议下的JavaScript脚本编程，已经加上了详细注释，恕不再多加解释（请参考本文开始提供的源.js文件源码）。

没有问题，则运行结果如下图4所示：

图4：示例网页运行结果快照

三、小结

新框架刚出，且参考资料实在少极。所以，本人基于原框架提供的资源（似乎没有提供直接的这方面示例，至少在最新框架中没有提供）和亲自试验，做了本文中的小示例演示。仅供各位参考。