6.分析
讓我們看看所完成的工作。我們把ButtonStyleFlat.htc和sample.html放在一起。我們發現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直接代表<script>部分的函數名. 因此可以直接聲明一個同名的function. 可以有返回值, 也可以沒有返回值. 在本實例中我們僅僅發出了一個客戶端消息.
注意, 實例中的push事件和showMessage()方法都是沒有什麼實際意義的. 放在實例中僅僅爲了說明編程方法.
8.總結
到這裏爲止, 我們可以總結一下簡單模式下, 我們可以做的工作: 如何創建一個有效的HTC組件
a. ATTACH ondocumentready事件, 在過程中實現初始化時的步驟.
b. 分別ATTACH鼠標的五個基本事件. 如果該組件設計了鍵盤事件, 也進行同樣的綁定過程.
c. 如果組件設計了特定的客戶端事件, 僅需要定義並且在需要的時候引發.
d. 特定的METHOD語法也很簡單. 僅需要聲明一個METHOD, 並且在SCRTIPT部分實現同名函數即可.
e.考慮更復雜和實用的應用
button實在是太簡單和太不值得一提了. 我們來考慮一個很受歡迎的東西: treeview. 一個所有web開發人員都非常熱愛的東西.
我們知道, 現在實現treeview的方法很多. 多美觀, 多實用的都有. 我們給自己提出需求, 來看一看用HTC如何設計一個好用而且節省成本的treeview.
需求
可以使用客戶端數據填充其內容; 外觀與windows 資源管理器一致; 可以catch到expand/collipse事件; 可以catch到節點的click事件; 可以定義節點展開/收縮的模式(記憶模式); 可以由接受環境指令expand/collipse指定的節點.
分析
如果以上需求都可以實現, 那麼將是一個非常"高級"的treeview了. 我們逐一分析上述需求:
1. 使用客戶端數據填充: 既然是treeview, 則必然由節點構成. 既然是節點, 就必然體現一定的數據. 而數據的由來一般情況下是由後端傳送來的. 這就要求我們最好使用一種數據格式. 不需要更改, 在後端和前端都可讀. 一般朋友都會想到用XML. 這是很好的想法. 這樣, 我們的treeview必須能夠按照一定的規則讀取XML數據. 將節點解析出來, 並且使用一定的輸出方法輸出目標HTML形成帶有圖標, 文本, 節點線的外觀. 這樣過程一般在OnInit()過程中進行.
2. expand/collipse事件. 有時候環境需要了解treeview的狀態. 例如展開某個節點是自動顯示某些內容. 因此環境必須隨時瞭解treeview裏發生了什麼. 這樣需要我們分別定義expand/collispse事件. 在某些情況下自動地引發他們.
3. 節點的click事件很重要. 一般情況下, 用戶單擊某節點是總是會期望得到什麼.
4. 設定展開/收縮的模式. 我們可以指定treeview是否自己記住展開的節點的狀態. 而有些情況下我們希望treeview不會太長而希望不準同時展開兩個節點. 這需要我們定義一個PROPERTY. 可以通過HTML attribute或者script設定該值從而影響compenent的behavior.
5. 接受環境指定改變節點狀態. 如果我們希望不經過用戶操作而自動打開某節點(不經過頁發回), 希望通過環境的script命令操作treeview. 我們可以定義一些列METHOD, 例如expandNode(id): 展開指定id值的節點.
這樣, 我們就開發了一個有着高級特性的treeview component. 而且該組件的重用性是很高的. 我們只需要在HTML中插入一個特定的標記, 類似<Timeline:Treeview ><xml data…. /></Timeline:Treeview>. 你的 HTML頁就會出現一個非常漂亮的樹型目錄了.