Flex 网络图

  这个是最简单的网络拓扑图开发,我已经帮你把所有拓扑元素封装好,然后直接添加就会具有相关的特性。并且的底层元素也开源,也方便大家oem修改。只需10分钟就可以建设一个完善的拓扑图。

    首先下载工程或者SWC文件

    svn地址:http://code.google.com/p/ken-javaframeword/source/browse/#svn%2Ftrunk%2Fframework2.0

    

 

    导入后,我们开始尝试编程,一下就是最贱的例子:

 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.                xmlns:s="library://ns.adobe.com/flex/spark"   
  4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:topo="com.shine.topo.view.topo.*">  
  5.     <fx:Declarations>  
  6.         <!-- 将非可视元素(例如服务、值对象)放在此处 -->  
  7.     </fx:Declarations>  
  8.     <fx:Script>  
  9.         <![CDATA[ 
  10.             import com.shine.topo.view.Line.TopoLine; 
  11.             import com.shine.topo.view.node.BaseNodeContainer; 
  12.              
  13.             import mx.controls.Alert; 
  14.              
  15.             private function complete():void{ 
  16.                 container.completeLoading(); 
  17.                  
  18.                 var node:BaseNodeContainer=new BaseNodeContainer; 
  19.                 node.x=10; 
  20.                 node.y=10; 
  21.                 node.width=32; 
  22.                 node.height=32; 
  23.                 node.initNode(); 
  24.                 node.refreshImage("image/unknow.gif"); 
  25.                 container.addTopoNode(node); 
  26.                  
  27.                 var node2:BaseNodeContainer=new BaseNodeContainer; 
  28.                 node2.x=100; 
  29.                 node2.y=10; 
  30.                 node2.width=32; 
  31.                 node2.height=32; 
  32.                 node2.initNode(); 
  33.                 node2.refreshImage("image/unknow.gif"); 
  34.                 container.addTopoNode(node2); 
  35.                  
  36.                 var  line:TopoLine=new TopoLine(); 
  37.                 line.initTopoLine(null,node,node2); 
  38.                 container.addTopoLine(line); 
  39.             } 
  40.         ]]>  
  41.     </fx:Script>  
  42.     <topo:BaseTopoContainer id="container" width="100%" height="100%" creationComplete="{complete()}" />  
  43. </s:Application>  
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:topo="com.shine.topo.view.topo.*">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import com.shine.topo.view.Line.TopoLine;
			import com.shine.topo.view.node.BaseNodeContainer;
			
			import mx.controls.Alert;
			
			private function complete():void{
				container.completeLoading();
				
				var node:BaseNodeContainer=new BaseNodeContainer;
				node.x=10;
				node.y=10;
				node.width=32;
				node.height=32;
				node.initNode();
				node.refreshImage("image/unknow.gif");
				container.addTopoNode(node);
				
				var node2:BaseNodeContainer=new BaseNodeContainer;
				node2.x=100;
				node2.y=10;
				node2.width=32;
				node2.height=32;
				node2.initNode();
				node2.refreshImage("image/unknow.gif");
				container.addTopoNode(node2);
				
				var  line:TopoLine=new TopoLine();
				line.initTopoLine(null,node,node2);
				container.addTopoLine(line);
			}
		]]>
	</fx:Script>
	<topo:BaseTopoContainer id="container" width="100%" height="100%" creationComplete="{complete()}" />
</s:Application>


     以上的逻辑是首先导入2个节点,并且导入相关的线路。

最简单的flex网络拓扑图开发(二)从xml生成topo图 http://blog.csdn.net/arjick/article/details/7177162

 

 

最简单的flex网络拓扑图开发(三)加入信息提示框 http://blog.csdn.net/arjick/article/details/7690506

posted @ 2013-12-23 17:00  Brook Legend  阅读(278)  评论(0编辑  收藏  举报