数据绑定手册 - HT for Web

HT for Web 数据绑定手册

索引

概述
绑定格式
矢量绑定
- 饼图案例
- 开关案例
图标绑定
模型绑定
- 设备案例
- 告警案例

概述

数据绑定意味将Data图元的数据模型信息，与界面图形的颜色、大小和角度等可视化参数进行自动同步， HT的预定于图形组件默认就已与DataModel中的Data数据绑定，例如用户修改Node的position位置值，则GraphView和Graph3dView上的相应图元位置会自动同步变化。

传统的数据绑定有单向绑定和双向绑定的概念，但HT系统的设计模式使得绑定更加简化易于理解，HT只有一个DataModel数据模型，绑定DataModel的图形组件并没有组件内部的其他数据模型，所以组件都是如实根据DataModel来呈现界面效果，因此当用户拖拽图元移动时，本质也是修改了数据模型中Node的position位置值，而该属性变化触发的事件通过模型再次派发到图形组件，引发图形组件根据新的模型信息刷新界面。

HT的预定义图元都已自动实现数据绑定，本手册要介绍的主要针对自定义矢量、自定义图标和自定义3d模型，这三种可扩展图形展示效果的数据绑定机制，这三种自定义图形都具有一致的描述与Data进行数据绑定的json格式，用户只需要根据HT指定的规则格式描述好图元参数绑定的Data属性，应用中只需要更新Data上的数据，图形界面就会自动刷新，从而达到实时显示数据的效果。

绑定格式

绑定的格式很简单，只需将以前的参数值用一个带func属性的对象替换即可，func的内容有以下几种类型：

function类型，直接调用该函数，并传入相关Data和view对象，由函数返回值决定参数值，即func(data, view);调用。
string类型：
- style@***开头，则返回data.getStyle(***)值，其中***代表style的属性名。
- attr@***开头，则返回data.getAttr(***)值，其中***代表attr的属性名。
- field@***开头，则返回data.***值，其中***代表data的属性名。
- 如果不匹配以上情况，则直接将string类型作为data对象的函数名调用data.***(view)，返回值作为参数值。

除了func属性外，还可设置value属性作为默认值，如果对应的func取得的值为undefined或null时，则会采用value属性定义的默认值。例如以下代码，如果对应的Data对象的attr属性stateColor为undefined或null时，则会采用yellow颜色：

color: {
    func: 'attr@stateColor',
    value: 'yellow'
}

矢量绑定

数据绑定是HT系统矢量比传统矢量描述格式如SVG灵活强大的重要因素，上文描述的所有矢量组件属性全部可以设置成动态绑定Data模型属性。因此一般的工作流程为：先手工或者采用矢量编辑工具生成矢量json信息，将需要动态变化的参数设计成数据绑定的格式。运行中只需要修改Data中绑定图形的相关属性，则矢量会自动将绑定的属性值，转换显示为相应的颜色，大小，角度等图形信息，最终达到松耦合的数据可视化流程架构。

饼图案例

上例子中：

hollow: {func: 'style@isHollow'} 将pieChart的hollow属性，绑定到Node对象的style属性isHollow上
startAngle: {func: 'attr@angle'} 将pieChart的startAngle属性，绑定到了Node对象的attr属性angle上
height: { func: 'field@_height' } 将pieChart的height属性，绑定到了Node对象的field属性_height上
width: { func: 'getWidth' } 将pieChart的width属性，绑定到了Node对象的方法getWidth上
rect: { func: function (data) { return [5, 5, 190, 190]; } } 将pieChart的rect属性，绑定到了func属性指定的方法上

开关案例

下例展示了颜色background，宽度borderWidth，旋转角度rotation和可见visible多种类型属性，与Data图元attr属性的数据绑定。

background: {
    value: '#2C3E50',
    func: 'attr@switch.background'
},
visible: {
    value: true,
    func: 'attr@switch.visible'
} 
borderWidth: {
    value: 8,
    func: 'attr@switch.thickness'
},
rotation: {
    value: -Math.PI/4,
    func: 'attr@switch.angle'
}

图标绑定

图标用于呈现在图元周围作为附属物的展示方式，可参见入门手册和3D手册的说明，定义图标的参数皆可采用数据绑定的描述方式实现动态变化。

node.addStyleIcon('alarm', {                    
    names: ['alarm-star', 'alarm-triangle', 'alarm-circle'],                    
    position: {func: 'attr@alarm.position'},
    direction: { func: 'attr@alarm.direction' },
    gap: { func: 'attr@alarm.gap' },
    width: { func: 'attr@alarm.width' },
    height: { func: 'attr@alarm.height' },
    visible: { func: 'attr@alarm.visible' },                    
    rotation: { func: 'attr@alarm.rotation' },
    stretch: { func: 'attr@alarm.stretch' },
    opacity: { func: 'attr@alarm.opacity' },
    transparent: { func: function(data){ return data.a('alarm.opacity') < 1; } },
    light: { func: 'attr@alarm.light' },
    textureScale: { func: 'attr@alarm.texture.scale' },
    discardSelectable: { func: 'attr@alarm.discard.selectable' },
    r3: { func: function(data) { return [0, 0, -data.a('alarm.rotation')]; } },
    face: { func: 'attr@alarm.face' },
    reverseFlip: { func: 'attr@alarm.reverse.flip' },
    reverseCull: { func: 'attr@alarm.reverse.cull' },
    reverseColor: { func: 'attr@alarm.reverse.color' },
    autorotate: { func: 'attr@alarm.autorotate' }
});

模型绑定

建模手册中介绍的自定义3D模型也支持数据绑定机制，可数据绑定是HT的建模远强大于传统3D建模工具的特色功能，构建模型的任何颜色、大小、旋转等参数皆可绑定Data数据模型属性，以这样的方式建模后用户只需要更新Data数据对象属性值，则3D界面对应图元的呈现效果即可实时同步更新。

设备案例

以上例子注册的ems-block模型由一个立方体和一个圆筒构造，两个模型的颜色分别绑定了Data上attr属性的circleColor和rectColor值：

ht.Default.setShape3dModel('ems-block', [
    {
        shape3d: ht.Default.createCylinderModel(32, 0, 32, false, false, true, true),   
        r3: [Math.PI/2, 0, 0],   
        color: {
            func: 'attr@circleColor',
            value: '#3498DB'
        }     
    },
    {
        shape3d: 'box',
        s3: [1, 0.2, 1], 
        t3: [0, -0.7, 0],
        color: {
            func: 'attr@rectColor',
            value: '#3498DB'
        }
    }
]);

HT的所有通用组件也都支持对矢量图片的渲染，该例子中左侧TreeView显示的正是实现了数据绑定的矢量图标， Graph3dView和TreeView的组件都绑定了同样的数据源，因此修改Data上attr属性的circleColor和rectColor可同时驱动不同的视图组件。

ht.Default.setImage('ems-block', {
    width: 18,
    height: 18,
    comps: [
        {
            type: 'circle',
            rect: [0, 2, 18, 10],
            background: {
                func: 'attr@circleColor',
                value: '#3498DB'                               
            }
        }, 
        {
            type: 'rect',
            rect: [4, 14, 10, 3],
            background: {
                func: 'attr@rectColor',
                value: '#3498DB'                               
            }
        }                           
]});

告警案例

icons图标功能不仅可显示平面图片，也支持将注册的模型作为图标摆放。以上例子在Node图元顶上摆放了一个3d模型的图标，该模型有三个部分构成一个告警提示，模型三个部分的颜色绑定了图元style属性的all.blend值，模型的旋转角度绑定了alarm.rotation.*。

var array = [
    {
        shape3d: ringModel,  
        color: { func: 'style@all.blend' },
        r3: [Math.PI/2, 0, 0]
    },
    {
        shape3d: sphereModel,
        color: { func: 'style@all.blend' },
        t3: [0, 30, 0]
    },
    {
        shape3d: cylinderModel, 
        color: { func: 'style@all.blend' },
        t3: [0, -10, 0]
    }
];

ht.Default.setShape3dModel('alarm', {
    shape3d: array,                       
    t3: [0, 50, 0],
    r3: {func: function(data){
         return [
             data.a('alarm.rotation.x'), 
             data.a('alarm.rotation.y'), 
             data.a('alarm.rotation.z')];
    }}
});

图标为3d模型时不同于传统的通过names定义图标数组，而是设置shape3d的模型名称，目前还不支持数组方式，只允许指定一个模型名称，如需添加多个3d模型图标可通过多次调用addStyleIcon实现：

node.addStyleIcon('alarm', {
   position: 3,
   face: 'center',
   shape3d: 'alarm'                   
});

欢迎交流 service@hightopo.com