View unanswered posts | View active topics It is currently 2018-12-15 0:54



This topic is locked, you cannot edit posts or make further replies.  [ 4 posts ] 
 Twaver是否有提供Group展开后的事件 
Author Message
新手上路

Joined: 2014-09-17 11:12
Posts: 13
Post Twaver是否有提供Group展开后的事件
我项目的拓扑图有Group节点,采用自动布局后,页面出现滚动条,然后手动点击“zoomOverview”按钮后才可以完整显示拓扑图,我想通过程序在全部节点布局完成后调用 network.zoomOverview() 方法,让页面显示适合的,避免出现滚动条。

查看API发现 autoLayouter.doLayout 方法第三个参数提供了一个布局完成的事件,但是这个事件先于 Group.expanded,也就是在Group展开之前就触发了布局完成的事件,查阅了Group类的API,没有发现有 Group.expanded之后的事件,请指导?


2016-08-25 11:43
Profile
TWaver开发组
User avatar

Joined: 2014-02-11 8:59
Posts: 575
Post Re: Twaver是否有提供Group展开后的事件
参考文档:
http://doc.servasoft.com/twaver-document-center/twaver-flex-guide/network-components/#Network-6


2016-08-26 14:45
Profile
新手上路

Joined: 2014-09-17 11:12
Posts: 13
Post Re: Twaver是否有提供Group展开后的事件
你好!感谢你的回复,我参考你提供的文档,使用了Network InteractionEvent.EXPAND_GROU交互事件,该事件是UI交互事件,即需要手动点击Group节点展开后触发,而在Group#expanded = true时,自动布局Group展开后不会触发该事件。
Twaver是否有有Group#expanded = true,自动布局完成并且Group expand之后的事件?

我的需求是:拓扑设备需要显示端口,拓扑连线与端口相连,我实现方式是设备用Node表示,端口用Follower表示,并设置宿主关系,端口的host设置为设备节点,这种实现方式如果采用自动布局,端口节点依附到设备节点的位置不可控制,变成两个独立节点。
为了解决此问题,我想在自动布局完成后,将端口的位置设置到设备边缘的位置上,由于一部分设备在Group内部,无法获取到Group自动展开后的事件,而自动布局完成后的事件要先于“Group自动展开”触发。但是我找不到Group自动展开后的事件。
针对我这个需求,是否有比较好的解决方案?

换个说法:带Group自动展开的拓扑,自动布局后是否可以重新调整Follower节点的位置?
附代码
Code:
/**
* 初始化CMTS上行交换机路由拓扑图
*/
private function initCMTSSwitchRouteTopo(points, lines):void{
   box.clear();
   
   if(!points || points.length <= 0){
      Alert.show("当前选择的CMTS设备无拓扑数据!");
      return;
   }
   
   var portList:Array = [];//端口列表
   //1、创建拓扑节点
   var switchGroup:Group = new Group("group");
   switchGroup.expanded = true;
   switchGroup.setStyle(Styles.OUTER_SHAPE, Consts.SHAPE_OVAL);
   switchGroup.setStyle(Styles.GROUP_SHAPE, Consts.SHAPE_OVAL);
   switchGroup.setStyle(Styles.GROUP_GRADIENT, Consts.GRADIENT_RADIAL_NORTHEAST);
   switchGroup.setStyle(Styles.GROUP_FILL_ALPHA, 1);
   switchGroup.setStyle(Styles.GROUP_PADDING, 10);
   switchGroup.setStyle(Styles.CONTENT_TYPE, Consts.CONTENT_TYPE_VECTOR);
   switchGroup.setStyle(Styles.VECTOR_SHAPE, Consts.SHAPE_OVAL);
   switchGroup.setStyle(Styles.VECTOR_GRADIENT, Consts.GRADIENT_RADIAL_NORTHEAST);
   
   for each(var point in points){
      var meTypeId = point["meTypeId"];
      var meId = point["meId"];
      var meName = point["meName"];
      var portId = point["portId"];
      var portName = point["portName"];
      
      var node:Node = new Node();
      node.setClient("nodeType", "me");
      node.setClient("meTypeId",meTypeId);
      node.setClient("meId",meId);
      node.setClient("portId",portId);
      node.name = meName;
      node.toolTip = meName;
      
      if(meTypeId == 1){
         node.image = "cmts";
      }else if(meTypeId = 4){
         node.image = "switchImage";
         switchGroup.addChild(node);
      }
      
      box.add(node);
      
      //创建端口 如果采用自动布局,很难控制端口与宿主的相对位置,暂时屏蔽;如果需要显示端口,可能只有自己写算法控制布局。
      if(portId && portId > 0 && portName && portName.length > 0){
         var tpNode:Follower = new Follower();
         tpNode.setClient("nodeType", "tp");
         tpNode.setClient("portId",portId);
         tpNode.name = portName;
         tpNode.toolTip = portName;
         tpNode.image = "chassis4";
         tpNode.host = node;
         box.add(tpNode);
      }
      
      var alarm:Alarm = new Alarm(null, node.id, Utils.randomSeverity());
      box.alarmBox.add(alarm);
   }   
   
   
   box.add(switchGroup);
   
   //2、创建拓扑连线
   var pointFilder:QuickFinder =new QuickFinder(box,"meId", twaver.Consts.PROPERTY_TYPE_CLIENT);
   for each(var line in lines){
      var aMeName = line["aMeName"];
       var aTpName = line["aPortName"];
      var zMeName = line["zMeName"];
      var zTpName = line["zPortName"];
      
      var aNode:Node = Node(pointFilder.findFirst(line["aMeId"]));
      var zNode:Node = Node(pointFilder.findFirst(line["zMeId"]));
      
      
      
      
      var link:Link = new Link(aNode, zNode);
      var linkName = "";
      if(aTpName && aTpName.length > 0){
         linkName += (aMeName + ":" + aTpName);
      }
      if(zTpName && zTpName.length > 0){
         linkName += (zMeName + ":" + zTpName);
      }
      link.name =   linkName
      box.add(link);
   }
   
   var pointFilder:QuickFinder =new QuickFinder(box,"nodeType", twaver.Consts.PROPERTY_TYPE_CLIENT);
   var ports:Array = pointFilder.find("tp");
   
   

   //3、自动布局
   var autoLayouter:AutoLayouter = new AutoLayouter(network);
   autoLayouter.animate = true;
   autoLayouter.doLayout(Consts.LAYOUT_SYMMETRY, function():void{
      //network.zoomReset();
      Alert.show("ceshi", "title");
      //debug("xxx拓扑布局完成!");
   });   
   //Consts.LAYOUT_BOTTOMTO
}


2016-08-27 19:18
Profile
TWaver开发组
User avatar

Joined: 2014-02-11 8:59
Posts: 575
Post Re: Twaver是否有提供Group展开后的事件
可以使用DataBox.addDataPropertyChangeListener()监听网元的属性变化事件


2016-08-29 9:43
Profile
Display posts from previous:  Sort by  
This topic is locked, you cannot edit posts or make further replies.   [ 4 posts ] 

Who is online

Users browsing this forum: No registered users and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron