HTC经典实例（一）

来源：互联网发布：c语言 chm 编辑：程序博客网时间：2024/06/05 04:00

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:
(分别见以下文本框)

sample.html:

<!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();
}
</script>
</body>

<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" />

function DoMouseOver(){
runtimeStyle.background=ColorOver;
}

function DoMouseOut(){
runtimeStyle.background=ColorOut;
}

function DoMouseDown(){
runtimeStyle.background=ColorDown;
}

function DoMouseUp(){
runtimeStyle.background=ColorUp;
}

function DoClick(){
push.fire();
}

function showMessage(){
alert("showMessage run.");
}
</script>
</PUBLIC:COMPONENT>