HT for Web 属性组件手册

索引

概述

HT for Web提供了属性组件类ht.widget.PropertyView，用于显示DataModel数据容器中，当前选中的Data类型对象的属性， 支持分组、排序和过滤等方式展示属性。另外ht提供了属性面板插件， 该扩展插件将分组、排序和过滤提供了可视化的组件封装。

通过propertyView = new ht.widget.PropertyView(dataModel);初始化构建一个属性组件对象，dataModel参数为属性组件绑定的数据模型， 该模型为空时属性组件构造函数内部将创建一个新的数据模型进行绑定。

属性组件的getPropertyModel()函数返回属性模型对象，其本质也是个DataModel类型对象，只不过该对象是仅用于添加ht.Property类型对象， ht.Property类型的父类为ht.Data，增加了和属性定义相关的函数接口。

因此用户所需要做的工作是，根据要显示的属性信息构建出ht.Property对象，然后添加到propertyView.getPropertyModel()函数返回的属性模型， 这样当propertyView.getDataModel()的数据模型选中图元变化时，当前选中图元Data的相关属性信息，就会根据propertyView.getPropertyModel() 上存储的ht.Property对象的配置进行显示。

属性

ht.Property属性类继承于ht.Data，不可设置父子关系，具备以下属性函数：

枚举是较为常见的属性编辑选择应用，在编辑时候呈现下拉列表，因此ht对枚举类型属性考虑了很多应用场景，setEnum(params)函数即可设置单个的json参数， 也可以设置逐个的参数信息setEnum(enumValues, enumLabels, enumIcons, enumEditable, enumStrict)， 以下为常见的案例：

ht内部会自动检测用户是否引入了表单插件，若引入了表单插件的ht.widget.ComboBox组件则采用之作为编辑器， 否则采用原生html的select组件，由于原生html的select下拉组件只文本显示，因此上面的很多参数仅对ht.widget.ComboBox组件起作用。

表单插件中的滑动条ht.widget.Slider也是较为常见和易用的编辑组件， 为此ht也增加了该类型相应属性的设置，通过getSlider()和setSlider(parmas)可指定该属性在编辑状态呈现的滑动条信息。

属性组件

属性组件类ht.widget.PropertyView主要可配置属性和函数如下：

PropertyView提供了addProperties和setProperties的函数，可通过json格式较容易的批量添加Property属性，上例采用了如下的代码方式：

propertyView.addProperties([
    {
        name: 'name',
        displayName: 'Name'
    },
    {
        displayName: 'CPU',
        drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view) {
            drawFunc(g, data.a('cpu'), x, y, w, h);
        },
        getToolTip: function(data, isValue, propertyView){
            return isValue ? data.a('cpu') + '%' : 'CPU usage percentage';
        }
    },
    {
        displayName: 'MEM',
        drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view) {
            drawFunc(g, data.a('mem'), x, y, w, h);
        },
        getToolTip: function(data, isValue, propertyView){
            return isValue ? data.a('mem') + '%' : 'Memory usage percentage';
        }        
    }
]);

以上例子在定义CPU和MEM的Property时，未指定任何name和accessType的信息，因为他们都定义了drawPropertyValue函数， 因此ht内部无需获取值的配置信息，但这也带来了另外的问题，当propertyView.enableToolTip()后，ht内部无法获取到值信息进行提示， 因此该例子中在定义CPU和MEM的Property时，都定义了getToolTip函数进行自定义。

例子中呈现指标时当百分比值在0~40之间采用绿色，40~70之间采用黄色，70~100之间采用红色，因此定义了getColor的统一颜色转换函数， 同时drawPropertyValue的自定义函数也都调用了drawFunc的统一百分比绘制函数。

getColor = function(value) {
    if (value < 40)
        return '#00A406';
    if (value < 70)
        return '#FFCC00';
    return '#A60000';
};

drawFunc = function(g, value, x, y, w, h){
    g.fillStyle = '#A1A1A3';
    g.beginPath();
    g.rect(x, y, w, h);
    g.fill();                    
    g.fillStyle = getColor(value);
    g.beginPath();
    g.rect(x, y, w * value / 100, h);
    g.fill();
    ht.Default.drawText(g, value + '%', '12px Arial', 'white', x, y, w, h, 'center');                
};
欢迎交流 service@hightopo.com