TWaver HTML5 + Node.js + express + socket.io + redis（三）

漂亮蓝影

　　原文出处：http://twaver.servasoft.com/?p=3617
　　在上一篇TWaver HTML5 + Node.js + express + socket.io + redis（二）中，您应该对Node.js的web框架express、实时通讯框架Socket.IO、redis客户端：redis有所了解了。这一篇将介绍TWaverHTML5的拓扑和通用组件功能，您将了解到：
　　1. 拓扑组件：twaver.network.Network
2. 树组件： twaver.controls.Tree
3. 属性页： twaver.controls.PropertySheet
4. 表格组件：twaver.controls.Table
5. 布局组件：twaver.controls.SplitPane、BorderPane等

　　一. 实现经典的左树右图效果
首先构造网元容器, 树和拓扑组件
//构造网元容器var box = new twaver.ElementBox();//构造拓扑var network = new twaver.network.Network(box);//构造树var tree = new twaver.controls.Tree(box);　　
再构造SplitPane, 添加树和拓扑组件
function init() {//构造左右分割面板, 左边为树, 右边为拓扑, 树占30%宽度var split = new twaver.controls.SplitPane(tree, network, 'horizontal', 0.3);var view = split.getView();//设置分割面板占满屏幕view.style.position = 'absolute';view.style.left = '0px';view.style.right = '0px';view.style.top = '0px';view.style.bottom = '0px';//添加分割面板document.body.appendChild(view);//窗口变化后, 重画分割面板window.onresize = function () {split.invalidate();}}　　
二. 填充数据
TWaver HTML5和TWaver其他分支一样, 所有组件都体现了MVC思想. 用户使用时, 只需要将业务数据和TWaver的数据模型绑定, 既可以显示数据.
twaver.Data是所有数据模型的基类, 此类的构造函数支持Object类型的参数, Object对象里的属性和twaver.Data的属性一一对应. 所以, 拿到上一篇后台的数据后,
var data = {id: 'from',name: 'From',location: { x: 100, y: 100 }}　　
可以直接这样构造节点对象:
var node = new twaver.Node(data);　　
修改上一篇的onGetData方法, 构造节点和连线
//getData消息处理方法function onGetData(datas) {var i, n, nodes, links, node, link, data, from, to;//添加节点for(i=0, nodes=datas.nodes, n=nodes.length; i<n; i++) {data = nodes;//构造节点node = new twaver.Node(data);//添加节点box.add(node);}//添加连线for(i=0, links=datas.links, n=links.length; i<n; i++) {data = links;//查找from节点from = box.getDataById(data.from);//查找to节点to = box.getDataById(data.to);//构造连线link = new twaver.Link(data.id, from, to);//添加连线box.add(link);}}　　运行效果如下:

　　三. 添加工具条: 缩放拓扑, 添加节点和连线
首先创建工具条:
//创建工具条function createToolbar () {var toolbar = document.createElement('div');//默认交互模式addButton(toolbar, 'Default Interaction', 'images/select.png', function () {network.setDefaultInteractions();});//放大addButton(toolbar, 'Zoom In', 'images/zoomIn.png', function () {network.zoomIn();});//缩小addButton(toolbar, 'Zoom Out', 'images/zoomOut.png', function () {network.zoomOut();});//缩放到全图addButton(toolbar, 'Zoom Overview', 'images/zoomOverview.png', function () {network.zoomOverview();});//还原缩放addButton(toolbar, 'Zoom Reset', 'images/zoomReset.png', function () {network.zoomReset();});//创建节点addButton(toolbar, 'Create Node', 'images/node_icon.png', function () {network.setCreateElementInteractions();});//创建连线addButton(toolbar, 'Create Link', 'images/link_icon.png', function () {network.setCreateLinkInteractions();});return toolbar;}　　
然后将工具条和拓扑放入BorderPane
//创建工具条var toolbar = createToolbar();//创建拓扑面板var networkPane = new twaver.controls.BorderPane(network, toolbar);//设置拓扑面板上方组件高度为20networkPane.setTopHeight(20);//构造左右分割面板, 左边为树, 右边为拓扑, 树占30%宽度var split = new twaver.controls.SplitPane(tree, networkPane, 'horizontal', 0.3);　　
添加按钮代码如下:
//添加按钮function addButton (div, name, src, callback) {var button = document.createElement('input');button.setAttribute('type', src ? 'image' : 'button');button.setAttribute('title', name);if (src) {button.style.padding = '4px 4px 4px 4px';button.setAttribute('src', src);} else {button.value = name;}button.onclick = callback;div.appendChild(button);return button;}　　
效果如下:

　　四. 添加表格
首先创建表格
//构造表格var table = new twaver.controls.Table(box);　　
然后初始化表格的列
//初始化表格列function initTable () {table.setEditable(true);//网元名称createColumn(table, 'Name', 'name', 'accessor', 'string', true);//网元位置var column = createColumn(table, 'Location', 'location', 'accessor', 'string', false);column.getValue = function (data) {if (data.getLocation) {var location = data.getLocation();return 'X:' + Math.round(location.x) + ', Y:' + Math.round(location.y);}return '';};//网元宽度column = createColumn(table, 'Width', 'width', 'accessor', 'number', true);column.getValue = function (data) {if (data.getWidth) {return Math.round(data.getWidth());}return '';};column.setWidth(50);//网元高度column = createColumn(table, 'Height', 'height', 'accessor', 'number', true);column.getValue = function (data) {if (data.getHeight) {return Math.round(data.getHeight());}return '';};column.setWidth(50);//连线起始节点column = createColumn(table, 'From', 'from', 'accessor', 'string', false);column.getValue = function (data) {if (data.getFromNode) {return data.getFromNode().getName();}return '';};//连线结束节点column = createColumn(table, 'To', 'to', 'accessor', 'string', false);column.getValue = function (data) {if (data.getToNode) {return data.getToNode().getName();}return '';};}　　
添加表格:
//初始化表格列initTable();//构造表格面板var tablePane = new twaver.controls.TablePane(table);//中间分割面板, 包含拓扑面板和表格面板var centerSplite = new twaver.controls.SplitPane(networkPane, tablePane, 'vertical', 0.7);//构造左右分割面板, 左边为树, 右边为拓扑, 树占30%宽度var split = new twaver.controls.SplitPane(tree, centerSplite, 'horizontal', 0.3);　　
创建表格列代码如下:
//创建表格列function createColumn (table, name, propertyName, propertyType, valueType, editable) {var column = new twaver.Column(name);column.setName(name);column.setPropertyName(propertyName);column.setPropertyType(propertyType);if (valueType) column.setValueType(valueType);column.setEditable(editable);column.renderHeader = function (div) {var span = document.createElement('span');span.style.whiteSpace = 'nowrap';span.style.verticalAlign = 'middle';span.style.padding = '1px 2px 1px 2px';span.innerHTML = column.getName() ? column.getName() : column.getPropertyName();span.setAttribute('title', span.innerHTML);span.style.font = 'bold 12px Helvetica';div.style.textAlign = 'center';div.appendChild(span);};table.getColumnBox().add(column);return column;};　　
最后效果如下:

　　五. 添加属性页
首先创建属性页
//构造属性页var sheet = new twaver.controls.PropertySheet(box);　　
然后初始化属性页的属性
//初始化属性页function initPropertySheet () {sheet.setEditable(true);var sheetBox = sheet.getPropertyBox();//网元标识addProperty(sheetBox, 'id', 'Id', 'string', 'accessor', false);//网元名称addProperty(sheetBox, 'name', 'Name', 'string', 'accessor', true);//网元提示信息addProperty(sheetBox, 'toolTip', 'ToolTip', 'string', 'accessor', true);//仅节点可见var isNodeVisible = function (data) {return data instanceof twaver.Node;};//网元x坐标addProperty(sheetBox, 'x', 'X', 'number', 'accessor', true, isNodeVisible);//网元y坐标addProperty(sheetBox, 'y', 'Y', 'number', 'accessor', true, isNodeVisible);//网元宽度addProperty(sheetBox, 'width', 'Width', 'number', 'accessor', true, isNodeVisible);//网元高度addProperty(sheetBox, 'height', 'Height', 'number', 'accessor', true, isNodeVisible);//仅连线可见var isLinkVisible = function (data) {return data instanceof twaver.Link;};//网元x坐标addProperty(sheetBox, 'fromNode', 'From Node', 'string', 'accessor', false, isLinkVisible);//网元y坐标addProperty(sheetBox, 'toNode', 'To Node', 'string', 'accessor', false, isLinkVisible);}　　最后添加属性页
//初始化属性页initPropertySheet();//左分割面板, 包含树和属性页var leftSplite = new twaver.controls.SplitPane(tree, sheet, 'vertical', 0.7);//构造左右分割面板, 左边为树, 右边为拓扑, 树占30%宽度var split = new twaver.controls.SplitPane(leftSplite, centerSplite, 'horizontal', 0.3);　　
创建属性页属性的代码如下:
//添加属性页属性function addProperty (box, propertyName, name, valueType, propertyType, editable, isVisible) {var property = new twaver.Property();property.setEditable(editable);property.setPropertyType(propertyType);property.setPropertyName(propertyName);property.setName(name);property.setValueType(valueType);property.isVisible = isVisible;box.add(property);return property;}　　
最后效果如下:

　　本文完整代码见附件TWaver HTML5 Demo(附件只包含demo代码, 如需要TWaver HTML5产品包, 请参见论坛TWaverHTML5版本即将发布，敬请期待)