posts - 615, comments - 10492, trackbacks - 594, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

新瓶旧酒ASP.NET AJAX(7) - 客户端脚本编程(Sys命名空间下的类)

Posted on 2007-06-22 08:32 webabcd 阅读(...) 评论(...) 编辑 收藏
[索引页]
[源码下载]


新瓶旧酒ASP.NET AJAX(7) - 客户端脚本编程(Sys命名空间下的类)


作者:webabcd


介绍
Sys命名空间是Microsoft AJAX Library的根命名空间。本文主要学习一下其中的Application类、ApplicationLoadEventArgs类、CultureInfo类和StringBuilder类。


关键
1、Application Class
    ·init事件 - 脚本加载完毕,对象创建之前。
    ·load事件 - 对象被创建和初始化。可以用pageLoad()
    ·unload事件 - window.unload时。可以用pageUnload()
    ·notifyScriptLoaded() - 通知ScriptManager某段脚本已经加载完毕

2、ApplicationLoadEventArgs Class
    ·components - 最后一次触发load事件时创建的Components
    ·isPartialLoad - 是否是部分刷新

3、CultureInfo Class
    ·CurrentCulture字段 - 当前的Culture,返回CurrentCulture对象
    ·name字段 - Culture的名称
    ·dateTimeFormat - 获得dateTimeFormat对象,其内有n多格式化类型
    ·numberFormat - 获得numberFormat对象,其内有n多格式化类型

4、StringBuilder Class
    ·append(text) - 添加指定字符串到StringBuilder对象的结尾
    ·appendLine() - 添加一个换行符到StringBuilder对象的结尾
    ·appendLine(text) - 添加指定字符串到StringBuilder对象的结尾并添加一个换行符
    ·clear() - 清除StringBuilder对象所有内容
    ·isEmpty() -  StringBuilder对象的内容是否为空
    ·toString() - 将StringBuilder对象的内容转换为字符串
    ·toString(separator) - 在StringBuilder对象内的每一个元素的结尾处添加指定字符串

5、其它请查看官方文档


示例
CustomButton.js
Type.registerNamespace("Demo");

Demo.CustomButton 
= function(element) 
{
    
// 该类继承自Sys.UI.Control,调用基类构造函数
    Demo.CustomButton.initializeBase(this, [element]);

    
this._clickDelegate = null;
    
this._hoverDelegate = null;
    
this._unhoverDelegate = null;
}

Demo.CustomButton.prototype 
= 
{
    
// 定义text属性 - 元素显示的信息
    get_text: function() 
    
{
        
// element - Sys.UI.Control的属性
        return this.get_element().innerHTML;
    }
,
    set_text: 
function(value) 
    
{
        
this.get_element().innerHTML = value;
    }
,

    
// 添加或移除click事件
    add_click: function(handler) 
    
{
        
// events - Sys.Component的属性
        this.get_events().addHandler('click', handler);
    }
,
    remove_click: 
function(handler) 
    
{
        
this.get_events().removeHandler('click', handler);
    }
,
    
    
// 添加或移除hover事件
    add_hover: function(handler) 
    
{
        
this.get_events().addHandler('hover', handler);
    }
,
    remove_hover: 
function(handler) 
    
{
        
this.get_events().removeHandler('hover', handler);
    }
,

    
// 添加或移除unhover事件
    add_unhover: function(handler) 
    
{
        
this.get_events().addHandler('unhover', handler);
    }
,
    remove_unhover: 
function(handler) 
    
{
        
this.get_events().removeHandler('unhover', handler);
    }
,

    
// 释放资源
    dispose: function() 
    
{
        
var element = this.get_element();

        
if (this._clickDelegate) 
        
{
            
// Sys.UI.DomEvent removeHandler()
            $removeHandler(element, 'click', this._clickDelegate);
            
delete this._clickDelegate;
        }


        
if (this._hoverDelegate) 
        
{
            $removeHandler(element, 'focus', 
this._hoverDelegate);
            $removeHandler(element, 'mouseover', 
this._hoverDelegate);
            
delete this._hoverDelegate;
        }


        
if (this._unhoverDelegate) 
        
{
            $removeHandler(element, 'blur', 
this._unhoverDelegate);
            $removeHandler(element, 'mouseout', 
this._unhoverDelegate);
            
delete this._unhoverDelegate;
        }

        Demo.CustomButton.callBaseMethod(
this, 'dispose');
    }
,

    
// 初始化
    initialize: function() 
    
{
        
var element = this.get_element();

        
if (!element.tabIndex) element.tabIndex = 0;

        
if (this._clickDelegate === null
        
{
            
// Function.createDelegate用来创建一个调用“this”上下文下的特定函数的委托
            this._clickDelegate = Function.createDelegate(thisthis._clickHandler);
        }

        
// Sys.UI.DomEvent addHandler()
        $addHandler(element, 'click', this._clickDelegate);

        
if (this._hoverDelegate === null
        
{
            
this._hoverDelegate = Function.createDelegate(thisthis._hoverHandler);
        }

        $addHandler(element, 'mouseover', 
this._hoverDelegate);
        $addHandler(element, 'focus', 
this._hoverDelegate);

        
if (this._unhoverDelegate === null
        
{
            
this._unhoverDelegate = Function.createDelegate(thisthis._unhoverHandler);
        }

        $addHandler(element, 'mouseout', 
this._unhoverDelegate);
        $addHandler(element, 'blur', 
this._unhoverDelegate);

        Demo.CustomButton.callBaseMethod(
this, 'initialize');
    }
,
    
    
// click事件处理器
    _clickHandler: function(event) 
    
{
        
var h = this.get_events().getHandler('click');
        
if (h) h(this, Sys.EventArgs.Empty);
    }
,
    
// hover事件处理器
    _hoverHandler: function(event) 
    
{
        
var h = this.get_events().getHandler('hover');
        
if (h) h(this, Sys.EventArgs.Empty);
    }
,
    
// unhover事件处理器
    _unhoverHandler: function(event) 
    
{
        
var h = this.get_events().getHandler('unhover');
        
if (h) h(this, Sys.EventArgs.Empty);
    }

}

Demo.CustomButton.registerClass('Demo.CustomButton', Sys.UI.Control);

// 通知ScriptManager这段脚本已经加载完毕
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Application.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Application.aspx.cs"
    Inherits
="ClientScripting_Sys_Application" Title="init Event和load Event和unload Event" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="Server">
        
<Scripts>
            
<asp:ScriptReference Path="~/ClientScripting/Sys/CustomButton.js" />
        
</Scripts>
    
</asp:ScriptManagerProxy>

    
<script type="text/javascript">
    
        Sys.Application.add_init(applicationInitHandler);
        
function applicationInitHandler() 
        
{
            
// Sys.Component.create()
            $create
            (
                Demo.CustomButton, 
                
{text: '自定义Button(Button1)'}
                
{click: doClick, hover: doHover, unhover: doUnhover},
                
null
                $get('Button1')
            );
            
            $create
            (
                Demo.CustomButton, 
                
{text: '自定义Button(Label1)'}
                
{click: doClick, hover: doHover, unhover: doUnhover},
                
null
                $get('Label1')
            );
        }


        
function doClick(sender, e) 
        
{
            Sys.Debug.trace(
"鼠标点击" + sender.get_id());
        }

        
function doHover(sender, e) 
        
{
            Sys.Debug.trace(
"鼠标经过" + sender.get_id());
        }

        
function doUnhover(sender, e) 
        
{
            Sys.Debug.trace(
"鼠标离开" + sender.get_id());
        }



        Sys.Application.add_load(applicationLoadHandler);
        
function applicationLoadHandler(sender, e) 
        
{
            alert(
"ApplicationLoad");
            
// isPartialLoad - 是否是部分刷新
            Sys.Debug.trace('是否是部分刷新:' + e.get_isPartialLoad());
            
for (var i=0; i<e.get_components().length; i++)
            
{
                
// components - 最后一次触发load事件时创建的Components
                Sys.Debug.trace('最后一次触发load事件时创建的Component:' + e.get_components()[i].get_id());
            }

        }

        
        
        Sys.Application.add_unload(applicationUnloadHandler);
        
function applicationUnloadHandler() 
        
{
            alert('ApplicationUnload');
        }

        
        
        
function pageLoad() 
        
{
            
// Sys.Application.findComponent() - 根据id查找Component
            // Sys.Application.findComponent(id, parent) - parent可选
            alert($find('Button1').get_id());
        }


    
</script>

    
<script type="text/javascript">
        
function listComponents() 
        
{
            
// getComponents() - 获得所有Component(数组)
            var c = Sys.Application.getComponents();

            
for (var i=0; i<c.length; i++
            
{
                
var id = c[i].get_id();
                
var type = Object.getTypeName(c[i]);
                
                Sys.Debug.trace('Component:' 
+ i + ': id=+ id + ', type=+ type);
            }

        }

    
</script>

    
<p>
        
<button type="button" id="Button1">
        
</button>
        
<span id="Label1"></span>
    
</p>
    
<p>
        
<input type="button" id="Button2" value="列举所有Component" onclick="listComponents()" />
    
</p>
    
<p>
        
<textarea id="TraceConsole" style="width: 500px; height: 400px;"></textarea>
    
</p>
</asp:Content>

运行结果
1、页面加载
弹出框,信息:ApplicationLoad
是否是部分刷新:false
最后一次触发load事件时创建的Component:Button1
最后一次触发load事件时创建的Component:Label1
弹出框,信息:Button1

2、鼠标点击、经过和离开“自定义Button(Button1)”或“自定义Button(Label1)”
有相应的提示

3、单击“列举所有Component”按钮
Component:0: id=Button1, type=Demo.CustomButton
Component:1: id=Label1, type=Demo.CustomButton

4、关闭浏览器
弹出框,信息:ApplicationUnload


CultureInfo.aspx(注:设置ScriptManager的EnableScriptGlobalization="True")
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="CultureInfo.aspx.cs"
    Inherits
="ClientScripting_Sys_CultureInfo" Title="CultureInfo" Culture="auto"
    UICulture
="auto" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    
<script runat="Server">
        protected override 
void InitializeCulture()
        
{
            string s 
= Request.QueryString["currentculture"];

            
if (!String.IsNullOrEmpty(s))
            
{
                System.Threading.Thread.CurrentThread.CurrentUICulture 
= new System.Globalization.CultureInfo(s);
                System.Threading.Thread.CurrentThread.CurrentCulture 
= System.Globalization.CultureInfo.CreateSpecificCulture(s);
            }

        }

    
</script>

    
<p>
        
<href="?currentculture=zh-cn">中文</a> &nbsp; <href="?currentculture=en-us">英文</a>
        
&nbsp; <href="?currentculture=sq">阿尔巴尼亚语</a>
    
</p>
    
<div>
        
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
        
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
    
</div>

    
<script type="text/javascript">
        
// 创建一个Sys.CultureInfo对象
        var cultureObject = Sys.CultureInfo.CurrentCulture;
        
        
// 当前Culture的名称
        var cultureName = cultureObject.name;
        
        
// 获得dateTimeFormat对象
        var dtfObject = cultureObject.dateTimeFormat;
        
        
// 创建一个具有各种格式化类型的数组
        var myArray = 
        [
            'AMDesignator', 
            'Calendar', 
            'DateSeparator', 
            'FirstDayOfWeek', 
            'CalendarWeekRule', 
            'FullDateTimePattern', 
            'LongDatePattern', 
            'LongTimePattern', 
            'MonthDayPattern', 
            'PMDesignator', 
            'RFC1123Pattern', 
            'ShortDatePattern', 
            'ShortTimePattern', 
            'SortableDateTimePattern', 
            'TimeSeparator', 
            'UniversalSortableDateTimePattern', 
            'YearMonthPattern', 
            'AbbreviatedDayNames', 
            'ShortestDayNames', 
            'DayNames', 
            'AbbreviatedMonthNames', 
            'MonthNames', 
            'IsReadOnly',
            'NativeCalendarName', 
            'AbbreviatedMonthGenitiveNames', 
            'MonthGenitiveNames'
        ];

        
var result = '区域名称:' + cultureName;
        
        
for (var i = 0, l = myArray.length; i < l; i++
        
{
            
var arrayVal = myArray[i];
            
if (typeof(arrayVal) !== 'undefined') 
            
{
                result 
+= "<tr><td>" + arrayVal + "</td><td>" + eval("dtfObject." + arrayVal) + '</td></tr>';
            }

        }

        
var resultHeader = "<tr><td><b>格式化类型</b></td><td><b>格式化值</b></td></tr>"
        $get('
<%= Label1.ClientID %>').innerHTML = "<table border=1>" + resultHeader + result +"</table>";

        
var d = new Date();
        $get('
<%= Label2.ClientID %>').innerHTML = "<p/><h3>dateTimeFormat示例:" + 
            d.localeFormat(Sys.CultureInfo.CurrentCulture.dateTimeFormat.FullDateTimePattern) 
+ "</H3>";
        
        
        
        
// 获得numberFormat对象
        nfObject = cultureObject.numberFormat;
        
        
// 创建一个具有各种格式化类型的数组
        myArray = 
        [
            'CurrencyDecimalDigits', 
            'CurrencyDecimalSeparator', 
            'IsReadOnly', 
            'CurrencyGroupSizes',
            'NumberGroupSizes', 
            'PercentGroupSizes', 
            'CurrencyGroupSeparator', 
            'CurrencySymbol', 
            'NaNSymbol', 
            'CurrencyNegativePattern', 
            'NumberNegativePattern', 
            'PercentPositivePattern', 
            'PercentNegativePattern', 
            'NegativeInfinitySymbol', 
            'NegativeSign', 
            'NumberDecimalDigits', 
            'NumberDecimalSeparator', 
            'NumberGroupSeparator', 
            'CurrencyPositivePattern', 
            'PositiveInfinitySymbol', 
            'PositiveSign', 
            'PercentDecimalDigits', 
            'PercentDecimalSeparator', 
            'PercentGroupSeparator', 
            'PercentSymbol', 
            'PerMilleSymbol', 
            'NativeDigits', 
            'DigitSubstitution'
        ];

        result 
= '区域名称:' + cultureName;
        
for (var i = 0, l = myArray.length; i < l; i++
        
{
            
var arrayVal = myArray[i];
            
if (typeof(arrayVal) !== 'undefined') 
            
{
                result 
+= "<tr><td>" + arrayVal + "</td><td>" + eval("nfObject." + arrayVal) + '</td></tr>';
            }

        }

        
var resultHeader = "<tr><td><b>格式化类型</b></td><td><b>格式化值</b></td></tr>"
        $get('
<%= Label3.ClientID %>').innerHTML = "<table border=1>" + resultHeader + result + "</table>";
     
        
var n = 99.987;
        $get('
<%= Label4.ClientID %>').innerHTML = "<p/><h3>numberFormat示例:" + n.localeFormat("C"+ "<h3>";
        
    
</script>

</asp:Content>

运行结果
区域名称:zh-CN
格式化类型 格式化值
AMDesignator 上午
Calendar [object Object]
DateSeparator -
FirstDayOfWeek 0
CalendarWeekRule 0
FullDateTimePattern yyyy'年'M'月'd'日' H:mm:ss
LongDatePattern yyyy'年'M'月'd'日'
LongTimePattern H:mm:ss
MonthDayPattern M'月'd'日'
PMDesignator 下午
RFC1123Pattern ddd, dd MMM yyyy HH':'mm':'ss 'GMT'
ShortDatePattern yyyy-M-d
ShortTimePattern H:mm
SortableDateTimePattern yyyy'-'MM'-'dd'T'HH':'mm':'ss
TimeSeparator :
UniversalSortableDateTimePattern yyyy'-'MM'-'dd HH':'mm':'ss'Z'
YearMonthPattern yyyy'年'M'月'
AbbreviatedDayNames 日,一,二,三,四,五,六
ShortestDayNames 日,一,二,三,四,五,六
DayNames 星期日,星期一,星期二,星期三,星期四,星期五,星期六
AbbreviatedMonthNames 一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,
MonthNames 一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,
IsReadOnly true
NativeCalendarName 公历
AbbreviatedMonthGenitiveNames 一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,
MonthGenitiveNames 一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,

dateTimeFormat示例:2007年6月22日 8:23:27

区域名称:zh-CN
格式化类型 格式化值
CurrencyDecimalDigits 2
CurrencyDecimalSeparator .
IsReadOnly true
CurrencyGroupSizes 3
NumberGroupSizes 3
PercentGroupSizes 3
CurrencyGroupSeparator ,
CurrencySymbol
NaNSymbol 非数字
CurrencyNegativePattern 2
NumberNegativePattern 1
PercentPositivePattern 1
PercentNegativePattern 1
NegativeInfinitySymbol 负无穷大
NegativeSign -
NumberDecimalDigits 2
NumberDecimalSeparator .
NumberGroupSeparator ,
CurrencyPositivePattern 0
PositiveInfinitySymbol 正无穷大
PositiveSign +
PercentDecimalDigits 2
PercentDecimalSeparator .
PercentGroupSeparator ,
PercentSymbol %
PerMilleSymbol
NativeDigits 0,1,2,3,4,5,6,7,8,9
DigitSubstitution 1

numberFormat示例:¥99.98


StringBuilder.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="StringBuilder.aspx.cs"
    Inherits
="ClientScripting_Sys_StringBuilder" Title="StringBuilder" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    
<textarea id="TraceConsole" style="width: 500px; height: 300px;"></textarea>

    
<script type="text/javascript">
        
function buildString(title)
        
{
            
// 创建一个StringBuilder对象
            var sb = new Sys.StringBuilder("aaa");
            
// toString() - 将StringBuilder对象的内容转换为字符串
            Sys.Debug.trace("StringBuilder:" + sb.toString());
            
            
// 添加指定字符串到StringBuilder对象的结尾
            sb.append("bbb");
            Sys.Debug.trace(
"StringBuilder:" + sb);

            
// 添加指定字符串到StringBuilder对象的结尾并添加一个换行符
            sb.appendLine("ccc");
            Sys.Debug.trace(
"StringBuilder:" + sb);
            
            
// 添加一个换行符到StringBuilder对象的结尾
            sb.appendLine();
            
// toString(separator) - 在StringBuilder对象内的每一个元素的结尾处添加指定字符串
            // 然后将StringBuilder对象的内容转换为字符串
            Sys.Debug.trace("StringBuilder:" + sb.toString('xxx'));

            
// 清除StringBuilder对象所有内容
            sb.clear();
            Sys.Debug.trace(
"StringBuilder:" + sb);
            
            
// StringBuilder对象的内容是否为空
            var bln = sb.isEmpty();
            Sys.Debug.trace(
"StringBuilder:" + bln);
        }


        
function pageLoad()
        
{
            buildString();
        }

    
</script>

</asp:Content>

运行结果
StringBuilder:aaa
StringBuilder:aaabbb
StringBuilder:aaabbbccc

StringBuilder:aaaxxxbbbxxxccc
xxx

StringBuilder:
StringBuilder:true


OK
[源码下载]