你的位置:首页 > Java教程

[Java教程]TWaver初学实战——如何在EasyUI中插入TWaver

TWaver是一款强大的图形界面开发组件,可以很方便地集成到其他开发工具中。今天就用一个小例子来操练如何结合TWaver和EasyUI进行网页开发。

准备工作

俗话说他山之玉可以直接拿来,EasyUI的小程序我们直接到其网站上拿一个就好啦,我一眼相中了下图这个有布局、有表格的小例子,咱们就来看看怎么通过添加twaver将其变得图表结合内容丰满。

首先下载配置EasyUI相关文件,复制并运行例子源码————噫?怎么结果与网站上并不太一样,表格中的数据没有了!仔细看看可知数据来源于'datagrid_data1.json',就像离开家的小朋友找不到放到柜子里的零食了。解决这个问题还真不是想象的那么简单,仅仅把正确地址给它,或是将文件下载到本地,都无法得到正确结果,据说这是HTML5为了你好我好大家都安全弄成这样子的。其实对于这样的小程序,我们直接将数据存放在程序中就好了,比如将代码$('#tableID').datagrid({data:[json中的对象数据]});添加到<body>的onload()函数中,再运行一下是不是和网站上的效果一模一样呢?

<html><head> <meta charset="UTF-8"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="./jquery-easyui/demo/demo.css"> <script type="text/javascript" src="./jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="./jquery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript">  function init(){      $('#dg').datagrid({    data:[    {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},    //...    ]   });  } </script></head><body onload="init()"> <div ></div> <div >  <div data-options="region:'north'" ></div>  <div data-options="region:'south',split:true" ></div>  <div data-options="region:'east',split:true" title="East" ></div>  <div data-options="region:'west',split:true" title="West" ></div>  <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"  >   <table id ="dg">   <thead>    <tr>     <th data-options="field:'itemid'" width="70">Item ID</th>     <th data-options="field:'productid'" width="90">Product ID</th>     <th data-options="field:'listprice',align:'right'" width="70">List Price</th>     <th data-options="field:'unitcost',align:'right'" width="60">Unit Cost</th>     <th data-options="field:'attr1'" width="135">Attribute</th>     <th data-options="field:'status',align:'center'" width="50">Status</th>    </tr>   </thead>  </table> </div></div></body></html>

好了,接下来就是TWaver的相关准备工作了。先到TWaver下载页面获取TWaver2D系列的HTML5试用产品,将其中的twaver.js文件提取到我们刚才存放源码文件的文件夹下,然后在源码文件的<head>中插入。现在撸撸袖子喝口水,TWaver的正式编程就可以开始了。

搞定div

参照产品网站文档《开发指南 – TWaver HTML5 (2D)》,可以知道图元(Element)、容器(DataBox)和画布(Network)是TWaver的三大要素,只要设好了容器,绑定到画布上,再创建图元扔进容器,一切就OK了!

思路有了,上手开干!先var出box、network、tree三个变量,再function出initNetwork()、initNode()、initTree()三个函数,分别用以设置画布、添加节点、建立树图,最后再将三个函数放入init()中以便得以执行,这样程序框架就搭起来了。

TWaver图形能否在EasyUI中显示出来,关键是network的设置是否正确。其实就是获取到目标位置的div,然后将Network绑定进去。当然只要祭出我们的getElementById()大法,一切便可迎刃而解,我们要做的,只不过是为要使用到的center和west两个div分别添加一个id而已。

当然,还不能高兴的太早,人家div早已安排妥当,你非要进来插个队,还想直接排个最佳位置,不客客气气的打声招呼怎么行?!这个招呼其实也不难打,只要在相应div的style添加代码”position:relative;”就可以了。重要的事情再说一遍:一定在插入TWaver图形的div中添加代码style=”position:relative;”

继续搞定div

创建节点实在是太容易了,只弄个两点一线怎么能过瘾,起码得搞个3层结构吧!我们先创建一个group(就是可以包含子节点的父节点),下面又有两个group,其中一个group下还有两个node。怎么才能把子节点添加到父节点上呢?其实只需一node.setParent(group)语句就搞掂了。最后再为两个node加上连接父节点的link,一个简单的拓扑结构就完成了。

先运行一下试试吧!怎么,又遇到了新问题?是啊,同在center中的TWaver图形和EasyUI表格,会出现重叠的情况。解决这个问题当然可以直接把EasyUI表格挪到south面板中去,但更具普遍意义的做法是再嵌套一个基本布局面板,然后分别将二者添加到其nouth和center中,这样问题就完美解决了。如果说还有不完美,就是network大小有可能没有完全适应所在div。其实我们没有必要费劲调整它的宽高,只需要在network.adjustBounds()中设置{width:centerDiv.clientWidth,height: centerDiv.clientHeight},再看看效果吧!

tree就简单多了,只要像network一样用appendChild()将其添加到相应的div,所有的图元就可以显示出来了!不过tree中最好仅保留group、node等节点,以便更好地展示其逻辑关系,只要添加语句tree.setVisibleFunction(function (element) {return element instanceof twaver.Node; });,这样就可以过滤掉非节点元素了。

至此大功告成!怎么样,是不是非常简单?都已经迫不及待的想试一试了吧 ^_^

最后附上完整源码: 

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>TWaver adhibition jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="./jquery-easyui/demo/demo.css"> <script type="text/javascript" src="./jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="./jquery-easyui/jquery.easyui.min.js"></script> <script src="twaver.js"></script> <script type="text/javascript">  var box = new twaver.ElementBox();  var network = new twaver.vector.Network(box);  var tree = new twaver.controls.Tree(box);  function init(){      initNetwork();   initNode();   initTree();   $('#dg').datagrid({    data:[    {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},    {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},    {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},    {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},    {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},    {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},    {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},    {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}    ],   });  }  function initNetwork(){   var centerDiv = document.getElementById('north2');   var view = network.getView();   centerDiv.appendChild(view);   network.adjustBounds({    x: 0,    y: 0,    width: centerDiv.clientWidth,    height: centerDiv.clientHeight   });  }  function initNode(){   var group = new twaver.Group();   group.setName("Group");   box.add(group);   var group1 = new twaver.Group({    name: 'Group1',    location: {     x: 150,     y: 20    },   });   group1.setParent(group);   box.add(group1);   var group2 = new twaver.Group({    name: 'Group2',    location: {     x: 320,     y: 80    },   });   group2.setParent(group);   box.add(group2);   var node1 = new twaver.Node({    name: 'Node1',    location: {     x: 240,     y: 30    },   });   node1.setParent(group1);   box.add(node1);   var node2 = new twaver.Node({    name: 'Node2',    location: {     x: 80,     y: 50    },   });   node2.setParent(group1);   box.add(node2);   var link1 = new twaver.Link(group1, node1);   link1.setName("Link1");   box.add(link1);   var link2 = new twaver.Link(group1, node2);   link2.setName("Link2");   box.add(link2);  }  function initTree(){   var treeDom = tree.getView();   var westDiv = document.getElementById('west');   treeDom.style.width = "100%";   treeDom.style.height = "100%";   westDiv.appendChild(treeDom);   tree.setVisibleFunction(function (element) {    return element instanceof twaver.Node; });   tree.expandAll();  } </script></head><body onload="init()"> <div >  <div data-options="region:'north'" ></div>  <div data-options="region:'south',split:true" >  </div>  <div data-options="region:'east',split:true" title="East" ></div>  <div data-options="region:'west',split:true" title="West"  id="west"></div>  <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"  id="center" >   <div data-options="fit:true">    <div data-options="region:'north',split:true,border:false"  id="north2"></div>    <div data-options="region:'center',border:false">     <table  id ="dg">      <thead>       <tr>        <th data-options="field:'itemid'" width="70">Item ID</th>        <th data-options="field:'productid'" width="80">Product ID</th>        <th data-options="field:'listprice',align:'right'" width="70">List Price</th>        <th data-options="field:'unitcost',align:'right'" width="60">Unit Cost</th>        <th data-options="field:'attr1'" width="135">Attribute</th>        <th data-options="field:'status',align:'center'" width="50">Status</th>       </tr>      </thead>     </table>    </div>   </div>  </div> </div></body></html>

 带上一堆数据果然显得代码丰富,好有成就感!