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. import mx.controls.Alert;
13. private function complete():void{
14. container.completeLoading();
15. var node:BaseNodeContainer=new BaseNodeContainer;
16. node.x=10;
17. node.y=10;
18. node.width=32;
19. node.height=32;
20. node.initNode();
21. node.refreshImage("image/unknow.gif");
22. container.addTopoNode(node);
23. var node2:BaseNodeContainer=new BaseNodeContainer;
24. node2.x=100;
25. node2.y=10;
26. node2.width=32;
27. node2.height=32;
28. node2.initNode();
29. node2.refreshImage("image/unknow.gif");
30. container.addTopoNode(node2);
31. var  line:TopoLine=new TopoLine();
32. line.initTopoLine(null,node,node2);
33. container.addTopoLine(line);
34. }
35. ]]>
36. </fx:Script>
37. <topo:BaseTopoContainer id="container" width="100%" height="100%" creationComplete="{complete()}" />
38. </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