<a href="http://www.hightopo.com/guide/guide/core/propertyview/examples/example_custom.html" target="_blank">http://www.hightopo.com/guide/guide/core/propertyview/examples/example_custom.html</a>
此例子麻雀雖小五髒俱全，三個部分分别采用三種方式實作了自定義元件，同時不同元件共享同一資料源，在呈現的基礎上還支援桌面和移動端的Mouse和Touch的互動，還有不同終端螢幕的元件布局功能。
業務上需要在占用率小于40%時呈現律師，40%-70%時顯示黃色，超過70%時呈現紅色，是以定義了如下getColor的工具函數：
PropertyView上采用的最基礎和原始的方式，通過Canvas畫筆進行單元格的自定義繪制，在注冊PropertyView時重載drawPropertyValue函數即可實作單元格自定義Renderer的繪制
Slider拉條部分直接在HT封裝的元件之上應用，因而無需接觸到最底層的Canvas畫筆繪制，僅需要在onValueChanged時更新leftBackgroud拉條左側顔色即可，其實也可以通過重載Slider的getLeftBackground函數實作：
以上代碼注冊了名為server-image的圖檔，綁定了attr上的mem和cpu的兩個屬性，是以做完這些手腳架的基礎工作後，應用人員隻需要建構ht.Node對象，通過node.setImage('server-image')即可實作該圖元在GraphView上呈現'server-image'描述的矢量效果，并且PropertyView、Slider和GraphView三個元件都通過node的attr上的cpu和mem來顯示界面，這樣當背景擷取到采集的實時資料後，隻需要更新到node的attr上的cpu和mem屬性，則界面上的所有元件就會自定更新顯示：
當然實際應用中并不需要拉條改變CPU和MEN值，這些值一般通過背景采集實時自動更新僅作為呈現，但有了前端這些元件的一站式支援，我們不需要連接配接背景也可以很友善在用戶端進行模拟測試，有了這樣的機制我們就可以分離子產品一步步測試，例如我們現在不需要連接配接伺服器也可以測試矢量描述定義的是否正确，數值改變後綠黃紅的業務顔色更新是否正确，各個元件的資料同步是否正常，Mouse和Touch互動是否能正常操作，界面在不同裝置螢幕上顯示是否正常等等，這些純用戶端元件的封裝工作都做到位後，你就可以安心連接配接背景資料進行測試了。
見過太多客戶出問題時隻會說：界面顯示不對。這樣的問題描述完全無法定位根源，到底時背景資料庫問題，網絡通訊問題，解析資料問題，設定模型問題還是元件封裝問題？這也是MVC/MVP/MVVM存在的另外一個層面的意義，MV*除了事件派發資料綁定外，能更好的進行呈現、模型和業務邏輯的分工切割進行獨立測試的重要意義，就行TCP/IP七層協定的分類，每個協定層都應該確定正确實作自己的協定約定，并且每一層可進行獨立的測試，這才是可維護可擴充的系統，是以對于HT客戶遇到問題時，我們一般也是一層層的幫忙梳理找根源，如果矢量描述沒問題呈現出錯，那是HT元件庫的問題，如果模拟到Node上的attr資料顯示正确，那就去找找實際運作背景通信解析後的資料是否正确的設定到模型上，這樣一步步的分析很容易就能定位到問題的根源。