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

作者:网络 来源:佚名 更新时间:2008-11-07 01:55:47 点击:

  本文基于目前最新框架的ctp版本,对它提供的淡入淡出动画功能在网页编程中进行试验。

  一、引言

  微软最新推出的ajax框架为asp.net ajax 1.0(下载地址为http://ajax.asp.net/downloads/default.aspx),此框架由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" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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"
style="width: 155px; height: 37px" language="javascript"
onclick="return fadeusingfutures(true)" />
<input id="btnfadeinanimate" style="width: 135px;
height: 37px" type="button" value="fade in" language="javascript"
onclick="return fadeusingfutures(false)" /><br />
<div id="animationtarget" style="width: 459px; height: 312px;
background-color: #ffcc00">
&nbsp;</div>
</div>
</form>
<script language="javascript" type="text/javascript">
<!--
sys.application.initialize();//脚本系统初始化
//取得指向动画目标(作为一个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 ? 
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>

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

||| <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控件必须位于一个块内,否则必定出现错误(忘记了,但我试验过!)。其次:

<asp:scriptreference assembly="microsoft.web.preview"
name="previewglitz.js" />

  不能改为:

<asp:scriptreference 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:示例网页运行结果快照

  三、小结

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