在上一篇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);
[/sourcecode]
添加按鈕代碼如下:
[sourcecode language="javascript"]
//添加按鈕
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;
}
添加按鈕代碼如下:
//添加按鈕
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;
}
