火炏炎焱燚

火炏炎焱燚

统计

留言簿(1)

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

阅读排行榜

评论排行榜

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

微软最新推出的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" %>

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

三、小结

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



posted on 2007-04-11 08:32 火炏炎焱燚 阅读(83) 评论(0)  编辑 收藏 引用

只有注册用户登录后才能发表评论。