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);
}