使用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"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

< 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"><html xmlns="[url]http://www.w3.org/1999/xhtml[/url]" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewGlitz.js" />
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
</Scripts>

</asp:ScriptManager>

<input id="btnFadeOutAnimate" type="button" value="Fade Out"

< 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)" />
<input id="btnFadeInAnimate" style="width: 135px;

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

< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> FadeUsingFutures(false)" /><br />
<div id="animationTarget" style="width: 459px; height: 312px;

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

//取得指向动画目标（作为一个Sys.UI.Control对象）的句柄
var domElementVar = new Sys.UI.Control( $get("animationTarget") );
function FadeUsingFutures( fadeOut )
{
//创建FadeAnimation的一个实例
var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();

//决定是淡入还是淡出
var fadeEffect = fadeOut ?

< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> Sys.Preview.UI.Effects.FadeEffect.FadeOut : Sys.Preview.UI.Effects.FadeEffect.FadeIn ;

//隐藏/显示相应的按钮
$get("btnFadeOutAnimate").style.display = fadeOut ? "none":"block";
$get("btnFadeInAnimate").style.display = fadeOut ? "block":"none";
//设置动画持续时间
fadeAnimation.set_duration( 0.3 );
//设置动画目标为一个Sys.UI.Control对象
fadeAnimation.set_target( domElementVar );
//设置动画效果( FadeIn / FadeOut )
fadeAnimation.set_effect( fadeEffect );
//设置最大不透明值
fadeAnimation.setValue( 70 );
//播放动画
fadeAnimation.play();
}
// -->
</script>
</body>
</html>

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

< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> <form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewGlitz.js" />
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
</Scripts>
</asp:ScriptManager>

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

<asp:ScriptReference Assembly="Microsoft.Web.Preview"

Name="PreviewGlitz.js" />

不能改为：

< Assembly="Microsoft.Web.Preview"> <asp:ScriptReference 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：示例网页运行结果快照

三、小结

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

本文转自朱先忠老师51CTO博客，原文链接：http://blog.51cto.com/zhuxianzhong/59830 ，如需转载请自行联系原作者

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

在ASP.NET AJAX 1.0框架中访问Web服务
一. 简介如今,微软最新推出的AJAX框架为ASP.NET AJAX 1.0(下载地址为[url]http://ajax.asp.net/downloads/default.aspx[/ur ...
ASP.NET AJAX 4.0 中的数据绑定
代码下载: 围绕该 bush 击退停止:AJAX 是可能仅使用一个强的 JavaScript 引擎,可以在客户端浏览器中运行,并提供更高级和异步功能基础的. JavaScript 库当前包含在 ASP ...
ASP.NET AJAX 1.0 发布
ASP.NET AJAX在今天正式发布了,同时发布的还包括它的源码以及ASP.NET AJAX控件工具包. 值得一提的是ASP.NET AJAX控件工具包中包含有30多个免费的ASP.NET AJAX ...
ASP.NET Ajax 1.0 RC 'Sys' 未被定義問題
ASP.NET Ajax 1.0 RC 'Sys' 未被定義問題您在依照筆者的影片安裝ASP.NET Ajax 1.0 RC 之後,可能會在測試時發現有底下的錯誤訊息: 請在 Web.Config ...
AjaxControlToolkit requires ASP.NET Ajax 4.0 scripts错误收藏
AjaxControlToolkit requires ASP.NET Ajax 4.0 scripts错误收藏今天在用ajax做一个搜索自动补全的例子时,出现了一个问题这是错误提示:AjaxC ...
asp.net ajax 1.0中detailview与updatepanel混合使用的例子
asp.net ajax 1.0中detailview与updatepanel混合使用的例子在asp.net ajax 1.0中,如果有一个detailview控件,想做到每点detailview中 ...
[ASP.NET AJAX]类似.NET框架的JavaScript扩展
最近AJAX风靡全世界,在CommunityServer中他运用了自己定义的封装了js,并且可以跨浏览器,在较小的应用程序中,他比较适合,而且使用也比较简单.但是对微软的Microsoft AJAX还 ...
错误:'sys'未定义解决方法.(asp.net Ajax v1.0.61025版)
重装系统后又装了ajax 可是用的时候老是提示"错误:'sys'未定义",看了看以前做的项目,发现Web.Config里面少了<httpHandlers>和<ht ...
基于微软ASP.NET AJAX框架开发幻灯片播放网页
一. 简介最近,微软ASP.NET Ajax 1.0框架以其完整的基于Ajax的web开发方案呈现在web技术人员的前面,凭借与遗留ASP.NET系统的有机整合以及完全面向对象的客户端Ja ...

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

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

最新文章

热门文章