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

nainai1

　　在上一篇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