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

栏目: 编程工具 · 发布时间: 6年前

内容简介：利用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绘制出一个人员关系图，完成后的效果如下

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

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

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

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

1.借助官方demo的Level4示例

官方展示出的图如下 利用Flex组件birdeye绘制拓扑关系图

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里边都有详细的说明。


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Clean Architecture

Clean Architecture

Robert C. Martin / Prentice Hall / 2017-9-20 / USD 34.99

Practical Software Architecture Solutions from the Legendary Robert C. Martin (“Uncle Bob”) By applying universal rules of software architecture, you can dramatically improve developer producti......一起来看看 《Clean Architecture》 这本书的介绍吧!

码农工具
随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3