原文出處： http://twaver.servasoft.com/?p=3617

在上一篇 TWaver HTML5 + Node.js + express + socket.io + redis（二） 中，您應該對 Node.js 的web框架 express 、實時通訊框架 Socket.IO 、redis客戶端： redis 有所了解了。這一篇將介紹 TWaver HTML5 的拓撲和通用組件功能，您將了解到：

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[i]; //構造節點 node = new twaver.Node(data); //添加節點 box.add(node); } //添加連線 for(i=0, links=datas.links, n=links.length; i<n; i++) { data = links[i]; //查找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); //設置拓撲面板上方組件高度為20 networkPane.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產品包, 請參見論壇 TWaver HTML5版本即將發布，敬請期待 )

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