基于 HTML5 Canvas 的属性值点击出现多选项的制作
正常我们设置属性的时候，属性和属性值的 key value 对应，但是在实际开发中，经常遇到属性值可能需要从多项中选择，这个时候用原生的 HTML5 配合 Java 来实现这个功能会让人非常头疼，我试着用 HT for Web 来实现了这个功能，感觉整体实践起来还是比较容易的，所以在这边跟大家分享一下。
本例链接： http://www.hightopo.com/demo/propertyEditor/index.html
本例效果图：
从上面的效果图中我们可以看到，整个页面分为三个部分，左上角的 graphView 拓扑图部分，右下角的 tablePane 表格部分，以及右上角的 propertyView 属性部分。我们先把整个场景划分出来，然后再向各个部分来添加具体的内容：
gv = newht.graph.GraphView(); vartablePane = newht.widget.TablePane(gv.dm()); //表格面板组件propertyView = newht.widget.PropertyView(gv.dm()); //formPane是在propertyView里的，所以要先定义varrightView = newht.widget.SplitView(propertyView, tablePane, 'v', 0.4); //分割组件，v分为上下层，比例为0.4:0.6rightView.getView().style.borderLeft = '1px solid #000'; varborderPane = newht.widget.BorderPane(); //边框面板组件borderPane.setRightView(rightView, 400); //设置 borderPane 右边组件为 rightView，宽度为400borderPane.setCenterView(gv); //设置 borderPane 中间组件为 gv borderPane.addToDOM(); //将 borderPane 组件添加进 body 中
createTable 函数我们后面再讨论。上面代码中 new 出来的部分都是 HT 封装好的组件，相当于“类”，这里解释一下 SplitView 分割组件，分割组件用于左右或上下分割两个子组件， 子组件可为 HT 框架提供的组件，也可为 HTML 的原生组件，子组件以 position 为 absolute 方式进行绝对定位，这个组件中的参数分别为（左组件或上组件， 右组件或下组件，h 表示左右分割 v 表示上下分割，分割位置默认值为 0.5，如果设置值为 0~1 则按百分比分割，大于 1 代表左组件或上组件的绝对宽或高，小于 1 代表右组件或下组件的绝对宽或高）。这里我们用了两次 SplitView，目的是将场景分成三个部分。最后记得一定要将组件添加进 body 中或者任意一个 HTML 标签中，这样才能在界面上显示，其中 addToDOM 的定义内容如下：
addToDOM = function(){varself= this, view = self.getView(), //获取这个组件的底层 div style = view.style; //获取底层 div 的样式 style 属性document.body.(view); //将底层 div 添加进 body 中style.left = '0'; //HT 默认将组件都定义为决定定位 absolute，所以需要设置位置style.right = '0'; style.top = '0'; style.bottom = '0'; window.addEventListener( 'resize', function(){self.iv(); }, false); }
HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的 HT 组件则需要用户手工将 getView() 返回的底层 div 元素添加到页面的 DOM 元素中，这里需要注意的是，当父容器大小变化时，如果父容器是 BorderPane 和 SplitView 等这些 HT 预定义的容器组件，则 HT 的容器会自动递归调用孩子组件 invalidate 函数通知更新。但如果父容器是原生的 html 元素， 则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。
场景创建完毕。为了显示不同节点对应的属性的不同，我们在拓扑图上添加了两个节点：
//创建两个节点varnode1 =createNode( 'Node 1', 'node1', 'circle', 300, 100); createNode( 'Node 2', 'node2', 'rect', 500, 100); gv .sm() .ss(node1); //设置选中 node1 节点createNode 函数的声明如下： function createNode(name, tag, type, x, y){ //创建Node节点varnode =newht .Node(); node .setName(name); //设置名称 name node .setTag( tag); //设置标签 tag node .s({ //设置样式 style。为 setStyle 的简写'select.type': type, //设置节点选中的样式，设置为 circle 则显示在 node 节点外部的 border 显示为圆，设置为 rect 则显示为矩形'select.padding': 20//选中边框内边距}); node .setImage( './images/node.json'); //设置节点图片node .a( 'hidden', false); //自定义属性 hidden。为 setAttr 的简写node .setPosition(x, y); //设置节点坐标gv .dm() .add(node); //将节点添加进 gv 的数据容器 DataModel 中returnnode; }
我们通过控制这个节点的 hidden 属性，利用 graphView 中的可视过滤器 setVisibleFunc 函数来控制节点的显隐：
gv.setVisibleFunc( function(data){if(data.a( 'hidden')){ returnfalse; } returntrue; });
有了节点自然就需要显示属性了，我只设置了四个属性：
createProperty(); functioncreateProperty(){//创建属性propertyView.addProperties([ //用json的数组参数方式批量添加属性信息{ name: 'name', //获取 name 属性，结合 accessType 属性最终实现对节点属性的存取，accessType 默认值为 null，如name为age，采用getAge()和setAge(98)的get/set或is/set方式存取(这边name为name，所以通过 getName() 获取)displayName: 'Name'//设置属性名的显示文本值}, { name: 'hidden', //获取 hidden 属性displayName: 'Hidden this node', accessType: 'attr', //如name为hidden，采用getAttr('hidden')和setAttr('hidden', false)的方式存取icon: 'images/alert.gif', //设置属性名左侧显示的图标valueType: 'boolean', //用于提示组件提供合适的renderer渲染 布尔类型，显示为勾选框editable: true//设置该属性是否可编辑}, { name: 'helloName', displayName: 'Find the tag', accessType: 'attr', drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){//自定义属性值渲染函数varcb = function(v){data.a( 'helloName', v); } returnfillFormPane(formPane1, w, h, tablePane1, names, cb); //返回的值是什么属性值就显示什么，属性值可以显示html标签，ht的组件，文字等等} }, { name: 'number', displayName: 'Check the phone number', accessType: 'attr', drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){varcb = function(v){data.a( 'number', v); } returnfillFormPane(formPane2, w, h, tablePane2, phones, cb); //返回的值是什么属性值就显示什么，属性值可以显示html标签，ht的组件，文字等等} } ]); }
第三第四个属性中 drawPropertyValue 属性的返回值为 fillFormPane 函数，这个函数的参数分别为（表单组件 formP，表单组件宽 w，表单组件高 h，表单组件中按钮点击生成弹出框中的表格组件 tableP，表格组件中的数组内容 arr，cb 函数将双击表格组件中的行返回的值赋值给 form 表单中的 ht.widget.TextField 文本框）。
- 第一个参数 formP 表单组件的创建，表单组件的创建就是创建一个表单组件，在表单组件中添加一个文本框以及一个按钮，这个步骤在 HT 中也是相当的简单：
createDialog 函数创建的过程也是简洁明了，通过 setConfig(config) 方法配置对话框的标题，尺寸，内容等，我给 createDialog 传了一个参数 tPane 表格组件，用作对话框显示的内容：
functioncreateDialog(tPane){//创建弹出框dialog.setConfig({ title: "Tag Name 双击选择", //对话框的标题titleIcon: 'node_image', //标题栏图标content: tPane, //直接将弹出框的内容设置为表格面板width: 400, //指定对话框的宽度height: 200, draggable: true, //指定对话框是否可拖拽调整位置closable: true, //表示是否显示关闭按钮maximizable: true, //表示对话框是否可被最大化resizeMode: "wh", //鼠标移动到对话框右下角可改变对话框的大小，wh表示宽高都可调整}); dialog.show(); //显示对话框}
- 第四个参数 tableP 表格组件，也没有什么特别的，就是创建一个表单组件，然后向表单组件中添加列，步骤简单，代码也相当简单：
解释完 fillFormPane 中的参数，来看看这个函数是如何定义的，基本上只差最后一步，点击 tablePane 表格组件中的元素，将这个元素返回给 formPane 表单组件中的 textField 文本框：
functionfillFormPane(formP, w, h, tableP, arr, cb){//右边的formpaneformP.setWidth(w); formP.setHeight(h); formP.setHGap( 0); tableP.onDataDoubleClicked = function(data){//表格组件中的data所在行被双击时回调varv = arr[data.getAttr( 'index')]; //data.getAttr('index')if(cb) cb(v); //如果传入了cb参数，则设置data.a('number')/data.a('helloName')的值为表格中被双击的那一行的值，即赋值给第三第四属性formP.v( 'tag', v); //根据id设置对应item元素值 为 setValue 的简写，这个id为tag的元素就是文本框dialog.hide(); } if(formP.v( 'tag') === 'undefined'|| formP.v( 'tag') === '') { formP.v( 'tag', arr[ 0]); } returnformP.getView(); }
右边属性栏的显示到这里就全部结束了，左下方的表格面板的创建方式也是雷同的，大家可以自行看代码理解。感谢大家的阅读，如果有些地方我解释的不够清楚，欢迎留言~
