利用Flex组件birdeye绘制拓扑关系图

原文:利用Flex组件birdeye绘制拓扑关系图birdeye绘制拓扑关系图

1.flex简单介绍

　　Flex 是一个高效、免费的开源框架，可用于构建具有表现力的 Web应用程序，这些应用程序利用Adobe Flash Player和Adobe AIR, 可以实现跨浏览器、桌面和操作系统。虽然只能使用 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类

<mx:WebService id="ws1" wsdl="http://localhost:5000/FlexService.asmx?wsdl" result="onResult(event)">
<mx:operation name="getChildNodeXMLByID">
</mx:operation>
<mx:operation name="getXml">
</mx:operation>
<mx:operation name="getNodeXMLByFTID">
<mx:request>
<name>1</name>
</mx:request>
</mx:operation>
</mx: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组件，主要是显示所有人员关系类型。代码如下：

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400" height="300" close="titlewindow1_closeHandler(event)" title="人员关系选择">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;

protected function titlewindow1_closeHandler(event:CloseEvent):void
{
// TODO Auto-generated method stub
PopUpManager.removePopUp(this);
}
protected function all_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
if(all.selected)
{
tz.selected=true;
tx.selected=true;
thk.selected=true;
t1.selected=true;
t2.selected=true;
t3.selected=true;
t4.selected=true;
t5.selected=true;
t6.selected=true;
}
else
{
tz.selected=false;
tx.selected=false;
thk.selected=false;
t1.selected=false;
t2.selected=false;
t3.selected=false;
t4.selected=false;
t5.selected=false;
t6.selected=false;
}
}

public var nodeid:String="";

protected function save():void
{
// TODO Auto-generated method stub
var b:Birdeye =new Birdeye();

var result:String="";
if(tz.selected)
{
result="选中了同住";
}

if(tx.selected)
{
if(result!="")
{
result+=";";
}
result+="选中了同乡";
}

if(thk.selected)
{
if(result!="")
{
result+=";";
}
result+="选中了同户口";
}
//b.ws1.getOperation("getChildNodeXMLByID").send(nodeid);
b.reflash(result,nodeid);

PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.img{

}
</fx:Style>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>

<s:VGroup top="5" width="100%" horizontalAlign="center" verticalAlign="middle">
<s:HGroup width="100%" horizontalAlign="center">

<s:VGroup width="33%" horizontalAlign="center">
<s:Image source="@Embed('assets/imgs/x1.png')" styleName="img"/><mx:CheckBox label="同住" id="tz"></mx:CheckBox>
</s:VGroup>
<s:VGroup width="34%" horizontalAlign="center">
<s:Image source="@Embed('assets/imgs/x2.png')" styleName="img"/><mx:CheckBox label="同乡" id="tx"></mx:CheckBox>
</s:VGroup>
<s:VGroup width="33%" horizontalAlign="center">
<s:Image source="@Embed('assets/imgs/x3.png')" styleName="img"/><mx:CheckBox label="同户口" id="thk"></mx:CheckBox>
</s:VGroup>
</s:HGroup>
<s:HGroup width="100%">
<s:VGroup width="33%" horizontalAlign="center">
<s:Image source="@Embed('assets/imgs/x4.png')" styleName="img"/><mx:CheckBox label="同住宿" id="t1"></mx:CheckBox>
</s:VGroup>
<s:VGroup width="34%" horizontalAlign="center">
<s:Image source="@Embed('assets/imgs/x5.png')" styleName="img"/><mx:CheckBox label="同车" id="t2"></mx:CheckBox>
</s:VGroup>
<s:VGroup width="33%" horizontalAlign="center">
<s:Image source="@Embed('assets/imgs/x6.png')" styleName="img"/><mx:CheckBox label="同学" id="t3"></mx:CheckBox>
</s:VGroup>
</s:HGroup>
<s:HGroup width="100%">
<s:VGroup width="33%" horizontalAlign="center">
<s:Image source="@Embed('assets/imgs/x7.png')" styleName="img"/><mx:CheckBox label="朋友" id="t4"></mx:CheckBox>
</s:VGroup>
<s:VGroup width="34%" horizontalAlign="center">
<s:Image source="@Embed('assets/imgs/x8.png')" styleName="img"/><mx:CheckBox label="同事" id="t5"></mx:CheckBox>
</s:VGroup>
<s:VGroup width="33%" horizontalAlign="center">
<s:Image source="@Embed('assets/imgs/x8.png')" styleName="img"/><mx:CheckBox label="同村" id="t6"></mx:CheckBox>
</s:VGroup>
</s:HGroup>
<s:HGroup width="100%" paddingTop="5" horizontalAlign="center">
<s:HGroup horizontalAlign="left">
<mx:CheckBox id="all" label="全选" click="all_clickHandler(event)"
horizontalCenter="left"></mx:CheckBox>
</s:HGroup>
<s:HGroup horizontalAlign="center">
<s:Button label="确定" click="save()">
</s:Button>
</s:HGroup>
</s:HGroup>
</s:VGroup>
</s:TitleWindow>

5.总结

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