TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

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


一. 实现经典的左树右图效果 首先构造网元容器, 树和拓扑组件

1 //构造网元容器
2 var box = new twaver.ElementBox();
3 //构造拓扑
4 var network = new twaver.network.Network(box);
5 //构造树
6 var tree = new twaver.controls.Tree(box);

 再构造SplitPane, 添加树和拓扑组件 

 1 function init() {
 2     //构造左右分割面板, 左边为树, 右边为拓扑, 树占30%宽度
 3     var split = new twaver.controls.SplitPane(tree, network, 'horizontal', 0.3);
 4     var view = split.getView();
 5     //设置分割面板占满屏幕
 6     view.style.position = 'absolute';
 7     view.style.left = '0px';
 8     view.style.right = '0px';
 9     view.style.top = '0px';
10     view.style.bottom = '0px';
11     //添加分割面板
12     document.body.appendChild(view);
13     //窗口变化后, 重画分割面板
14     window.onresize = function () {
15         split.invalidate();
16     }
17 }

二. 填充数据 TWaver HTML5和TWaver其他分支一样, 所有组件都体现了MVC思想. 用户使用时, 只需要将业务数据和TWaver的数据模型绑定, 既可以显示数据.

twaver.Data是所有数据模型的基类, 此类的构造函数支持Object类型的参数, Object对象里的属性和twaver.Data的属性一一对应. 所以, 拿到上一篇后台的数据后, 

1 var data = {
2     id: 'from',
3     name: 'From',
4     location: { x: 100, y: 100 }
5 }

 

可以直接这样构造节点对象: 

1     var node = new twaver.Node(data);

 

修改上一篇的onGetData方法, 构造节点和连线 

 1 //getData消息处理方法
 2 function onGetData(datas) {
 3     var i, n, nodes, links, node, link, data, from, to;
 4     //添加节点
 5     for(i=0, nodes=datas.nodes, n=nodes.length; i<n; i++) {
 6         data = nodes[i];
 7         //构造节点
 8         node = new twaver.Node(data);
 9         //添加节点
10         box.add(node);
11     }
12     //添加连线
13     for(i=0, links=datas.links, n=links.length; i<n; i++) {
14         data = links[i];
15         //查找from节点
16         from = box.getDataById(data.from);
17         //查找to节点
18         to = box.getDataById(data.to);
19         //构造连线
20         link = new twaver.Link(data.id, from, to);
21         //添加连线
22         box.add(link);
23     }
24 }
运行效果如下:

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

四. 添加表格
首先创建表格
1 //构造表格
2 var table = new twaver.controls.Table(box);
然后初始化表格的列
 1 //初始化表格列
 2 function initTable () {
 3     table.setEditable(true);
 4     //网元名称
 5     createColumn(table, 'Name', 'name', 'accessor', 'string', true);
 6     //网元位置
 7     var column = createColumn(table, 'Location', 'location', 'accessor', 'string', false);
 8     column.getValue = function (data) {
 9         if (data.getLocation) {
10             var location = data.getLocation();
11             return 'X:' + Math.round(location.x) + ', Y:' + Math.round(location.y);
12         }
13         return '';
14     };
15     //网元宽度
16     column = createColumn(table, 'Width', 'width', 'accessor', 'number', true);
17     column.getValue = function (data) {
18         if (data.getWidth) {
19             return Math.round(data.getWidth());
20         }
21         return '';
22     };
23     column.setWidth(50);
24     //网元高度
25     column = createColumn(table, 'Height', 'height', 'accessor', 'number', true);
26     column.getValue = function (data) {
27         if (data.getHeight) {
28             return Math.round(data.getHeight());
29         }
30         return '';
31     };
32     column.setWidth(50);
33     //连线起始节点
34     column = createColumn(table, 'From', 'from', 'accessor', 'string', false);
35     column.getValue = function (data) {
36         if (data.getFromNode) {
37             return data.getFromNode().getName();
38         }
39         return '';
40     };
41     //连线结束节点
42     column = createColumn(table, 'To', 'to', 'accessor', 'string', false);
43     column.getValue = function (data) {
44         if (data.getToNode) {
45             return data.getToNode().getName();
46         }
47         return '';
48     };
49 }
添加表格:
1     //初始化表格列
2     initTable();
3     //构造表格面板
4     var tablePane = new twaver.controls.TablePane(table);
5     //中间分割面板, 包含拓扑面板和表格面板
6     var centerSplite = new twaver.controls.SplitPane(networkPane, tablePane, 'vertical', 0.7);
7     //构造左右分割面板, 左边为树, 右边为拓扑, 树占30%宽度
8     var split = new twaver.controls.SplitPane(tree, centerSplite, 'horizontal', 0.3);
创建表格列代码如下:
 1 //创建表格列
 2 function createColumn (table, name, propertyName, propertyType, valueType, editable) {
 3     var column = new twaver.Column(name);
 4     column.setName(name);
 5     column.setPropertyName(propertyName);
 6     column.setPropertyType(propertyType);
 7     if (valueType) column.setValueType(valueType);
 8     column.setEditable(editable);
 9     column.renderHeader = function (div) {
10         var span = document.createElement('span');
11         span.style.whiteSpace = 'nowrap';
12         span.style.verticalAlign = 'middle';
13         span.style.padding = '1px 2px 1px 2px';
14         span.innerHTML = column.getName() ? column.getName() : column.getPropertyName();
15         span.setAttribute('title', span.innerHTML);
16         span.style.font = 'bold 12px Helvetica';
17         div.style.textAlign = 'center';
18         div.appendChild(span);
19     };
20     table.getColumnBox().add(column);
21     return column;
22 };
最后效果如下:

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


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

评论

# re: 拓扑和通用组件功能  回复  更多评论   

2012-02-17 17:39 by 电脑K歌
代码真是好功底

只有注册用户登录后才能发表评论。


网站导航: