用AJAX开发智能Web应用程序之高级篇(3)

http://www.sina.com.cn 2005年12月27日 17:31 天极yesky

三、示例展示

　　本文所附源码列表1实现了一个计算器-它可以计算以一个逆向波兰式标志的表达式。该示例展示了本文中所介绍的主要技术并且也介绍了一些独特的JavaScript特性的用法，例如在一个动态函数调用中以一个数组元素的方式访问对象属性。

　　为了使列表1工作，我们需要另外准备一些代码-它们用于实例化该计算器对象并且调用evaluate方法：

var e = new ArithmeticCalcuator([2,2,5,"add","mul"]);
alert(e.evaluate());

　　四、 AJAX组件授权

　　所有的AJAX组件授权方案在今天被逻辑地分成两组。具体地说，第一组用于与基于HTML的UI定义的无缝集成。第二组把HTML当作一个UI定义语言以支持某种XML。在本文中，我们从第一组中来展示一种方法-虽然它存在于浏览器之中却是类似于JSP标签。这些浏览器特定的组件授权扩展在IE情形下称作元素行为，而在最近版本的Firefox，Mozilla和Netscape 8情形下称作可扩展的绑定。

　　五、定制标签

　　Internet Explorer，从版本5.5开始，支持定制的客户端HTML元素的JavaScript授权。不象JSP标签，这些对象并没有在服务器端被预处理到HTML中。而是，它们成为一标准HTML对象模型的合法扩展，并且包括构造控件在内的一切事情，都是动态地发生在客户端的。同样，基于Gecko-引擎的浏览器能够用一个可重用功能动态地装饰任何现有的HTML元素。

　　因此，我们有可能用具有HTML语法的方法、事件和属性来构建一个具有丰富的UI组件的库。这样的组件可以被自由地混合于标准HTML中。内部地，这些组件将会与应用程序服务器进行通讯-以AJAX风格。换句话说，你有可能（并且相对简单地）构建自己的AJAX对象模型。
这种IE风味的方法被称为HTC或HTML组件；其Gecko版本被称为XBL-可扩展的绑定语言（eXtensible Bindings Language）。为了实现本文目的，我们集中于讨论IE。

　　六、输入HTML组件-HTC

　　HTC或HTML组件也被称作行为。它们被划分为两种类型：一种是依附的行为-用一组属性、事件和方法装饰任何现有的HTML元素；另一种是元素行为-看上去象宿主页面的定制的HTML标签的一个扩展集合。依附的行为和元素行为一起提供了开发组件和应用程序的一种简单方案。在此，我们将展示一下最为综合的情形-元素行为。

　　数据绑定复选框控件

　　为了展示元素行为，我们将构建一个定制的数据绑定复选框。构建这样一个控件背后的基本原因在于，一个标准HTML复选框具有下面若干显著的缺点：

　　·需要应用程序编码来把"checked"属性的值映射到商业域值，例如"Y[es]"/"N[o]"，"M[ale]"/"F[emale]"，等等。HTML复选框使用"checked"属性，而许多其它HTML控件使用的则是"value"属性。

　　·需要应用程序编码来维持该控件的状态（修改过的/未修改过的）。这实际上是在所有的HTML控件普遍存在的一个问题。

　　·需要应用程序编码才能创建一个关联标签-它应该接受鼠标点击并相应地改变该复选框的状态。

　　·标准HTML复选框不支持"校验"事件以允许取消一个GUI行为，而这种要求可能存在于某些应用程序中。

　　现在，让我们看一个正在构建的该控件的用法示例，它的用法可能如下情形：

＜checkbox id="cbx_1" value="N" labelonleft="true"
label="Show Details:" onValue="Y" offValue="N"/＞

　　另外，我们的控件将支持可取消的事件onItemChanging和通知事件onItemChanged。

　　定义定制标签

　　从结构上讲，一个定制标签是一个具有一个HTC扩展名的文件-它在＜PUBLIC:COMPONENT＞和＜/PUBLIC:COMPONENT＞标志之间对它的属性，方法和事件加以描述。

　　为了定义一个定制CHECKBOX标签，我们创建一个如下列代码片断中的文件checkbox.htc-其中，第一行负责设置该组件的标签名：

＜PUBLIC:COMPONENT NAME="cbx" tagName="CHECKBOX"＞
＜PROPERTY NAME="value" GET="getValue" PUT="putValue" /＞
//我们把组件的所有另外的属性放在这里
＜METHOD NAME="show" /＞
//我们把组件的所有另外的方法放在这里
＜EVENT NAME="onItemChanging" ID="onItemChanging"/＞
//我们把组件将向应用程序激活的所有另外的事件放在这里
＜ATTACH EVENT="oncontentready" HANDLER="constructor" /＞
//我们把组件自己处理的另外的事件放在这里
＜SCRIPT＞
//我们把所有的方法，属性getters和setters和事件处理器放在这里
＜/SCRIPT＞
＜/PUBLIC:COMPONENT＞

　　使用定制标签

　　尽管HTC文件的内容比较重要，但是这与其文件名是什么无关。值得注意的是，指向该HTC文件的URL需要被使用IMPORT指令指定-这必须在相应的定制标签第一次出现之前（在页面上）完成。下面是最简单的可能的页面使用一个定制的复选框可能看上去的样子-假定该页面和HTC文件处理同一个文件夹下：

＜HTML xmlns:myns＞
＜?IMPORT namespace="myns" implementation="checkbox.htc" ＞
＜BODY＞
＜myns:checkbox id='cbx_1' label='Hello'/＞
＜/BODY＞
＜/HTML＞

　　请注意，定制CHECKBOX是怎样在打开的HTML标签中被映射到一个非缺省的命名空间"myns"的。这个IMPORT指令实现把HTC同步加载到浏览器的内存并且还指示浏览器怎样为适当的命名空间实现名称确定的（HTC到命名空间的关联可能是多对一的）。

　　定制标签的构造器

　　最好的初始化HTC的方法是，一旦它被装载就处理oncontentready事件。因此，我们可以定义处理器函数-为了概念清晰起见，我们称之为构造器：

＜ATTACH EVENT="oncontentready" HANDLER="constructor" /＞

　　constructor()的逻辑是简单的：根据属性labelonleft的值(见下面的属性定义)按顺序连接一个常规HTML复选框和HTML标签：

function constructor() {
　//我们将把一个HTML复选框和标签添加到元素体
　//详细情形见列表2
}

　　定义定制标签属性

　　为了定义属性labelonleft，我们又在＜PUBLIC:COMPONENT＞部分加上一行：

＜PROPERTY NAME="labelonleft" VALUE="true"/＞

　　请注意，这个属性并没有包含getter和/或setter方法。属性onValue和offValue不仅提供了从复选框状态到一个商业值域的映射而且不需要getters和setters：

＜PROPERTY NAME="onValue" VALUE="true"/＞
＜PROPERTY NAME="offValue" VALUE="false" /＞

　　然而，属性checked是用两个getter和setter定义的：

＜PROPERTY NAME="checked" GET="getChecked" PUT="putChecked" /＞

　　因此，我们在＜SCRIPT＞部分建立了上面两个方法的定义。正如你所见，setter putChecked()-将在每次复选框状态改变时激发-把value属性设置为下面两个变体之一：onValue或OffValue。请注意，putChecked()将不仅可由在复选框-宿主页面中的脚本触发，而且也能通过在checkbox.htc中的相应的任何赋值操作触发。

var _value;
function putChecked( newValue ) {
　value = (newValue?onValue:offValue);
}
function getChecked(){
　return ( _value == onValue);
}

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