最简单的flex网络拓扑图开发（二）从xml生成topo图

               

    在文章http://blog.youkuaiyun.com/arjick/article/details/7165256我们已经介绍了最简单的拓扑图构建，但是该拓扑图是死的，而不是可以根据后台的数据的改变而改变。

    这篇文章主要是介绍怎么把拓扑图和后台数据实时互动起来。

    首先我们还是加载swc：

    http://ken-javaframeword.googlecode.com/files/framework2.0_2.swc

样本的xml

<?xml version="1.0" encoding="UTF-8"?><BusinessView saveUrl="/GraphicalView.do?method=saveMap&mapId=2"> <Nodes>  <Node image="image/unknow.gif" y="37" id="1" label="名称:MyBizView"    x="359" url="www.hao123.com" width="32" height="32" />  <Node image="image/unknow.gif" y="177" id="2" label="测试"    x="634" url="www.hao123.com" width="32" height="32" /> </Nodes> <Lines>  <Line end="2" color="0xd9D6C3" start="1" /> </Lines></BusinessView>

例子mxml

<?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.*"> <s:layout>  <s:BasicLayout/> </s:layout> <fx:Declarations>  <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <fx:Script>  <![CDATA[   import com.shine.framework.core.model.BaseXmlModel;   import com.shine.framework.core.util.ArrayMap;   import com.shine.framework.core.util.BaseHttpServiceUtil;   import com.shine.framework.core.util.XMLArrayCollection;   import com.shine.topo.view.Line.TopoLine;   import com.shine.topo.view.node.BaseNodeContainer;      private var resultXmlModelArrayCollertion:XMLArrayCollection=null;   private var lineXmlModelArrayCollection:XMLArrayCollection=null;   private var nodeMap:ArrayMap=null;      private function complete():void{    container.completeLoading();        //远程加载xml    var httpUtil:BaseHttpServiceUtil=new BaseHttpServiceUtil;    httpUtil.getResultXml("xml/example.xml",xmlResult);   }      private function xmlResult(xml:String):void{    nodeMap=new ArrayMap;        //解析所有的Node节点    resultXmlModelArrayCollertion=new XMLArrayCollection;    resultXmlModelArrayCollertion.saxXmlNodeByTag(XML(xml),["Node"]);        for each(var baseXmlModel:BaseXmlModel in resultXmlModelArrayCollertion){     var node:BaseNodeContainer=new BaseNodeContainer;     node.initNode(baseXmlModel);     container.addTopoNode(node);     nodeMap.put(baseXmlModel.getString("id"),node);    }        lineXmlModelArrayCollection=new XMLArrayCollection;    lineXmlModelArrayCollection.saxXmlNodeByTag(XML(xml),["Line"]);        for each(var baseXmlModel:BaseXmlModel in lineXmlModelArrayCollection){     var  line:TopoLine=new TopoLine();     line .initTopoLine(baseXmlModel,BaseNodeContainer(nodeMap.get(baseXmlModel.getString("start"))),BaseNodeContainer(nodeMap.get(baseXmlModel.getString("end"))));     container.addTopoLine(line);    }   }  ]]> </fx:Script> <topo:BaseTopoContainer id="container" width="100%" height="100%" creationComplete="{complete()}" /></s:Application>

效果

    具体xml解析算法请参考：

http://blog.youkuaiyun.com/arjick/article/details/7174437