0框架PreviewGlitz进行网页动画编程,AJAX入门系列
分类:web前端

在 ASP.NET AJAX 官方网站 以前有这么一个词汇-CTP,CTP 在这里是英文 Community Technology Preview 的缩写,表示“社区技术预览版”,即微软和微软社区 ASP.NET AJAX 爱好者共同创建的新的 Ajax 效果,属于还没有归入正式版的内容。但似乎现在 ASP.NET AJAX 中现在已经没有使用这个词汇了,直接使用 ASP.NET Futures。

BKJIA.com独家特稿】一、引言

经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不继续误导广大朋友,所以不再作为推荐系列文章,如果有需要参考的朋友,可以直接到随笔分类中查看。

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

微软最新推出的AJAX框架为ASP.NET AJAX 1.0下载地址为 2.0 AJAX Extensions 1.0和ASP.NET AJAX Control Toolkit两个基本部分组成。此外,还提供了一个更新一些的CTP社区测试试用)版本,下载页面如下图1所示:

ASP.NET AJAX Beta改动如此之大,鉴于又没有很好的中文参考资料,所以决定最近开始写作ASP.NET AJAX入门系列,这个系列我会把ASP.NET AJAX当作一个全新的东西去对待,不再考虑以前的Atlas,把自己对ASP.NET AJAX的研究与大家分享,便于初学的朋友少走一些弯路。对Atlas熟悉的朋友可以推荐看Dflying Chen的《拥抱变化——从Atlas到ASP.NET AJAX系列》,以及老赵的《深入Atlas系列》。由于个人的能力和掌握的程度有限 ,难免出现错误和遗漏的地方,还请大家多多理解和指正。

  一、引言

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

OK,让我们从这里开始!

  微软最新推出的AJAX框架为ASP.NET AJAX 1.0(下载地址为 2.0 AJAX Extensions 1.0和ASP.NET AJAX Control Toolkit两个基本部分组成。此外,还提供了一个更新一些的CTP(社区测试试用)版本,下载页面如下图1所示:

声称为“国内第一本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”中),且功能上与原先也有所不同。

 

图片 1

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

一.ASP.NET AJAX组成部分

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

注意】本文示例试验环境为:Windows XP Professional+VS2005+ASP.NET 2.0 AJAX Extensions 1.0见上图1)+ASP.NET AJAX Futures January CTP;恕不赘述。

在ASP.NET AJAX官方网站上有如下三个下载:

  声称为“国内第一本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”中),且功能上与原先也有所不同。

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

1.ASP.NET AJAX:这部分是ASP.NET AJAX的核心部分,包括了核心AJAX类型系统,网络协议层(networking stack),组件模型,扩展器(extender)基类,以及与ASP.NET集成的服务器端功能(包括广受欢迎的ScriptManager,UpdatePanel,和 Timer控件)。功能列表如下:

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

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

服务端功能列表

Asynchronous client-to-server networking

Authentication as a Web service

ControlExtender class

Profile as a Web service

ScriptManager and ScriptManagerProxy controls

Static page methods as Web services

Timer control

UpdatePanel control

UpdateProgress control

客户端功能列表

Authentication for JavaScript

Behavior class

Calling .asmx Web services from JavaScript

Component class

Control class

Debug class

JavaScript Array type extensions

JavaScript Boolean type extensions

JavaScript Error type extensions

JavaScript Number type extensions

JavaScript Object type extensions

JavaScript String type extensions

JSON serialization

Profile for JavaScript

Trace class

  【注意】本文示例试验环境为:Windows XP Professional+VS2005+ASP.NET 2.0 AJAX Extensions 1.0(见上图1)+ASP.NET AJAX Futures January CTP;恕不赘述。

//----------------------------------------------------------
// 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();

2.ASP.NET AJAX “Value-Add”CTP:ASP.NET AJAX社区支持的“增值”CTP部分,包括了以前各个Atlas CTP版本包含的,但并不在完全支持的“核心”1.0 版本内的额外的高级特性。通过进一步的反馈,这些将会逐步稳定的增加到核心1.0中去。功能列表如下:

[1] [2] [3] [4]  下一页

文章相关内容】

服务端功能列表

AutoCompleteExtender class

Cross-browser Web Parts drag-and-drop

DragOverlayExtender control

PopupExtender class

客户端功能列表

Actions components

AutoCompleteBehavior class

BatchResponse class

Binding component

Button control

Checkbox control

Click behavior

Counter class

Cross-browser Web Parts

Data control

DragDropList control

DragDropManager component

DraggableListItem control

FadeAnimation component

Floating behavior

Hover behavior

Hyperlink control

Image control

Input control

Label control

Layout behavior

Opacity behavior

Popup behavior

Selector control

ServiceMethodRequest class

Sys.Data and Sys.UI.Data namespaces

Textbox control

Timer control

Validator controls

xml-script support

第一页:引言

3.ASP.NET AJAX Control Toolkit:包含了基于ASP.NET AJAX 1.0 版“核心”下载版本的28个非常酷的免费AJAX控件。它是一个开源项目,由微软和非微软开发人员共同开发的,去CodePlex下载代码。

第二页:创建淡入淡出动画示例  

 

第三页:源代码和运行结果  

二.安装ASP.NET AJAX

稿】一、引言 微软最新推出的AJAX框架为ASP.NET AJAX 1.0下载地址为 2.0 AJAX...

1.在安装ASP.NET AJAX 1.0 Beta之前,需要先卸载以前所有的CTP版本。

2.下载ASP.NET AJAX 1.0 Beta安装包,安装时Microsoft.Web.Extensions.dll程序集将被安装在GAC(Global Assembly Cache)中,所以使用时不需要再在Web站点的Bin文件夹中包括该程序集。

3.下载安装ASP.NET AJAX “Value-Add”CTP和ASP.NET AJAX Control Toolkit。列表如下:

名称

描述

Accordion:

Create efficient UI from multiple panes with this animated control.

AlwaysVisibleControl

Docks a panel to a corner of the browser window and keeps it visible even when the user scrolls.

Animation

Adds powerful, easy to use animations to any element or control.

CascadingDropDown

Easily link drop downs, complete with asynchronous population and no postbacks!

CollapsiblePanel

This extender allows panels on your page to collapse and expand with no code.

ConfirmButton

This extender adds a confirm dialog to any Button, LinkButton, or ImageButton control.

DragPanel

Makes any panel into an object that you can drag around the page.

DropDown

This extender can wrap any control to provide a SharePoint-style drop-down menu that is attached to the control.

DropShadow

This extender adds attractive drop shadows to any control on the page

DynamicPopulate

Replace the contents of a page element with the result of a web-service call.

FilteredTextBox

Restrict the types of input that text boxes will accept.

HoverMenu

Allows UI to pop up next to a control when the mouse hovers over it.

ModalPopup

Allows you to show styled modal UI without using HTML dialogs.

MutuallyExlcusiveCheckBox

By adding a number of checkboxes to the same “Key”, only one checkbox with the specified key can be checked at a time.

NoBot

Applies simple rules to prevent automated bots or scripts from posting to a page.

NumericUpDown

Allow users to easily increase and decrease values using the mouse to scroll through values.

PagingBulletedList

Add paging and sorting to long bulleted lists.

PasswordStrength

Give your users visual cues to help them create secure passwords.

PopupControl

This extender turns any panel into a popup.

Rating

Let your users easily give feedback by rating content with this easy-to-use control.

ReorderList

This control is a full-featured data-bound control that allows its elements to be reordered on the client via drag and drop.

ResizableControl

Allow users to dynamically resize content, right in the browser

RoundedCorners

Rounds the corners of any control for a clean, professional look!

Slider

Adds an elegant scrollbar-like user interface for setting numeric values.

TextBoxWatermark

This extender adds "watermark" prompt text to TextBoxes on the page.

ToggleButton

This extender turns an ASP.NET CheckBox into an image checkbox.

UpdatePanelAnimation

Animates page elements corresponding to hidden postback activity.

ValidatorCallout

This extender enhances the functionality of existing ASP.NET validators.

 

三.在Visual Studio.NET 2005开发基于ASP.NET AJAX的应用

安装完ASP.NET AJAX后,打开Visual Studio.NET 2005中新建Web Site,在项目模板中会出现一项ASP.NET AJAX-enabled Web site,直接选择它就可以了,如下图:

图片 2

新建完成的项目中会自动在Web.config中做好相关的配置,并且AJAXExtensionToolbox.dll已经添加到了VS的工具箱中,不需要再手工添加。

 

概述篇简单的介绍这里,从下一篇开始学习ASP.NET AJAX中的每一项具体的功能。

下篇预告:ASP.NET AJAX入门系列(2):使用ScriptManager


本文由10bet手机官网发布于web前端,转载请注明出处:0框架PreviewGlitz进行网页动画编程,AJAX入门系列

上一篇:我购买了一台acer笔记本,微软内部Email10bet手机官网: 下一篇:没有了
猜你喜欢
热门排行
精彩图文