TWaver - 专注UI技术

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

解析JSON数据生成TWaver中的网元

Posted on 2014-10-13 09:35 TWaver 阅读(5984) 评论(2)  编辑  收藏

应客户需求写个Demo,Demo中包含一些常用的功能,包括解析JSON数据生成TWaver中的网元和连线,网元右下角带上不同标识的小图标,连线需要是二次曲线,弹出菜单和信息板,跟大家分享下。先上图让大家看看效果(大家在学习的同时,能否发现这次Demo有所不同)

解析JSON数据生成TWaver中的网元和连线
下面是Demo中用到的JSON数据格式样例

1var topo_data = [
2    {"element""node""name""网关""id""gateway1""image""group","icon""icon_wall"},
3    {"element""node""name""网关""id""gateway2""image":"subnetwork""icon""icon_wall"},
4    {"element""link""from""cloud""to""center1""name":"包含关系"},
5    {"element""link""from""gather2""to""firewall""arrow""11"
6];

根据element判断创建何种对象,是网元还是连线;image设置网元图片的名称(这些图片都是事先需要注册,如果使用TWaver内置的图片,则不需要,直接使用TWaver的图片注册名称即可,例如twaver.Defaults.IMAGE_GROUP),icon设置网元上的标识,arrow设置连线的箭头方向,下面上代码

1function createElement(item){
2    var element;
3    if(item.element == 'link'){
4        var from = this.box.getDataById(item.from);
5        var to = this.box.getDataById(item.to);
6        var link = new MyLink(from, to);
7        if(item.arrow){
8            if(item.arrow=="10" || item.arrow=="11") link.setStyle('arrow.from'true);
9            if(item.arrow=="01" || item.arrow=="11") link.setStyle('arrow.to'true);
10        }              
11        this.box.add(link);
12        element=link;
13    }
14    if(item.element =='node'){
15        var node = new twaver.Node(item.id);
16        if(item.image){
17            node.setImage(item.image);
18            if(item.image=='group') node.setImage(twaver.Defaults.IMAGE_GROUP);
19            if(item.image=='subnetwork') node.setImage(twaver.Defaults.IMAGE_SUBNETWORK);
20        }              
21        if(item.icon){
22            node.setStyle('icons.names', [item.icon]);
23            node.setStyle('icons.position''bottomright.topleft');
24        }               
25        node.setStyle('shadow.blur',10);
26        node.setStyle('shadow.xoffset',5);
27        node.setStyle('shadow.yoffset',5);
28        this.box.add(node);
29        element=node;
30    }
31 
32    if(element){
33        element.setStyle('label.font''11px "Microsoft Yahei"');
34        element.setName(item.name);
35    }
36}

网元右下角带上不同标识的小图标
在TWaver里这个非常简单,使用网元自带的IconAttachment就能实现,在上面的代码中,处理icon部分有用到,icon的names可以是一个数组,同时放多个图标;还可以设置图标的X或Y轴上Y的偏移量,更多属性可以参考TWaver文档

1node.setStyle('icons.names', [item.icon]);
2node.setStyle('icons.position''bottomright.topleft');

来个大图欣赏欣赏

连线需要是二次曲线
这个需要重写LinkUI,只需要重写getLinkPoints的方法就可以。默认此方法返回是的是from和to两个点,如果需要二次曲线,那就需要一共3个点,这里计算from和to的中心点,并做了一个偏移,方法最后返回的是一个list,第一个元素是from点,第二个元素是包含中间点和to点的list,如果需要连线是贝塞尔曲线第二个元素应是包含3个元素的list,TWaver内部做了个识别

1getLinkPoints: function () {
2    MyLinkUI.superClass.getLinkPoints.call(this);
3 
4    var f = this.getFromPoint();
5    var t = this.getToPoint();
6 
7    var points = new twaver.List();
8    points.add(f);
9    points.add(t);
10 
11    this._lineLength = _twaver.math.calculateLineLength(points);
12    var offset = this._lineLength/10;
13    var m = {
14        x: (f.x+t.x)/2 + offset,
15        y: (f.y+t.y)/2 + offset,
16    }
17    var cps = new twaver.List();
18    cps.add(m);
19    cps.add(t);
20 
21    points.removeAt(1);
22    points.add(cps);
23    this._linkPoints = points;
24 
25    return this._linkPoints;
26}

弹出菜单和信息板
弹出菜单使用TWaver的PopupMenu机制,轻松搞定,直接上代码

1var popupMenu = new twaver.controls.PopupMenu(network);
2popupMenu.setMenuItems([
3    { label: '添加设备'},
4    { label: '删除设备'},
5    { separator: true},
6    { label: '详细信息...'},
7]);
8popupMenu.onMenuItemRendered = function (div, menuItem) {
9    div.childNodes[1].style['font-family']="'Microsoft Yahei', 'Open Sans',sans-serif";
10    div.childNodes[1].style['font-size']='12px';
11};


信息板并不需要TWaver的机制,只需要监听network的事件,控制DOM就可以实现。可以每次生成一个div显示,也缓存一个div,通过CSS控制它的display属性,根据具体需求所定。这里缓存了一个div,根据点击的网元不同,修改div上的标题和图标

1this.network.addInteractionListener(function(e){
2if(e.kind == 'clickElement' && e.element && e.element.getClassName() =='twaver.Node' && e.element.getName()){
3    var titleImg = document.getElementById('titleImg');
4    var ei = twaver.Util.getImageAsset(e.element.getImage())._cache;
5    titleImg.src = ei.toDataURL();
6 
7    var titleTxt = document.getElementById('titleTxt');
8    var txt = '';
9    if(e.element.getName()){
10        txt = e.element.getName();
11    }
12    titleTxt.innerHTML = txt;
13    var s = dialog.style;
14    s.display = 'block';
15    s.left = e.event.x+'px';
16    s.top = e.event.y+'px';
17else {
18    dialog.style.display = 'none';
19}
20});


开头括弧中问题,大家肯定已经明白,指的是网元的图标发生了,是不是比以往更加漂亮了,感谢大家的支持。


评论

# re: 解析JSON数据生成TWaver中的网元  回复  更多评论   

2014-10-15 14:45 by 德星模具
有图就看得明白了

# re: 解析JSON数据生成TWaver中的网元  回复  更多评论   

2014-10-21 01:04 by 网上购物
文章不错谢谢分享

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


网站导航: