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" />
<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(){
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>