HTC (HTML Component)

HTML组件

HTC就是基于脚本的面向对象编程技术。要有javascript和Html的基础。而其中DOM 文档对象模型将会在HTC中成为主要的应用点。

采用HTC，服务端程序不用再考虑样式之类的问题，所有的样式都可以在HTC中进行设置，服务端只需要装填数据，然后HTC根据设置的属性来显示出想要的效果。在做一个TreeView控件的时候，甚至把递归都写在了HTC里面，服务端只是把数据取出来而已。

另外的好处是复用，大家采用统一的HTC控件，带来了风格的一致，同时节省了大量的编码时间，很多不懂javascript的程序员也能非常容易的使用。

下面是学习HTC的MSDN站点：

http://msdn.microsoft.com/library/default.asp?url=/workshop/components/htc/reference/htcref.asp
2.简介二
    HTML 组件（HTML COMPONENTS）是IE5.0的主要扩展之一，其也最具革命性，微软的意图是用HTML组件来取代ACTIVEX控件，和ACTIVE控件一样，HTML组件是自持续封闭对象，可以一次开发任意使用。
     本文通过一个日历应用给您接介绍 HTML组件带入的术语、思想、对象、方法和属性，这个日历应用显示当前月的日期、星期并且高亮度显示当前日期。
    ====HTML行为和HTC行为===

    HTML组件封装了HTML内容，并可以插入到别的HTML文档中。在HTML组件出现以前，在HMTL文档中使用自定义控制唯一的办法就是使用微软 ACTIVEX控件，ACTIVEX控件的一个缺点之一就是使用前必须客户机安装HTML控件，另一方面将主页面下载到客户机，对于DHTML的作者来说 HTML控件更具吸引力，因为他们可以使用他们熟悉的语言开发自己的控件和组件，HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别，并且以“.htc”为后缀，它包括脚本和一系列HTC自定义说明元素，这些元素定义了HTML组件的属性、方法、事件等，所有HTC元素通过对象的ID属性作为对象在脚本中使用，所有方法和属性均可在脚本中动态操作。

您可以使用HTC实现以下行为：
*设定属性和方法。通过“PROPERTY”和“METHOD”元素定义
*设置自定义事件。通过“EVENT”元素实现，用该元素的“fire()”方法释放事件，通过“createEventObject()”方法设置事件环境。
*访问所包含该HTC的的HTML页的DHTML对象模型，使用HTC的“element"对象，返回一个附加行为的元素，使用该对象，HTC可以访问包含文挡及它的对象模型（属性、方法、事件）。
*收取通知，使用”ATTACH“元素实现，浏览器不但通知HTC标准的DHTML事件，而且通知HTC两种特殊事件：oncontentready事件和ondocumentready事件 。
    HTC封装了行为的定义 ，行为的概念第一次出现是在IE5.0中，HTC中的高级行为封装就是行为不能和元素标记分离，在IE5.0中，在脚本中行为可以从元素中分离出来，而在IE5.5中，元素不能和其原始行为分离。
     相关链接：基本示例
HTC 编程思想
1.摘要
本文在实例的基础上讨论了HTC(HTML Component)的编程方法，提出了一种编写脚本组件的基本模式。

2.目标读者
HTML开发人员，脚本开发人员，系统分析人员

3.背景知识
HTML, DHTML, CSS

4.引言
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用于参考:
sample.html:
(分别见以下文本框)
ButtonStyleFlat.htc:

sample.html:



push me please

注意：behavior: url(ButtonStyleFlat.htc）把HTC组件和HTML页面关联起来。
6.分析
让我们看看所完成的工作。我们把ButtonStyleFlat.htc和sample.html放在一起。我们打开sample.html, 效果如图：
 
图1：实际效果图
(图像不可见)

我们发现button变平了，而且鼠标经过，移开，按下，弹起动作时颜色都会发生变化，而且仔细看脚本会发现，我们可以handle一个onpush事件和调用showMessage()方法。
这一切的变化都来自style='behavior:url(ButtonStyleFlat.htc)', 一个behavior声明。而不用在HTML中写任何脚本。我们不探讨behavior的用法，仅仅讲解如何开发一个完整的HTC。

一个完整的HTC由两个部分组成：我们把它们叫做API声明和脚本实现。API声明由以下部分组成：
a． PUBLIC:COMPONENT
这一部分组成了HTC的最外围元素。仅仅定义了所包容的内容是一个组件
b． PUBLIC:ATTACH
本部分定义了对于客户事件的处理
c． PUBLIC:PROPERTY
公开的属性定义
d． PUBLIC:EVENT
公开的事件定义
e． PUBLIC:METHOD
公开的方法定义

由于本文仅仅是一个tutorial, 仅分析使用到的语法, 更多规范可以参考MSDN文档:
ms-help://MS.MSDNQTR.2004JAN.1033/Behavior/workshop/components/htc/reference/htcref.htm
(地址可能需要修改)
或者联机版本:
http://msdn.microsoft.com/workshop/components/htc/reference/htcref.asp?frame=true
(以下规范基于IE5.0及以上版本)
 
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. 其他内部过程

其中EVENT的引发一般在其他过程中进行. 而脚本的语法与普通HTML页上的脚本没有什么不同.

7.实例讲解
以上的Button Style Flat虽然很短小, 但可以基本说明本文的中心内容, 即HTC编程思想. 我们接着看上面提供的实例:

a.  在第一行我们注意到, 改实例将ondocumentready事件交给了一个OnInit()的脚本过程处理(ATTACH语法). Ondocumentready是component特有的事件. 表示当表示component的前端HTML完全载入的时刻.可以说ondocumentready事件是components初始化时的过程. 在我写的所有HTC中, 都ATTACH了这个事件. 这一习惯不知道从什么时候开始的. 慢慢我发现不能离开ondocumentready了. 只要我们的HTC中需要一个类似初始化的过程, 我们就需要指定ondocumentready时刻发生的过程. 在本实例中, 我们在ondocumentready所绑定的过程中初始化了button的最初样式. 即根据schema特性决定button的外观.

b. 定义一组鼠标事件. 一般而言, 我们的component都是可见的. 而HTML页中与用户交互的主要动作是鼠标的
动作. 所以, 通常情况下, 我们总是会deal鼠标的五个基本事件mouse over, mouseout, mouse down, mouse up 和click. 同样是一个习惯, 我通常不加考虑的ATTACH 这五个事件. 即使绑定的过程是空的.

c. PROPERTY, 可以定义get和put过程做属性的取设器. 一般情况下都可以省略这两个过程. 除非要对设置的值进行合法性校验.

d. EVENT的引发. PUBLIC:EVENT声明的ID attribute用于script部分的内部引用. 当需要引发该事件时, 仅需要使用类似: push.fire()命令就可以. 环境就是开始准备catch该事件. 相当简单.

e. METHOD实现. METHOD的name attribute直接代表