[转] HTC:html组件
~~~不时会看到 用htc实现 hover, border-raius等效果，可以用来弥补IE6-8的不足。那么htc到底是什么呢？
1.摘要
本文在实例的基础上讨论了HTC(HTML Component)的编程方法，提出了一种编写脚本组件的基本模式。
2.引言
HTC(HTML Component)直译为HTML组件，并不是一项新技术。可是说谈不上是一门技术。实际上只是IE浏览器内置的一种脚本封装机制。
由于讨论的人很少，而Microsoft也没有什么技术支持，故而应用的人很少。但是HTML有着很好的特性可以使我们的开发工作高效。并且你有可能发
现，HTC或许可以改变你以往开发应用的方式。
在MSDN online对HTC的定义仅如下几句:
HTML Components (HTCs) provide a mechanism to implement components in script as Dynamic HTML (DHTML) behaviors. Saved with an .htc extension, an HTC is an HTML file that contains script and a set of HTC-specific elements that define the component.
(HTC是由HTML标记、特殊标记和脚本组成的定义了DHTML特性的组件.)
一般而言，HTC是组件化了的脚本过程。尽管引入浏览器的机制不同，但遵循相同的SDK规范。无论是脚本运行环境，还是DOM文档结构。但HTC有着极高
的扩展性。也就是说，HTC可以为我们的HTML引入高级的自定义行为(behavior)。例如自定义的attribute, method, 或者事
件。这就说明，我们可以使用HTC机制来开发一个有着高级特性的，可重用的，可扩展的组件。
5.实例
为了使篇幅不会太大，我们设想一个实例。话说有一天你的项目经理找到你，说客户不满意我们的项目中的用户UI设计，因为我们的客户是比较有审美情趣的人，
讨厌那些windows样式的灰秃秃的按钮。所以要你设计一系列平面的，而且能随着鼠标变化颜色的按钮。你说这没问题，但是需要一天时间，不出意料地使你
的项目经理惊讶之后，你解释到以你的技术水准，不可能写一堆脚本和CSS class到HTML里，你的产品一定是
reusable, flexiable, 和extendable的。他答应了。于是第二天，你交给他如下源代码：
ButtonStyleFlat.htc:
另外有一个sample用于参考:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title>Sample</title> </head><body bgcolor=#ffffff> <button id=oButton style='behavior: url(ButtonStyleFlat.htc)'>push me please</button> <script> oButton.onpush=function(){ //自定义事件绑定事件处理函数 oButton.showMessage();//htc自定义公共方法 showMessage } </script> </body>
ButtonStyleFlat.htc:
<PUBLIC:COMPONENT> <!-- 组件容器 --> <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="DoInit()" /> <!-- 绑定事件和事件处理函数 --> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoMouseOver()" /> <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="DoMouseOut()" /> <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoMouseDown()" /> <PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="DoMouseUp()" /> <PUBLIC:ATTACH EVENT="onclick" ONEVENT="DoClick()" /> <PUBLIC:PROPERTY NAME="ColorOver" /> <!-- 自定义公共属性 --> <PUBLIC:PROPERTY NAME="ColorOut" /> <PUBLIC:PROPERTY NAME="ColorDown" /> <PUBLIC:PROPERTY NAME="ColorUp" /> <PUBLIC:PROPERTY NAME="Scheme" /> <PUBLIC:EVENT NAME="onPush" ID="push" /> <!-- 自定义事件 --> <PUBLIC:METHOD NAME="showMessage" /> <!-- 自定义方法 --> <script> function DoInit(){ //页面加载完 执行? 还是元素解析完? switch(Scheme){ case "Normal": if(ColorOver==null) ColorOver='Orange'; if(ColorOut==null) ColorOut='RoyalBlue'; if(ColorDown==null) ColorDown='Black'; if(ColorUp==null) ColorUp='YellowGreen'; break; default: if(ColorOver==null) ColorOver='Orange'; if(ColorOut==null) ColorOut='RoyalBlue'; if(ColorDown==null) ColorDown='Black'; if(ColorUp==null) ColorUp='YellowGreen'; } //按钮默认样式 runtimeStyle.borderWidth='0px'; runtimeStyle.textAlign='center'; runtimeStyle.padding='3'; runtimeStyle.verticalAlign='bottom'; runtimeStyle.color='white'; runtimeStyle.cursor='hand'; runtimeStyle.background=ColorOut; runtimeStyle.unselectable='on'; } function DoMouseOver(){// onmouseover runtimeStyle.background=ColorOver; } function DoMouseOut(){// onmouseout runtimeStyle.background=ColorOut; } function DoMouseDown(){// onmousedown runtimeStyle.background=ColorDown; } function DoMouseUp(){// onmouseup runtimeStyle.background=ColorUp; } function DoClick(){// onclick push.fire(); //触发自定义事件 } function showMessage(){// 自定义公共方法 alert("showMessage run."); } </script> </PUBLIC:COMPONENT>
我们发现button变平了，而且鼠标经过，移开，按下，弹起动作时颜色都会发生变化，而且仔细看脚本会发现，我们可以handle一个onpush事件和调用showMessage()方法。
这一切的变化都来自style='behavior:url(ButtonStyleFlat.htc)', 一个behavior声明。而不用在HTML中写任何脚本。我们不探讨behavior的用法，仅仅讲解如何开发一个完整的HTC。
一个完整的HTC由两个部分组成：我们把它们叫做API声明和脚本实现。API声明由以下部分组成：
a． PUBLIC:COMPONENT
这一部分组成了HTC的最外围元素。仅仅定义了所包容的内容是一个组件
PUBLIC:ATTACH
表示绑定事件与处理过程
EVENT: 表示事件句柄名
ONEVENT: 表示处理过程名
PUBLIC:PROPERTY
表示公开到环境的属性
NAME: 属性名
属性可设置类似C# property的读写器, 分别是get和put过程. 设置属性之后, 可使用HTML语法指定组件的属性值为任意值。
PUBLIC:METHOD
公开到环境的方法
NAME: 方法名
PUBLIC:EVENT
可由环境catch的事件
NAME: 事件名
ID: 内部引用名称
脚本实现
API声明仅定义了组件公开到环境的编程接口, 在组件中需要使用脚本来实现内部逻辑. 脚本实现主要有以下部分:
1. 定义事件处理过程
2. 定义PROPERTY的取设过程
3. 定义METHOD的具体实现
4. 定义EVENT的引发逻辑
5. 其他内部过程
---------------------------------------------------------------------------
~~~以下比较枯燥
在微软(R)Internet Explorer 5中介绍，HTML组件(HTCs)提供一种机制来使用脚本作为动态HTML(DHTML)行为实现组件功能。以.htc扩展名保存，一份HTC是一份包含脚本和一组用于定义组件的HTC特殊元素的HTML文件。此部分包含相关元素和它们支持的成员。
对象
document 在给定的浏览器窗口中表现HTML文档。
element 返回一份主文档中连接行为的标签的参考。
PUBLIC:ATTACH 绑定一个函数到一个事件上，因此每次事件发生在特殊对象上时函数会被调用。
PUBLIC:COMPONENT 以HTC指明文件的内容。
PUBLIC:DEFAULTS 设定一份HTC的默认属性。
PUBLIC:EVENT 定义一个HTC的事件，使之暴露于包含该HTC的文档。
PUBLIC:METHOD 定义一个HTC的方法，使之暴露于包含该HTC的文档。
PUBLIC:PROPERTY 定义一个HTC的属性，使之暴露于包含该HTC的文档。
方法
createEventObject
创建一个事件对象，当需要传递事件附加信息给PUBLIC:EVENT元素的fire方法时使用。
事件
oncontentready
连接了行为的元素的内容完全被解析时发生。
oncontentsave
连接了一份元素行为的一个元素的内容被保存或复制前发生。
ondetach
从一个元素解除一份行为的连接前发生。
ondocumentready
当包含行为的文档完全被解析时发生。
PUBLIC:PROPERTY元素
--------------------------------------------------------------------------------------
定义一个HTC的属性，使之暴露于包含该HTC的文档。
格式
<PUBLIC:PROPERTY
GET = "sGetFunction"
ID = "sPropertyID"
INTERNALNAME = "sInternalName"
NAME = "sName"
PERSIST = "bPersist"
PUT = "sPutFunction"
value = "vvalue"
/>
属性
GET
可选。指定属性值被获得时调用的函数的字符串。一个只指定了GET属性而没有指定PUT属性的PUBLIC:PROPERTY元素是一个只读属性。
ID
可选。组件内PUBLIC:PROPERTY元素的唯一识别字符串。这个属性类似于DHTML中的ID属性。
INTERNALNAME
可选。包含文档中指定方法提交的名称的字符串。这个内部的名称必须在组件内任意参考前广泛的关联；否则，一个脚本错误出现，指出名称未定义。如果没有内部的名称被指定，默认情况下使用NAME属性。
NAME
必选。指定暴露给包含文档的属性的名称的字符串。默认情况下，NAME的指定也用于组件内属性的提交，除非INTERNALNAME属性被指定。
PERSIST
可选。指定是否坚持属性作为叶面的部分的布尔值。
PUT
可选。指定属性值被设定时调用的函数的字符串。一个指定了GET和PUT属性的PUBLIC:PROPERTY元素是一个读写属性。一个PUT函数被指定，而指定GET函数指定失败，会导致该属性只可写，一般来说这是不希望出现的。
value
可选。指定属性默认值的变量。
方法
propertyID.fireChange()
通报包含文档属性值在元素上发生onpropertychange事件时被改变。如果属性没有PUT属性被指定，在包含文档中属性被设定时onpropertychange会自动发生。
元素信息
父级元素： PUBLIC:COMPONENT
子级元素： 无
备注
当指定NAME属性与一个已经为该元素定义的标准方法的名称相同时，一个行为可以重载元素的默认行为。
如果PUT或GET属性被指定，INTERNALNAME属性被忽略。通过在PUT和GET属性中指定的函数来设定与/或获得属性值，优先级高于通过INTERNALNAME设定和/或获得属性值。
PUT属性指定的函数必须注意包含文档中的元素使用PUBLIC:PROPERTY元素的fireChange方法改变属性值的情况。调用这个方法导致onpropertychange事件发生在包含文档的相应元素，同时event对象的propertyName设定为属性的名称。
PUBLIC:METHOD元素
--------------------------------------------------------------------------------------
定义一个HTC的方法，使之暴露于包含该HTC的文档。
格式
<PUBLIC:METHOD
ID = "sID"
INTERNALNAME = "sInternalName"
NAME = "sName"
/>
属性
ID
可选。组件内PUBLIC:METHOD元素的唯一识别字符串。这个属性类似于DHTML中的ID属性。
INTERNALNAME
可选。包含文档中指定方法提交的名称的字符串。默认情况下，NAME也指定提交到组件内的方法，除非INTERNALNAME属性被指定。
元素信息
父级元素
PUBLIC:COMPONENT
子级元素
无
最小运行环境
备注
当指定NAME属性与一个已经为该元素定义的标准方法的名称相同时，一个行为可以重载元素的默认行为。
PUBLIC:EVENT元素
--------------------------------------------------------------------------------------
定义一个HTC的事件，使之暴露于包含该HTC的文档。
格式
<PUBLIC:EVENT
ID = "sEventID"
NAME = "sName"
/>
属性
ID
可选。组件内PUBLIC:EVENT元素的唯一识别字符串。这个属性类似于DHTML中的ID属性。
NAME
必选。指定主文档中提交的事件的名称的字符串。
方法
eventID.fire([oEvent])
包含的文档发生事件。
这个方法有下面的参数：
oEvent
指定event对象包含的附加信息的对象。
元素信息
父级元素
PUBLIC:COMPONENT
子级元素
无
备注
通过指定一个NAME属性，类似于一个已经为元素定义的标准事件，一个行为可以重载元素默认的行为。
行为定义的事件不起泡。它们只发生在连接了行为的元素上。
PUBLIC:DEFAULTS元素
--------------------------------------------------------------------------------------
设定一份HTC的默认属性。
格式
<PUBLIC:DEFAULTS
canHaveHTML = "bCanHaveHTML"
contentEditable = "bEditable"
style = "sStyle"
tabStop = "bIsTabStop"
viewInheritStyle = "bInheritsStyle"
viewLinkContent = "bViewLinkContent"
viewMasterTab = "bViewMasterTab"
/>
属性
canHaveHTML
可选。指定为下列之中一个的布尔值。
false
HTC文件定义的标签的内容不能包含HTML标签。
true
HTC文件定义的标签的内容可以包含HTML标签。
contentEditable
可选。指定为下列之中一个的布尔值。
inherit
默认值。对象从它的父级继承内容被用户编辑的能力。
false
HTC文件定义的标签的内容不能编辑。
true
HTC文件定义的标签的内容可以编辑。
style
可选。指定HTC文件定义的标签的样式字符串。
tabStop
可选。指定为下列之中一个的布尔值。
false
默认值。HTC文件定义的标签不可被TAB选择激活。
true
HTC文件定义的标签可以被TAB选择激活。
viewInheritStyle
可选。指定为下列之中一个的布尔值。
false
Viewlink不从主HTML文件中继承样式。
true
默认值。Viewlink从主HTML文件中继承样式。
viewLinkContent
可选。指定为下列之中一个的布尔值。
false
默认值。HTC文件的文档中标签不作为viewlink使用。
true
HTC文件的文档中标签作为viewlink使用。
viewMasterTab
可选。指定为下列之中一个的布尔值。
false
viewlink的主元素不包含在主文档的TAB序列中。
true
默认值。viewlink的主元素包含在主文档的TAB序列中。
元素信息
父级元素
PUBLIC:COMPONENT
子级元素
无
PUBLIC:COMPONENT元素
--------------------------------------------------------------------------------------
以HTC指明文件的内容。
微软Internet Explorer 6中的新内容
literalContent属性作为一个新的可能值支持嵌套，创建一份嵌套的文字内容元素行为。
格式
<PUBLIC:COMPONENT
ID = "sID"
lightWeight = "bLight"
literalContent = "sLiteral"
NAME = "sName"
supportsEditMode = "bEditable"
tagName = "sTagName"
URN = "sURN"
>
<!-- 子级元素 -->
</PUBLIC:COMPONENT>
属性
ID
可选。组件内PUBLIC:COMPONENT元素的唯一识别字符串。这个属性类似于DHTML中的ID属性。
lightWeight
可选。指定HTC文件是否包含标签的字符串。如果HTC文件不包含标签，这个属性应当设置为true来改进表现效果。这个属性对任何HTC文件均有效。
true
HTC文件不包含标签，因而无需每次都解析并表现自定义标签。这些标签由HTC文件定义，在主文档中使用。
false
默认值。HTC包含必需解析并表现的自定义标签。这些标签由HTC文件定义，在主文档中使用。
literalContent
可选。指定自定义标签包含的内容是被解析并表现，还是作为数据岛处理的字符串。这个属性仅在HTC文件定义一个元素行为时有效，此时需要使用tagName属性。更多信息请查阅备注。
false
默认值。由tagName属性定义的标签内的文本和标签并作为数据岛处理，而是解析并表现。
nested
Internet Explorer 6及后继版本。Content within the first opening and last closing of the tag defined by the tagName attribute is treated as a data island and is not parsed or rendered.更多信息请查阅使用literalContent属性。
true
Content within the first opening and last closing of the tag defined by the tagName attribute is treated as a data island and is not parsed or rendered.
NAME
可选。指定主文档中提交的行为的名称的字符串。
supportEditMode
可选。指定HTC文件内容是否可编辑的字符串。这个属性仅在HTC文件定义一个元素行为时有效。
true
HTC文件包含的标签可编辑。
false
默认值。HTC文件包含的标签不可编辑。你能够通过对HTC文件中每个元素设定isContentEditable属性为VARIANT_TRUE来重载此属性值。
tagName
可选。指定自定义标签名称的字符串，此标签由HTC文件定义并导入到主文档中。这个属性仅在HTC文件定义一个元素行为时有效。更多信息请查阅备注。
URN
可选。字符串，以统一资源名称(URN)格式，从而唯一识别此组件。因而在多个行为发生在同一名称的事件时可以唯一的识别。当事件发生，event对象的srcUrn属性被设定为发生在事件上行为的URN。
元素信息
子级元素
至多出现一次
PUBLIC:DEFAULTS
一或多次出现
PUBLIC:ATTACH，PUBLIC:EVENT，PUBLIC:METHOD，PUBLIC:PROPERTY
备注
PUBLIC:COMPONENT元素可以定义两种截然不同类型的行为。一种是连接行为，使用behavior层叠样式表(CSS)属性来修改一个已经存在的元素的行为。第二种类型，在Internet Explorer 5.5 中介绍，被称作一个元素行为。一个元素行为用来定义如标准的HTML标签一样在网页中使用的自定义标签。
一个元素行为意味着网页中一个自定义标签的创建和使用。因此，当HTC文件定义一个元素行为时有必要定义PUBLIC:COMPONENT元素的tagName属性。如先前指出的，此元素的部分属性为元素行为特别设计。更多信息清查询元素行为。
当多个行为连接到同一元素时，NAME属性特别有用。因为它允许你调用包含文档中需要的行为的属性和方法。如果在一份文档中多个行为被连接到一个<SPAN ID="mySpan">元素，你可以使用下面的格式来设定命名为behaviorABC的行为的delay属性。
mySpan.behaviorABC.delay = 1000;
PUBLIC:ATTACH元素
--------------------------------------------------------------------------------------
绑定一个函数到一个事件上，因此每次事件发生在特殊对象上时函数会被调用。
格式
<PUBLIC:ATTACH
EVENT = "sEvent"
FOR = "sObject"
ID = "sID"
ONEVENT = "sEventHandler"
/>
属性
EVENT
必选。指定一个动态HTML(DHTML)事件、或任何在HTC参考中列举出的由HTML组件(HTC)指定事件的字符串。
FOR
可选。指定为下面值中一个的字符串，用来识别事件源。
document
引用document对象。
element
默认值。引用行为连接的元素。
window
引用window对象。
ID
可选。组件内PUBLIC:ATTACH元素的唯一识别字符串。这个属性类似于DHTML中的ID属性。
ONEVENT
必选。事件处理函数的直接声明或一份行内脚本的指定字符串。
元素信息
父级元素
PUBLIC:COMPONENT
子级元素
无
备注
PUBLIC:ATTACH元素是attachEvent方法的一份声明。
当指定的事件发生在连接了行为的元素时，首先调用的是元素的事件处理部分，且在行为的事件处理前。如果多个行为被连接到一个元素，同时多个事件处理部分定义在同一元素的同一事件上，函数在元素事件处理部分调用后会随机地被调用。
当为ONEVENT提供一个值时，避免赋予事件处理部分函数一个已经存在的DHTML事件的名称。使用一个已经存在的DHTML事件的名称可能会递归错误。
事件的名称对所有脚本语言都是大小写敏感的。
