<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数据显示正确，那就去找找实际运行后台通信解析后的数据是否正确的设置到模型上，这样一步步的分析很容易就能定位到问题的根源。