• HTML5 Canvas 数据持久化存储之属性列表


    正常我们设置属性的时候,属性和属性值的 key value 对应,但是在实际开发中,经常遇到属性值可能需要从多项中选择,这个时候用原生的 HTML5 配合 JavaScript 来实现这个功能会让人非常头疼,我试着用 HT for Web 来实现了这个功能,感觉整体实践起来还是比较容易的,所以在这边跟大家分享一下。

    本例链接: property、tableview和formpane结合使用

    本例效果图:

    图片描述

    从上面的效果图中我们可以看到,整个页面分为三个部分,左边的 graphView 拓扑图部分,右下角的 tablePane 表格部分,以及右上角的 propertyView 属性部分。我们先把整个场景划分出来,然后再向各个部分来添加具体的内容:

    1. gv = new ht.graph.GraphView();
    2. var tablePane = new ht.widget.TablePane(gv.dm());//表格面板组件
    3. propertyView = new ht.widget.PropertyView(gv.dm());//formPane是在propertyView里的,所以要先定义
    4. var rightView = new ht.widget.SplitView(propertyView, tablePane, 'v', 0.4);//分割组件,v分为上下层,比例为0.4:0.6
    5. rightView.getView().style.borderLeft = '1px solid #000';
    6. var borderPane = new ht.widget.BorderPane();//边框面板组件
    7. borderPane.setRightView(rightView, 400);//设置 borderPane 右边组件为 rightView,宽度为400
    8. borderPane.setCenterView(gv);//设置 borderPane 中间组件为 gv
    9. borderPane.addToDOM();//将 borderPane 组件添加进 body 中

    createTable 函数我们后面再讨论。上面代码中 new 出来的部分都是 HT 封装好的组件,相当于“类”,这里解释一下 SplitView 分割组件,分割组件用于左右或上下分割两个子组件, 子组件可为 HT 框架提供的组件,也可为 HTML 的原生组件,子组件以 position 为 absolute 方式进行绝对定位,这个组件中的参数分别为(左组件或上组件, 右组件或下组件,h 表示左右分割 v 表示上下分割,分割位置默认值为 0.5,如果设置值为 0~1 则按百分比割,大于 1 代表左组件或上组件的绝对宽或高,小于 1 代表右组件或下组件的绝对宽或高)。这里我们用了两次 SplitView,目的是将场景分成三个部分。最后记得一定要将组件添加进 body 中或者任意一个 HTML 标签中,这样才能在界面上显示,其中 addToDOM 的定义内容如下:

    1. addToDOM = function(){
    2. var self = this,
    3. view = self.getView(), //获取这个组件的底层 div
    4. style = view.style;//获取底层 div 的样式 style 属性
    5. document.body.appendChild(view); //将底层 div 添加进 body 中
    6. style.left = '0';//HT 默认将组件都定义为决定定位 absolute,所以需要设置位置
    7. style.right = '0';
    8. style.top = '0';
    9. style.bottom = '0';
    10. window.addEventListener('resize', function () { self.iv(); }, false);
    11. }

    HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用,而最外层的 HT 组件则需要用户手工将 getView() 返回的底层 div 元素添加到页面的 DOM 元素中,这里需要注意的是,当父容器大小变化时,如果父容器是 BorderPane 和 SplitView 等这些 HT 预定义的容器组件,则 HT 的容器会自动递归调用孩子组件 invalidate 函数通知更新。但如果父容器是原生的 html 元素, 则 HT 组件无法获知需要更新,因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件,调用最外层组件 invalidate 函数进行更新。

    场景创建完毕。为了显示不同节点对应的属性的不同,我们在拓扑图上添加了七个节点:

    1. function initModel(){
    2. var name = "设备";
    3. var count = 0;
    4. var root = createNode(name + count++, name + (++count));//参数1为name,参数2为tag
    5. root.setImage('./symbols/机房/服务器.json');
    6. root.setName('服务器');
    7. root.s('label.position', 3);
    8. gv.sm().ss(root);//默认选中root节点
    9. for (var i = 0; i < 2; i++) {
    10. var iNode = createNode(name + count++, name + (++count));//参数1为name,参数2为tag
    11. createEdge(root, iNode);
    12. for (var j = 0; j < 2; j++) {
    13. var jNode = createNode(name + count++, name + (++count));
    14. createEdge(iNode, jNode);
    15. }
    16. }
    17. }

    createNode 函数的声明如下:

    1. function createNode(name, tag){//创建Node节点
    2. flag++;
    3. var node = new ht.Node();
    4. node.setName(name);
    5. node.setTag(tag);
    6. node.setImage('./symbols/机房/XX分系统.json');
    7. node.a('hidden', false);//自定义属性,可以控制node.a('hidden')来控制节点显隐
    8. node.a('接口类型', 'SATA');
    9. node.a('显卡', 'Nvidia');
    10. if(flag % 2 === 0){
    11. node.a('接口类型', 'IDE');
    12. node.a('显卡', 'ATI');
    13. }
    14. node.s('label.position', 11);
    15. gv.dm().add(node);//将节点添加进数据容器DataModel中
    16. node.tablePane1 = createTableView(serviceType, dataModel1);//创建表格面板
    17. node.tablePane2 = createTableView(serviceSize, dataModel2);
    18. node.tablePane3 = createTableView(version, dataModel3);
    19. node.formPane1 = createFormPane(node.tablePane1);//创建表单面板
    20. node.formPane1.title = '类型';//为了给后面dialog对话框的标题做准备
    21. node.formPane2 = createFormPane(node.tablePane2);
    22. node.formPane2.title = '内存';
    23. node.formPane3 = createFormPane(node.tablePane3);
    24. node.formPane3.title = '型号';
    25. if(flag % 3 === 0){
    26. node.formPane3.v('tag', '联想(Lenovo)服务器X3650M5 8871');
    27. }else{
    28. node.formPane3.v('tag', 'Lenovo IBM X3250 5458I21');
    29. }
    30. node.a('型号', node.formPane3.v('tag'));
    31. return node;
    32. }

    我们通过控制这个节点的 hidden 属性,利用 graphView 中的可视过滤器 setVisibleFunc 函数来控制节点的显隐:

    1. gv.setVisibleFunc(function(data){
    2. if(data.a('hidden')){
    3. return false;
    4. }
    5. return true;
    6. });

    有了节点自然就需要显示属性了,一共添加了七种属性:

    1. function createProperty(){//创建属性
    2. propertyView.addProperties([
    3. {
    4. name: 'name',//获取 name 属性,结合 accessType 属性最终实现对节点属性的存取,accessType 默认值为 null,如name为age,采用getAge()和setAge(98)的get/setis/set方式存取(这边name为name,所以通过 getName() 获取)
    5. displayName: '名称'//设置属性名的显示文本值
    6. },
    7. {
    8. name: 'hidden',//获取 hidden 属性
    9. displayName: '隐藏这个节点',
    10. accessType: 'attr',//如name为hidden,采用getAttr('hidden')和setAttr('hidden', false)的方式存取
    11. icon: 'images/alert.gif',//设置属性名左侧显示的图标
    12. valueType: 'boolean',//用于提示组件提供合适的renderer渲染 布尔类型,显示为勾选框
    13. editable: true//设置该属性是否可编辑
    14. },
    15. {
    16. name: 'grade',
    17. displayName: '类型',
    18. accessType: 'attr',
    19. drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){//自定义属性值渲染函数
    20. var cb = function(v) {
    21. data.a('grade', v);
    22. }
    23. return fillFormPane(data.formPane1, w, h, data.tablePane1, serviceType, cb);
    24. }
    25. },
    26. {
    27. name: 'number',
    28. displayName: '内存',
    29. accessType: 'attr',
    30. drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){
    31. var cb = function(v) {
    32. data.a('number', v);
    33. }
    34. return fillFormPane(data.formPane2, w, h, data.tablePane2, serviceSize, cb);
    35. }
    36. },
    37. {
    38. name: '接口类型',
    39. accessType: 'attr',
    40. displayName: '接口类型'
    41. },
    42. {
    43. name: '显卡',
    44. accessType: 'attr',
    45. displayName: '显卡'
    46. },
    47. {
    48. name: '型号',
    49. accessType: 'attr',
    50. displayName: '型号',
    51. }
    52. ]);
    53. }

    第三第四个属性中 drawPropertyValue 属性的返回值为 fillFormPane 函数,这个函数的参数分别为(表单组件 formP,表单组件宽 w,表单组件高 h,表单组件中按钮点击生成弹出框中的表格组件 tableP,表格组件中的数组内容 arr,cb 函数将双击表格组件中的行返回的值赋值给 form 表单中的 ht.widget.TextField 文本框)。

    • 第一个参数 formP 表单组件的创建,表单组件的创建就是创建一个表单组件,在表单组件中添加一个文本框以及一个按钮,这个步骤在 HT 中也是相当的简单:
    1. function createFormPane(tPane) {//创建表单面板
    2. var formPane = new ht.widget.FormPane();
    3. formPane.setPadding(0);//设置表单四周与组件内容的间距
    4. var tField = new ht.widget.TextField();//创建一个文本框
    5. tField.setText('');//文本框的内容为空
    6. tField.setDisabled(true);//文本框不可操作
    7. formPane.addRow([//向表单中添加行
    8. {
    9. id: 'tag',//唯一标示属性,可通过formPane.getItemById(id)获取添加到对应的item对象
    10. element: tField//属性值可为 HTML原生元素、FormPane内部自绘制的文本信息以及HT自带组件如Button、CheckBox和ComboBox等
    11. },
    12. {
    13. button:{//设置了该属性后HT将根据属性值自动构建ht.widget.Button对象,并保存在element属性上
    14. label:'...',//按钮上的文本内容
    15. onClicked: function(){//按钮点击事件
    16. for(var i = 0; i < tPane.dm().size(); i++){//设置tablePane默认选中formPane对应的值
    17. var data = tPane.dm().getDatas().get(i);
    18. if(data.a('value') === formPane.v('tag')){
    19. tPane.sm().ss(data);
    20. }
    21. }
    22. return createDialog(tPane, formPane);//返回的是创建一个对话框,对话框的内容为表格面板
    23. }
    24. }
    25. }
    26. ], [0.5, 0.1]);//设置表格组件中第一个元素和第二个元素的显示比例。这个表格组件一共只有两个元素,一个文本框一个按钮,占比分别为 0.50.1
    27. return formPane;
    28. }

    createDialog 函数创建的过程也是简洁明了,通过 setConfig(config) 方法配置对话框的标题,尺寸,内容等,我给 createDialog 传了一个参数 tPane 表格组件,用作对话框显示的内容:

    图片描述

    1. function createDialog(tPane){//创建弹出框
    2. dialog.setConfig({
    3. title: gv.sm().ld().getName()+"的"+formPane.title,//对话框的标题
    4. content: tPane, //直接将弹出框的内容设置为表格面板
    5. width: 400,//指定对话框的宽度
    6. height: 200,
    7. draggable: true,//指定对话框是否可拖拽调整位置
    8. closable: true,//表示是否显示关闭按钮
    9. maximizable: true,//表示对话框是否可被最大化
    10. resizeMode: "wh",//鼠标移动到对话框右下角可改变对话框的大小,wh表示宽高都可调整
    11. buttons: [//添加两个按钮
    12. {
    13. label: '取消',
    14. action: function(){
    15. dialog.hide()
    16. }
    17. },
    18. {
    19. label: '确定',
    20. }
    21. ]
    22. });
    23. dialog.show();//显示对话框
    24. }
    • 第四个参数 tableP 表格组件,也没有什么特别的,就是创建一个表单组件,然后向表单组件中添加列,步骤简单,代码也相当简单:
    1. function createTableView(arr, dm){//创建表格组件
    2. var tableView = new ht.widget.TableView(dm);
    3. tableView.addColumns([//用json的数组参数方式批量添加列信息
    4. {
    5. displayName: 'ID',//获取表头的列名内容
    6. drawCell: function(g, data, selected, column, x, y, w, h, tableView){//自定义单元格渲染方式
    7. var id = tableView.getRowIndex(data);//返回data对象所在的行索引
    8. ht.Default.drawText(g, 'row' + (id + 1), null, null, x, y, w, h, 'center');//绘制文字参数(g画笔对象,value文字内容,font文字字体,color文字颜色,x绘制开始的x坐标,y绘制开始的y坐标,w绘制的宽度,h绘制的高度,align文字水平对齐方式,vAlign文字垂直对齐方式)
    9. }
    10. },
    11. {
    12. displayName: 'Name',
    13. drawCell: function(g, data, selected, column, x, y, w, h, tableView){
    14. var id = tableView.getRowIndex(data);
    15. var info = arr[id];
    16. ht.Default.drawText(g, info, null, null, x, y, w, h, 'center');
    17. }
    18. }
    19. ]);
    20. return tableView;
    21. }

    解释完 fillFormPane 中的参数,来看看这个函数是如何定义的,基本上只差最后一步,点击 tablePane 表格组件中的元素,将这个元素返回给 formPane 表单组件中的 textField 文本框:

    1. function fillFormPane(formP, w, h, tableP, arr, cb){//右边的formpane
    2. if(formP === undefined){
    3. return;
    4. }
    5. formP.setWidth(w);
    6. formP.setHeight(h);
    7. formP.setHGap(0);
    8. if(formP.v('tag') === 'undefined' || formP.v('tag') === '') {
    9. formP.v('tag', arr[0]);
    10. }
    11. tableP.onDataDoubleClicked = function(data){//表格组件中的data所在行被双击时回调
    12. var v = arr[data.a('index')];
    13. formP.v('tag', v);//根据id设置对应item元素值 为 setValue 的简写,这个id为tag的元素就是文本框
    14. dialog.hide();
    15. if (cb){cb(v);} //如果传入了cb参数,则设置data.a('number')/data.a('helloName')的值为表格中被双击的那一行的值,即赋值给第三第四属性
    16. }
    17. tableP.onDataClicked = function(data){//表格组件中的data所在行被单击时回调
    18. dialog.getConfig().buttons[1].action = function(){//点击“确定”才进行下面的操作
    19. var v = arr[data.a('index')];
    20. formP.v('tag', v);
    21. dialog.hide();
    22. if (cb){cb(v);}
    23. }
    24. };
    25. return formP.getView();
    26. }

    右上方属性栏的显示到这里就全部结束了,右下方的表格面板的创建方式也是雷同的,大家可以自行看代码理解。

    最后说一下整个界面节点的排布,HT 中的 autolayout 自动布局组件,即根据节点和连线关系,提供多种类型算法进行自动排布节点位置。 自动布局常用于图元较多,或连接关系教复杂时,不易于人工拖拽摆放的场景。我把各个布局方式通过按钮的方式呈现出来了,点击对应的按钮,布局方式就会根据按下的按钮设置的排布方式来自动布局:

    图片描述

    首先,创建一个新的实例,传入需要自动布局的对象,可以为 DataModel、graphView 以及 graph3dView 三种,然后设置默认的排布方式:

    1. autoLayout = new ht.layout.AutoLayout(gv);
    2. setTimeout(function(){
    3. layout('towardsouth', true);//因为图片还没加载出来的时候,自动布局就按照节点的默认大小来布局的
    4. }, 200);

    接着创建 formPane 表单面板,添加进 body 中,放在 body 左上角,我不将所有代码粘出来了,就显示第一个布局的按钮就好:

    1. function createDirectionForm(){
    2. var form = new ht.widget.FormPane();
    3. form.setWidth(200);//设置表单宽度
    4. form.setHeight(80);
    5. document.body.appendChild(form.getView());
    6. form.getView().style.background = '#fff';
    7. form.getView().style.boxShadow = '4px 16px 16px rgba(0, 0, 0, 0.1)';//设置阴影样式
    8. form.addRow([//这一行单独拿出来,作为标题
    9. {
    10. element: '自动布局:',//显示的文字
    11. }
    12. ], [0.1]);//数组内只有一个对象,就只设置一个对象的宽度就好
    13. form.addRow([
    14. {
    15. button: {
    16. icon: '布局/南布局.json',
    17. onClicked: function(){
    18. layout('towardsouth', true);
    19. },
    20. background: null,
    21. labelColor: '#fff',
    22. groupId: 'btn',
    23. toolTip: '朝南布局',
    24. borderColor: null
    25. }
    26. },
    27. //....接下来添加剩下的6个按钮
    28. ], [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]);//数组中有七个对象,就要设置七个对象的宽度
    29. return form;
    30. }

    比较有趣的部分就是这些啦,感谢大家的阅读,如果有些地方我解释的不够清楚,欢迎留言~或者去 HT for Web 官网多多学习~

  • 相关阅读:
    什么是MQ和认识RabbitMQ
    并发工具类——CountDownLatch、CyclicBarrier、Semaphore、Exchanger的介绍与使用
    通信网络安全防护定级备案流程介绍(附流程图)
    Mybatis多表连接查询——一对多
    探索 Prompt 的世界:让你的 AI 更智能
    Windows卸载ninja流程
    极简工作流「GitHub 热点速览」
    《DevOps 精要:业务视角》- 读书笔记(四)
    C语言的语句与程序的基本结构
    FPGA常用通信协议 —UART(二)---UART接收
  • 原文地址:https://blog.csdn.net/delishcomcn/article/details/132799401