屬性清單想必大家都不會陌生，正常用 HTML5 來做的屬性清單大概就是用下拉菜單之類的，而且很多情況下，下拉清單還不夠好看，怎麼辦？我試着用 HT for Web 來實作屬性欄點選按鈕彈出多功能選框，對傳入的資料進行選擇的功能，感覺整體實踐起來還是比較簡單友善的，是以在這邊跟大家分享一下。
本例效果圖：
從上面的效果圖中我們可以看到，整個頁面分為 3 個部分，左邊的 graphView 拓撲圖部分，右下角的 tableView 表格部分，以及右上角的 propertyView 屬性部分。我們先把整個場景劃分出來，然後再向各個部分來添加具體的内容：
HT 的元件一般都會嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外層的 HT 元件則需要使用者手工将 getView() 傳回的底層 div 元素添加到頁面的 DOM 元素中，這裡需要注意的是，當父容器大小變化時，如果父容器是 BorderPane 和 SplitView 等這些 HT 預定義的容器元件，則 HT 的容器會自動遞歸調用孩子元件 invalidate 函數通知更新。但如果父容器是原生的 html 元素， 則 HT 元件無法獲知需要更新，是以最外層的 HT 元件一般需要監聽 window 的視窗大小變化事件，調用最外層元件 invalidate 函數進行更新。
場景建立完畢。為了顯示不同節點對應的屬性的不同，我們在拓撲圖上添加了七個節點：
createNode 函數的聲明如下：
我們通過控制這個節點的 hidden 屬性，利用 graphView 中的可視過濾器 setVisibleFunc 函數來控制節點的顯隐：
有了節點自然就需要顯示屬性了，加上下面的 tablePane 表格面闆中的值，一共添加了七種屬性：
第三第四個屬性中 drawPropertyValue 屬性的傳回值為 fillFormPane 函數，這個函數的參數分别為（表單元件 formP，表單元件寬 w，表單元件高 h，表單元件中按鈕點選生成彈出框中的表格元件 tableP，表格元件中的數組内容 arr，cb 函數将輕按兩下表格元件中的行傳回的值指派給 form 表單中的 ht.widget.TextField 文本框）。
第一個參數 formP 表單元件的建立，表單元件的建立就是建立一個表單元件，在表單元件中添加一個文本框以及一個按鈕，這個步驟在 HT 中也是相當的簡單：
createDialog 函數建立的過程也是簡潔明了，通過 setConfig(config) 方法配置對話框的标題，尺寸，内容等，我給 createDialog 傳了一個參數 tPane 表格元件，用作對話框顯示的内容：
第四個參數 tableP 表格元件，也沒有什麼特别的，就是建立一個表單元件，然後向表單元件中添加列，步驟簡單，代碼也相當簡單：
解釋完 fillFormPane 中的參數，來看看這個函數是如何定義的，基本上隻差最後一步，點選 tablePane 表格元件中的元素，将這個元素傳回給 formPane 表單元件中的 textField 文本框：
右上方屬性欄的顯示到這裡就全部結束了，右下方的表格面闆的建立方式也是雷同的，大家可以自行看代碼了解。
最後說一下整個界面節點的排布，HT 中的 autolayout 自動布局元件，即根據節點和連線關系，提供多種類型算法進行自動排布節點位置。 自動布局常用于圖元較多，或連接配接關系教複雜時，不易于人工拖拽擺放的場景。我把各個布局方式通過按鈕的方式呈現出來了，點選對應的按鈕，布局方式就會根據按下的按鈕設定的排布方式來自動布局：
首先，建立一個新的執行個體，傳入需要自動布局的對象，可以為 DataModel、graphView 以及 graph3dView 三種，然後設定預設的排布方式：
接着建立 formPane 表單面闆，添加進 body 中，放在 body 左上角，我不将所有代碼粘出來了，就顯示第一個布局的按鈕就好：