Flex 网络图

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

    首先下载工程或者SWC文件

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

    

 

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

 

<?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>

<?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