.摘要
本文在實(shí)例的基礎上討論了HTC(HTML Component)的編程方法，提出了一種編寫(xiě)腳本組件的基本模式。
2.目標讀者
HTML開(kāi)發(fā)人員，腳本開(kāi)發(fā)人員，系統分析人員
3.背景知識
HTML, DHTML, CSS
4.引言
HTC(HTML Component)直譯為HTML組件，并不是一項新技術(shù)?？墒钦f(shuō)談不上是一門(mén)技術(shù)。實(shí)際上只是IE瀏覽器內置的一種腳本封裝機制。由于討論的人很少，而Microsoft也沒(méi)有什么技術(shù)支持，故而應用的人很少。但是HTML有著(zhù)很好的特性可以使我們的開(kāi)發(fā)工作高效。并且你有可能發(fā)現，HTC或許可以改變你以往開(kāi)發(fā)應用的方式。
在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是組件化了的腳本過(guò)程。盡管引入瀏覽器的機制不同，但遵循相同的SDK規范。無(wú)論是腳本運行環(huán)境，還是DOM文檔結構。但HTC有著(zhù)極高的擴展性。也就是說(shuō)，HTC可以為我們的HTML引入高級的自定義行為(behavior)。例如自定義的attribute, method, 或者事件。這就說(shuō)明，我們可以使用HTC機制來(lái)開(kāi)發(fā)一個(gè)有著(zhù)高級特性的，可重用的，可擴展的組件。
5.實(shí)例
ButtonStyleFlat.htc:
另外有一個(gè)sample用于參考:
sample.html:
(分別見(jiàn)以下文本框)
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(){
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>
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>
6.分析
讓我們看看所完成的工作。我們把ButtonStyleFlat.htc和sample.html放在一起。我們打開(kāi)sample.html，發(fā)現button變平了，而且鼠標經(jīng)過(guò)，移開(kāi)，按下，彈起動(dòng)作時(shí)顏色都會(huì )發(fā)生變化，而且仔細看腳本會(huì )發(fā)現，我們可以handle一個(gè)onpush事件和調用showMessage()方法。
這一切的變化都來(lái)自style='behavior:url(ButtonStyleFlat.htc)', 一個(gè)behavior聲明。而不用在HTML中寫(xiě)任何腳本。我們不探討behavior的用法，僅僅講解如何開(kāi)發(fā)一個(gè)完整的HTC。
一個(gè)完整的HTC由兩個(gè)部分組成：我們把它們叫做API聲明和腳本實(shí)現。API聲明由以下部分組成：
a． PUBLIC:COMPONENT
這一部分組成了HTC的最外圍元素。僅僅定義了所包容的內容是一個(gè)組件
b． PUBLIC:ATTACH
本部分定義了對于客戶(hù)事件的處理
c． PUBLIC:PROPERTY
公開(kāi)的屬性定義
d． PUBLIC:EVENT
公開(kāi)的事件定義
e． PUBLIC:METHOD
公開(kāi)的方法定義
由于本文僅僅是一個(gè)tutorial, 僅分析使用到的語(yǔ)法, 更多規范可以參考MSDN文檔:
ms-help://MS.MSDNQTR.2004JAN.1033/Behavior/workshop/components/htc/reference/htcref.htm
(地址可能需要修改)
或者聯(lián)機版本:
http://msdn.microsoft.com/workshop/components/htc/reference/htcref.asp?frame=true
(以下規范基于IE5.0及以上版本)
PUBLIC:ATTACH
表示綁定事件與處理過(guò)程
EVENT: 表示事件句柄名
ONEVENT: 表示處理過(guò)程名
PUBLIC:PROPERTY
表示公開(kāi)到環(huán)境的屬性
NAME: 屬性名
屬性可設置類(lèi)似C# property的讀寫(xiě)器, 分別是get和put過(guò)程. 設置屬性之后, 可使用HTML語(yǔ)法指定組件的屬性值為任意值。
PUBLIC:METHOD
公開(kāi)到環(huán)境的方法
NAME: 方法名
PUBLIC:EVENT
可由環(huán)境catch的事件
NAME: 事件名
ID: 內部引用名稱(chēng)
腳本實(shí)現
API聲明僅定義了組件公開(kāi)到環(huán)境的編程接口, 在組件中需要使用腳本來(lái)實(shí)現內部邏輯. 腳本實(shí)現主要有以下部分:
1. 定義事件處理過(guò)程
2. 定義PROPERTY的取設過(guò)程
3. 定義METHOD的具體實(shí)現
4. 定義EVENT的引發(fā)邏輯
5. 其他內部過(guò)程
其中EVENT的引發(fā)一般在其他過(guò)程中進(jìn)行. 而腳本的語(yǔ)法與普通HTML頁(yè)上的腳本沒(méi)有什么不同.
7.實(shí)例講解
以上的Button Style Flat雖然很短小, 但可以基本說(shuō)明本文的中心內容, 即HTC編程思想. 我們接著(zhù)看上面提供的實(shí)例:
a. 在第一行我們注意到, 改實(shí)例將ondocumentready事件交給了一個(gè)OnInit()的腳本過(guò)程處理(ATTACH語(yǔ)法). Ondocumentready是component特有的事件. 表示當表示component的前端HTML完全載入的時(shí)刻.可以說(shuō)ondocumentready事件是components初始化時(shí)的過(guò)程. 在我寫(xiě)的所有HTC中, 都ATTACH了這個(gè)事件. 這一習慣不知道從什么時(shí)候開(kāi)始的. 慢慢我發(fā)現不能離開(kāi)ondocumentready了. 只要我們的HTC中需要一個(gè)類(lèi)似初始化的過(guò)程, 我們就需要指定ondocumentready時(shí)刻發(fā)生的過(guò)程. 在本實(shí)例中, 我們在ondocumentready所綁定的過(guò)程中初始化了button的最初樣式. 即根據schema特性決定button的外觀(guān).
b. 定義一組鼠標事件. 一般而言, 我們的component都是可見(jiàn)的. 而HTML頁(yè)中與用戶(hù)交互的主要動(dòng)作是鼠標的
動(dòng)作. 所以, 通常情況下, 我們總是會(huì )deal鼠標的五個(gè)基本事件mouse over, mouseout, mouse down, mouse up 和click. 同樣是一個(gè)習慣, 我通常不加考慮的ATTACH 這五個(gè)事件. 即使綁定的過(guò)程是空的.
c. PROPERTY, 可以定義get和put過(guò)程做屬性的取設器. 一般情況下都可以省略這兩個(gè)過(guò)程. 除非要對設置的值進(jìn)行合法性校驗.
d. EVENT的引發(fā). PUBLIC:EVENT聲明的ID attribute用于script部分的內部引用. 當需要引發(fā)該事件時(shí), 僅需要使用類(lèi)似: push.fire()命令就可以. 環(huán)境就是開(kāi)始準備catch該事件. 相當簡(jiǎn)單.
e. METHOD實(shí)現. METHOD的name attribute直接代表<script>部分的函數名. 因此可以直接聲明一個(gè)同名的function. 可以有返回值, 也可以沒(méi)有返回值. 在本實(shí)例中我們僅僅發(fā)出了一個(gè)客戶(hù)端消息.
注意, 實(shí)例中的push事件和showMessage()方法都是沒(méi)有什么實(shí)際意義的. 放在實(shí)例中僅僅為了說(shuō)明編程方法.
8.總結
到這里為止, 我們可以總結一下簡(jiǎn)單模式下, 我們可以做的工作: 如何創(chuàng )建一個(gè)有效的HTC組件
a. ATTACH ondocumentready事件, 在過(guò)程中實(shí)現初始化時(shí)的步驟.
b. 分別ATTACH鼠標的五個(gè)基本事件. 如果該組件設計了鍵盤(pán)事件, 也進(jìn)行同樣的綁定過(guò)程.
c. 如果組件設計了特定的客戶(hù)端事件, 僅需要定義并且在需要的時(shí)候引發(fā).
d. 特定的METHOD語(yǔ)法也很簡(jiǎn)單. 僅需要聲明一個(gè)METHOD, 并且在SCRTIPT部分實(shí)現同名函數即可.
e.考慮更復雜和實(shí)用的應用
button實(shí)在是太簡(jiǎn)單和太不值得一提了. 我們來(lái)考慮一個(gè)很受歡迎的東西: treeview. 一個(gè)所有web開(kāi)發(fā)人員都非常熱愛(ài)的東西.
我們知道, 現在實(shí)現treeview的方法很多. 多美觀(guān), 多實(shí)用的都有. 我們給自己提出需求, 來(lái)看一看用HTC如何設計一個(gè)好用而且節省成本的treeview.
需求
可以使用客戶(hù)端數據填充其內容; 外觀(guān)與windows 資源管理器一致; 可以catch到expand/collipse事件; 可以catch到節點(diǎn)的click事件; 可以定義節點(diǎn)展開(kāi)/收縮的模式(記憶模式); 可以由接受環(huán)境指令expand/collipse指定的節點(diǎn).
分析
如果以上需求都可以實(shí)現, 那么將是一個(gè)非常"高級"的treeview了. 我們逐一分析上述需求:
1. 使用客戶(hù)端數據填充: 既然是treeview, 則必然由節點(diǎn)構成. 既然是節點(diǎn), 就必然體現一定的數據. 而數據的由來(lái)一般情況下是由后端傳送來(lái)的. 這就要求我們最好使用一種數據格式. 不需要更改, 在后端和前端都可讀. 一般朋友都會(huì )想到用XML. 這是很好的想法. 這樣, 我們的treeview必須能夠按照一定的規則讀取XML數據. 將節點(diǎn)解析出來(lái), 并且使用一定的輸出方法輸出目標HTML形成帶有圖標, 文本, 節點(diǎn)線(xiàn)的外觀(guān). 這樣過(guò)程一般在OnInit()過(guò)程中進(jìn)行.
2. expand/collipse事件. 有時(shí)候環(huán)境需要了解treeview的狀態(tài). 例如展開(kāi)某個(gè)節點(diǎn)是自動(dòng)顯示某些內容. 因此環(huán)境必須隨時(shí)了解treeview里發(fā)生了什么. 這樣需要我們分別定義expand/collispse事件. 在某些情況下自動(dòng)地引發(fā)他們.
3. 節點(diǎn)的click事件很重要. 一般情況下, 用戶(hù)單擊某節點(diǎn)是總是會(huì )期望得到什么.
4. 設定展開(kāi)/收縮的模式. 我們可以指定treeview是否自己記住展開(kāi)的節點(diǎn)的狀態(tài). 而有些情況下我們希望treeview不會(huì )太長(cháng)而希望不準同時(shí)展開(kāi)兩個(gè)節點(diǎn). 這需要我們定義一個(gè)PROPERTY. 可以通過(guò)HTML attribute或者script設定該值從而影響compenent的behavior.
5. 接受環(huán)境指定改變節點(diǎn)狀態(tài). 如果我們希望不經(jīng)過(guò)用戶(hù)操作而自動(dòng)打開(kāi)某節點(diǎn)(不經(jīng)過(guò)頁(yè)發(fā)回), 希望通過(guò)環(huán)境的script命令操作treeview. 我們可以定義一些列METHOD, 例如expandNode(id): 展開(kāi)指定id值的節點(diǎn).
這樣, 我們就開(kāi)發(fā)了一個(gè)有著(zhù)高級特性的treeview component. 而且該組件的重用性是很高的. 我們只需要在HTML中插入一個(gè)特定的標記, 類(lèi)似<Timeline:Treeview ><xml data…. /></Timeline:Treeview>. 你的 HTML頁(yè)就會(huì )出現一個(gè)非常漂亮的樹(shù)型目錄了.
結束
本文論述了開(kāi)發(fā)HTC的一般性方法. 作者希望可以通過(guò)本文, 使廣大web工作者認識到HTC的優(yōu)勢.
注：HTC有很好的思想，但由于其基于IE，不穩定。代碼復雜之后，會(huì )出現很多莫名其妙的BUG。
例如，MS IE WebControls中的TreeView，如果每個(gè)節點(diǎn)都帶一個(gè)小圖標，節點(diǎn)有上百個(gè)或者數百個(gè)，此時(shí)，就有可能出現莫名其妙的問(wèn)題。為此事詢(xún)問(wèn)Microsoft，得到的答復是，HTC中的圖片太多，導致過(guò)多圖片請求，需要修改IE在注冊表中的配置解決。Microsoft并且認為不是BUG，而認為只是一個(gè)需求缺陷。
一：我們使用復雜的客戶(hù)端技術(shù)處理一些邏輯，一定程度上就是為了降低網(wǎng)絡(luò )訪(fǎng)問(wèn)頻率。當帶寬不是問(wèn)題的時(shí)候，復雜邏輯由服務(wù)端處理其實(shí)從整體上來(lái)看是比較合理的（安全性，可擴展性等）。因為畢竟IE的Script runtime能力很有限。
二：ASP和ASP.NET在我看來(lái)主要區別中的一點(diǎn)就是：
ASP基于HTTP的擴展與封裝做的很弱，他存在的價(jià)值就是COM的黏合劑。在MS平臺下使用ASP+COM/COM+完成靈活、交互復雜的系統還是很吃力的事情，當你的客戶(hù)端請求不想只局限于FORM的get,post的時(shí)候，借助HTC+Microsoft.XMLDOM/XMLHTTP就可以實(shí)現一些相對傳統ASP技術(shù)實(shí)現起來(lái)比較困難的功能，比如Http異步請求，頁(yè)面的局部刷新等等。所以HTC+Microsoft.XMLDOM/XMLHTTP對我來(lái)說(shuō)的確在很大程度上彌補了ASP的不足。
ASP.NET將http過(guò)程做了很不錯的封裝，ViewState幫助我們完成信息從服務(wù)端到客戶(hù)端的交互（不過(guò)也有若干缺陷），我們幾乎不需要在客戶(hù)端考慮Post的問(wèn)題了。所以當ASP.NET使Client和Server之間的界限變得不是那么硬的時(shí)候。Client的處理能力仿佛加強了。
所以隨著(zhù)ASP.NET出現，我沒(méi)有再像以前那樣把基于IE瀏覽器的客戶(hù)端技術(shù)看得過(guò)重。
HTC標準由微軟提出，運行在IE特定環(huán)境之下，微軟的支持與否對HTC的健康發(fā)展至關(guān)重要。
HTC是一個(gè)不錯的基于IE的組建模型技術(shù)，思想也很不錯。但是如果嘗試使用HTC去構建基于IE的Rich Client體系的話(huà)，存在著(zhù)一定的風(fēng)險。HTC做一些相對輕型的可重用組件還是不錯的。所以我們討論的只是HTC定位的問(wèn)題，而非此種技術(shù)的好壞。
另：我從來(lái)沒(méi)有使用HTC訪(fǎng)問(wèn)數據庫，也從來(lái)沒(méi)有在IE端直接訪(fǎng)問(wèn)數據庫的經(jīng)驗和經(jīng)歷。我只是利用HTC封裝的組件處理Microsoft.XMLDOM從服務(wù)端Load的XmlStream，利用數據綁定做顯示，再通過(guò)Microsfot.XMLHTTP提交到服務(wù)端來(lái)完成最常見(jiàn)的數據CIUD工作。
我感覺(jué)隨著(zhù)微軟下一代操作系統Longhorn對Internet支持的逐漸強大，Avalon做為新一代界面框架將成使資源展現，搜索時(shí)所處的位置是本機還是網(wǎng)絡(luò )有所弱化。我沒(méi)見(jiàn)過(guò)Longhorn是什么樣子，但我感覺(jué)到時(shí)候我們訪(fǎng)問(wèn)internel上的資源，不管html，圖像，媒體?？梢酝ㄟ^(guò)更多途徑。IE+DHtml的展現方式不會(huì )被取代，但更強大的Xaml將成為Microsoft的主要方向。微軟對DHTML整個(gè)體系的支持都在減弱。
經(jīng)驗是，不建議基于Web開(kāi)發(fā)過(guò)于復雜的UI界面。因為IE這個(gè)開(kāi)發(fā)環(huán)境不夠可靠，而且微軟也不打算改進(jìn)它。
