利用Flex组件birdeye绘制拓扑关系图-白红宇

原文:

birdeye绘制拓扑关系图

1.flex简单介绍

　　Flex 是一个高效、免费的开源框架，可用于构建具有表现力的 Web应用程序，这些应用程序利用和, 可以实现跨浏览器、桌面和操作系统。虽然只能使用 Flex 框架构建 Flex，但Adobe Flash Builder™（之前称为 Adobe Flex Builder™）软件可以通过智能编码、交互式遍历调试以及可视设计布局等功能加快开发。

　　另外，FLEX的另一个组件Springgraph也可以做关系图，刚开始做项目的时候选择的就是这个，后来感觉SPRINGGRAPH的示例没有Birdeye详细，就依然抛弃掉了，不过在这里为大家提供一些帮助信息

　　http://www.chaosreigns.com/code/springgraph/

2.birdeye简单介绍

　　BirdEye是一个开源的Adobe Flex图表制作组件。用于创建多维数据分析可视化界面。birdeye 可以绘制拓扑图，关系图，流程图，星空图，地图，饼图等等..

　　birdeye官网的源码现在如果不FQ已经无法下载了，不过网上可以搜到非官网的源码以及一官网demo

3.birdeye应用于项目实战

　　使用birdeye绘制出一个人员关系图，完成后的效果如下

初始化加载的时候，将某一人员的下一级全部展示出来，点击某一个人员选择人员关系，再将所有人员返回展示

4.一步步实现birdeye人员关系图

　　1.借助官方demo的Level4示例

　　官方展示出的图如下

　　1>首先修改渲染的样式，代码如下：

vgraph.edgeRenderer = new DirectedBalloonEdgeRenderer(vgraph.edgeDrawGraphics);//将这句改为vgraph.itemRenderer=new ClassFactory(DefaultNodeRenderer);

　　2>修改图形图标

　　修改图标需要修改birdeye的源码，把下载好的源码导入项目，打开EmdeddedIcons.as这个类，添加图片绑定

[Bindable][Embed(source="nodes/99.png")]static public var treeIcon:Class;

　　接着在generateImage方法中添加如下代码：

case "tree":img.source = EmbeddedIcons.treeIcon;

操作完成之后，在数据源里边即可使用新添加的图标

　　3>初始化加载数据

　　我在做测试的时候使用的是WebService，接口编写这里不再赘述，直接使用

　　先添加WebService类

　　简单介绍一下，wsdl是接口地址，result是一回调函数，执行获取数据之后的操作，operation是接口中的方法，request是参数

　　完成之后，接下来完成AS代码

　　在creationComplete里边，初始化数据

//初始化加载 数据                ws1.getOperation("getChildNodeXMLByID").send(1);

　　这里的初始化数据，只是去调用webservice，却并未能对返回的数据进行展示

　　还需要再对Webservice的回调函数中，进行如下操作：

//webservice返回数据之后的处理internal function onResult(evt:ResultEvent):void{    try    {    /* init a graph object with the XML data */                graph = new org.un.cava.birdeye.ravis.graphLayout.data.Graph("XMLAsDocsGraph",false,new XML(evt.result));   /* set the graph in the VGraph object, this automatically* initializes the VGraph items; * note: vgraph is the id of the mxml specified VisualGraph component */vgraph.graph = graph; /* set the default layouter type */layouter = new ConcentricRadialLayouter(vgraph);vgraph.layouter = layouter;/* set autofit */layouter.autoFitEnabled = true;/* set the layouter *///    vgraph.edgeRenderer =new DefaultEdgeRenderer;vgraph.itemRenderer=new ClassFactory(DefaultNodeRenderer);/* set the layouter *///vgraph.edgeRenderer = new DirectedBalloonEdgeRenderer(vgraph.edgeDrawGraphics);/* set the visibility limit options, default 2 * a.k.a degrees of separation */vgraph.maxVisibleDistance = 2;/* select a root node, most layouters requires a root node* Note: Id 1 is referring to node id in the XML file */startRoot = graph.nodeByStringId("1").vnode;/* set if edge labels should be displayed */vgraph.displayEdgeLabels = true;/* the following kicks it off .... */vgraph.currentRootVNode = startRoot;initDone = true;vgraph.draw();     }catch(e:Error)    {        Alert.show("没有下个节点!");    }}

　　至此，如果没有意外，关系图应该可以绘制出来了。

　　4>添加右键菜单

　　选中节点之后，弹出一个对话窗口，选择人员关系，绘制图形

　　数据初始化完成之后，执行如下AS代码

private function showContextMenu():void{                  var myContextMenu:ContextMenu=new ContextMenu();                  var GoUrl1:ContextMenuItem=new ContextMenuItem("人员关系");                  GoUrl1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,rightContextMenu);                  var GoUrl2:ContextMenuItem=new ContextMenuItem("人档查询");                  GoUrl2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,rightContextMenu);                  var GoUrl3:ContextMenuItem=new ContextMenuItem("删除节点");                  GoUrl3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,rightContextMenu);                  var GoUrl4:ContextMenuItem=new ContextMenuItem("删除子节点");                  GoUrl4.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,rightContextMenu);                  myContextMenu.customItems.push(GoUrl1);                  myContextMenu.customItems.push(GoUrl2);                  myContextMenu.customItems.push(GoUrl3);                  myContextMenu.customItems.push(GoUrl4);                  myContextMenu.hideBuiltInItems();                  vgraph.contextMenu=myContextMenu;                                //this.contextMenu=myContextMenu;              }                          private function rightContextMenu(event:ContextMenuEvent):void              {                if(event.mouseTarget["className"]=="DefaultNodeRenderer")                {                    var sid:String=event.mouseTarget["data"].node.stringid;                     if(event.currentTarget.caption=="人员关系"){                          //弹出选择窗口                        var ww:MyWindow;                        ww = MyWindow(PopUpManager.createPopUp(this.parent,MyWindow));                         ww.nodeid=sid;                        PopUpManager.centerPopUp(ww);                                                    GraphRefush.dis.addEventListener(GraphRefush.EVENT_REFUSH,onfefush);                                                                    //ws1.getOperation("getChildNodeXMLByID").send(sid);                                            }else if(event.currentTarget.caption=="人档查询"){                        ExternalInterface.call("rygxList","");                    }else if(event.currentTarget.caption=="删除节点"){                          Alert.show("确定要删除当前节点吗?");                      }else{                          Alert.show("确定要删除当前节点的所有子节点吗?");                      }                }                else                {                    Alert.show("请选中节点","提示信息");                }            }

　　代码说明:

showContextMenu()方法的功能，主要是创建右键时的弹出菜单

rightContextMenu（）方法的功能，主要是根据点击执行不同的操作。

rightContextMenu（）方法里边有一个。MyWindow，该类是自定义的一MXML组件，主要是显示所有人员关系类型。代码如下：


         
                  
          
      
               @namespace s "library://ns.adobe.com/flex/spark";        @namespace mx "library://ns.adobe.com/flex/mx";                .img{                    }

5.总结

　　据上所述，需求功能基本上都已实现。里边有很多细节没有仔细去介绍，比如birdeye的节点单击事件，双击事件，右键时的事件操作，以及节点之间的关系，属性展示等，这些在官网的DEMO里边都有详细的说明。