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