最简单的flex网络拓扑图开发（三）加入信息提示框

原创于 2012-06-25 17:14:39 发布 · 4.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #网络 #application #encoding #xml #library

Flex开发技能专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何在Flex网络拓扑图开发中加入信息提示框，通过共享一个全局信息提示框对象来优化性能。内容包括信息提示框的XML数据结构和使用示例，展示了当鼠标移到节点上时，如何快速显示提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有些朋友在使用这个swc时候对我的设计的信息提示框有疑问。有些人好不了解我事件传输的机制。因为我设计中是所有网元公用一个详细信息提示框，在网元初始化时候把信息提示框的对象传入给网元。如果所有网元都共用一个信息提示框，系统的性能开销比较容易控制。

信息提示框的数据xml

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

信息提示框默认是用message属性的，如果需要修改可以重新node网元。

使用案例

<?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.BaseInfoContainer;
			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("test.xml",xmlResult); 
			} 
			
			private function xmlResult(xml:String):void{ 
				nodeMap=new ArrayMap; 
				
				//加入提示框
				var baseInfoContainer:BaseInfoContainer=new BaseInfoContainer;
				baseInfoContainer.visible=false;
				this.addElement(baseInfoContainer);
				
				//解析所有的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); 
					node.infoContainer=baseInfoContainer;
					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>

我们在系统初始化初始一个信息提示框，然后再把注册到每个node中，然后当鼠标移到节点上立刻有提示。

效果截图