常用HT API

IOTOS

于 2022-09-28 07:16:41 发布

阅读量412

点赞数

文章标签：前端 ht for web ht.js webgl 图形引擎

本文链接：https://blog.csdn.net/IOTOS/article/details/127081830

版权

ht for web深度开发实践专栏收录该内容

63 篇文章 36 订阅

订阅专栏

1. 数据模型API

1.1 Data

1.1.1 setAttrObject() / getAttrObject()

TypeScript
nodetmp.setAttrObject({
'tpl_oid': tpl_oid,
'tpl_name': tpl_name
})

var tpl_oid_tmp = nodetmp.getAttrObject()['tpl_oid']

1.1.2 getDataByTag

根据图标Tag标签获取图元节点对象，并且根据a()、s()等获取属性值或者设置属性内容。

2. 图形组件API

2.1 ht.graph.GraphView

2.1.1 getView()

获取html dom元素，比如通过这样可以设置鼠标指针等：

JavaScript
nodetmp.getView().style.cursor = 'pointer'

2.2 ht.widget

相对于图元node.getView()获取html dom元素，ht.widget通过getElement()可以获取html dom元素！有dom元素可以就用到html的所有特性了，特别是css相关的样式，也包括cursor等标签属性，不需要专门HT提供API！如下：

JavaScript
if (!cache.obj) {
    var textField = cache.obj = new ht.widget.TextField();
    textField.getElement().style.cursor= 'default';            //HTML attr 属性
    textField.getElement().style.border = '15px solid green'; //HTML css 样式
    textField.getElement().onclick = (e)=>{                    //HTML event事件
        alert(222)
    }

    textField.layoutHTML = function () {
        gv.layoutHTML(data, textField, false);
    }
}
return cache.obj;

2.3 ht.widget.FormPane

TypeScript
//一、创建表单面板对象以及里面各个不同输入或点击的控件
var formPane = new ht.widget.FormPane();

//设置高度
formPane.setRowHeight(26);

//翻译S
var S = hteditor.getString;

//添加一行连续多个控件（）
formPane.addRow([S('Id'), {
    id: 'input',
    textField: {
        text: ''
    }
}, {
    id: 'template',    //自定义的标签，跟html里的id一样，唯一性
    button: {          //具体支持哪些看上面表单手册控件说明，包含各控件的属性API
        icon: 'symbols/demo/国家电网/资源 17.json',
        onClicked: function onClicked() {
            this.setClickable(false)    //这里可以用this来调用当前button对象的方法！
        }
    }
}, {
    id: 'btnClear',
    button: {
        //label: '清理',    //js的dict字典结构，属性赋固定值的，
                          //都可以通过函数包来返回(()=>{})(),如下：
        label:(()=> {
            return idinfo == '' ? '未绑定数据点' : '未知绑定'
        })(),
        icon: 'symbols/demo/demo/gas/red.json',
        onClicked: function onClicked() {
            formPane.v({
                input: ''
            });
            //代表性：控件事件函数中对同级别控件之间的操作访问，对自身是用this就好，
            //代表ht Data图元组件；访问同级其他组建，前面统一一串，id作为参数：
            // this.setLabel(notBindedYet)
           formPane.getItemById('template').element.setLabel(notBindedYet)
        }
    }
}], [50, 40, 28]);    //绝对值代表宽度或高度为固定值，HT系统对大于1的值认定为绝对值，
                      //相对值为小于或等号1的值表示，其真实分配值为总宽度或总高度扣
                      //除所有绝对值后的再分配

TypeScript
//二、获取已经创建的表单中某个控件，并且调用其成员函数方法
//注意后面还需要.element，这样就获取到了ht控件对象，可以直接参照上面表单手册API文档调用方法了！
let templateButtonTmp = formPane.getItemById('template').element;
templateButtonTmp.setClickable(true)
templateButtonTmp.setToolTip(templateButtonDefaultToolTip)
templateButtonTmp.getView().style.cursor = 'pointer' //.element后，就是ht的图元了，可以用到Data的所有方法，
//包括getView()获取html dom元素！