`
jeffrey0411
  • 浏览: 54181 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flex拓扑图制作

FlexFlashSpringUIUP 
阅读更多
1、把节点封装成as的类
2、把连线也封装成as的类
3、一个测试文件

NeMap.as 节点类 
package{
	import mx.containers.Canvas;
	import mx.controls.Image;
	import mx.controls.Label;
	import flash.ui.ContextMenu;
	import flash.ui.ContextMenuItem;
	import mx.events.MenuEvent;
	import flash.events.MouseEvent;
	import mx.containers.Canvas;
	import flash.display.Sprite;
	import mx.controls.Alert;
	import flash.events.FocusEvent;
	import flash.events.ActivityEvent;
	import flash.utils.Dictionary;
	import flash.events.Event;
	import mx.events.DragEvent;
	import mx.events.StateChangeEvent;
	import mx.events.FlexEvent;
	import mx.events.MoveEvent;
	import flash.events.StatusEvent;
	public class NeMap extends mx.containers.Canvas {
		private var nePic :String = "ASSETS/LSTP.PNG";//网元图
		private var neState:String = "ASSETS/clearStatus.gif";//网元状态图
		private var neName:String = "北京HSTPA";
		private var lineList:Array =new Array();
		private var lineCount:int = 0;
		private var x_Coordinates:int = 100;
		private var y_Coordinates:int = 100;
		
		private var nePicImage:Image = new Image();
		private var neStateImage:Image = new Image();
		private var neNameLable:Label = new Label();
		
		private var oldIndex:int = 0;
		
		public function NeMap(x:int,y:int,ne:String){
			this.width  = 60;
			this.height = 60;
			this.x = x;
			this.y = y;
			this.neName = ne;
			init();
		}
		
		
		private function init():void{
				
			this.addEventListener(flash.events.MouseEvent.MOUSE_DOWN,dragBegin);
			this.addEventListener(flash.events.MouseEvent.MOUSE_UP,dragEnd);
			this.addEventListener(flash.events.MouseEvent.MOUSE_MOVE,dragEnd2);
			this.addEventListener(mx.events.MoveEvent.MOVE,dragEnd1);
			//this.addEventListener(mx.events.MoveEvent.MOVE,dragEnd1);
			//neStateImage.addEventListener();
			
			//this.addEventListener(flash.events.MouseEvent.ROLL_OUT,dragEnd);
			this.addEventListener(flash.events.MouseEvent.MOUSE_OVER,selectedNe);
			this.addEventListener(flash.events.MouseEvent.MOUSE_OUT,noSelectedNe);
		
			initNePic();
			initNeState();		
			initLabel();
			
			this.addChild(nePicImage);
			this.addChild(neStateImage);
			this.addChild(neNameLable);
			this.verticalScrollPolicy = "off";
			this.horizontalScrollPolicy = "off";
			
			this.contextMenu = initPopMenu();			
		}
		
		private function dragBegin(event:MouseEvent):void{
			//Alert.show(String(this.parent.numChildren));
			oldIndex = this.parent.getChildIndex(this);
			this.parent.setChildIndex(this,this.parent.numChildren-1);
			this.startDrag(false);		
		}
		
		private function dragEnd(event:MouseEvent):void{
			this.parent.setChildIndex(this,oldIndex);
			this.stopDrag();		    
			/*var x:int = getCenterX();
			var y:int = getCenterY();
			for(var i:int=0;i<lineList.length;i++){				
				var nelineFlag:NeLineFlag = lineList[i];
			    var line:ExpanLine = nelineFlag.getLine();
			    var isHeaderLine:Boolean = 	nelineFlag.getFlag();
			    line.removeLine();
			    if(isHeaderLine){
					line.setBeginX(x);
					line.setBeginY(y);
					line.resetBeginLine(x,y);
				}else{
					line.setEndX(x);
					line.setEndY(y);
					line.resetEndLine(x,y);
				}	
			}*/		
		}
		
		private function dragEnd1(event:MoveEvent):void{
		   refreshLine();
		}
		
		private function dragEnd2(event:MouseEvent):void{
		   refreshLine();
		}
		
		private function refreshLine():void{
			 var x:int = getCenterX();
			var y:int = getCenterY();
			for(var i:int=0;i<lineList.length;i++){				
				var nelineFlag:NeLineFlag = lineList[i];
			    var line:ExpanLine = nelineFlag.getLine();
			    var isHeaderLine:Boolean = 	nelineFlag.getFlag();
			    line.removeLine();
			    if(isHeaderLine){
					line.setBeginX(x);
					line.setBeginY(y);
					line.resetBeginLine(x,y);
				}else{
					line.setEndX(x);
					line.setEndY(y);
					line.resetEndLine(x,y);
				}	
			}		
		}
		
		//增加边框
		private function selectedNe(event:MouseEvent):void{
			//this.setStyle("borderColor","#FF0000");
			//this.setStyle("borderStyle","outset");
		}
		
		private function noSelectedNe(event:MouseEvent):void{
			this.setStyle("borderColor","");
			this.setStyle("borderStyle","");
		}
		
		private function initNePic():void{
			nePicImage.source = nePic;
			nePicImage.x = 10;
			nePicImage.y = 0;
			nePicImage.width = 30;
			nePicImage.height = 46;
		}
		
		private function initNeState():void{
			neStateImage.source = neState;
			neStateImage.x = 0;
			neStateImage.y = 0;
			neStateImage.width = 10;
			neStateImage.height = 10;
		}
		
		private function initLabel():void{
			neNameLable.text = neName;
			neNameLable.x = 0;
			neNameLable.y = 45;
			neNameLable.width = 60;
			neNameLable.height = 20;
		}
		
		private function initPopMenu():ContextMenu{
			var contextMenu : ContextMenu = new ContextMenu();
			contextMenu.hideBuiltInItems();
			var contextMenuItem1 : ContextMenuItem = new ContextMenuItem("网元信息");
			var contextMenuItem2 : ContextMenuItem = new ContextMenuItem("告警信息");
			var contextMenuItem3 : ContextMenuItem = new ContextMenuItem("历史告警");
			contextMenu.customItems.push(contextMenuItem1);
			contextMenu.customItems.push(contextMenuItem2);
			contextMenu.customItems.push(contextMenuItem3);
			
			return contextMenu;
		}
		
		public function getCenterX():int{
			return this.x+10;
		}
		
		public function getCenterY():int{
			return this.y+10;
		}
		
		public function setLine(line1:ExpanLine,flag:Boolean):void{
			var neLineFlag:NeLineFlag = new NeLineFlag(line1,flag);
			lineList[lineCount] = neLineFlag;
			lineCount++;
			//this.line = line1;
			//this.isHeaderLine = flag;
		}
		
		public function setNeState(state:String):void{
			neStateImage.source = state;
		}
		
	}
}


ExpanLine.as 连线类 
package 
{    
    import flash.display.Shape;
	import mx.core.UIComponent;
	import flash.display.Sprite;
	import flash.ui.ContextMenu;
	import flash.ui.ContextMenuItem;
	import mx.containers.Canvas;
	import mx.containers.Panel;
	import flash.events.MouseEvent;
	import mx.controls.Alert;
	import mx.controls.Label;
	import mx.managers.PopUpManager;
	import flash.display.DisplayObject;
	import mx.managers.ToolTipManager;
	import mx.controls.ToolTip;
	import flash.events.Event;
	import flash.events.TextEvent;
	import flash.events.TimerEvent;
	import flash.events.SyncEvent;
	import mx.events.ToolTipEvent;
	import mx.core.IToolTip;
	import mx.controls.Button;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	
	public class ExpanLine extends mx.controls.Button
	{
		private var line_x1:int;//连线一段
		private var line_y1:int;
		private var line_x2:int;//连线另一段
		private var line_y2:int;
		//private var lines :Sprite =  new Sprite();
		
		private var lines:Label = new Label();
		
		private var myPanel:ShowFlow = null;
		
		private var parentWindow:Cond;
		
		public var myTip:IToolTip;
		
		
		
		public function ExpanLine(x1:int,y1:int,x2:int,y2:int,parent:Cond){
			line_x1 = x1;
			line_y1 = y1;
			line_x2 = x2;
			line_y2 = y2;		
			parentWindow = parent;
			
			
			
			lines.graphics.lineStyle(2,0x0099ff,1);
			lines.graphics.moveTo(line_x1,line_y1);
			lines.graphics.lineTo(line_x2,line_y2);	
			
			lines.toolTip = "111111111";
			
			//lines.addEventListener(flash.events.MouseEvent.ROLL_OVER,createToopTip);
			//lines.addEventListener(flash.events.MouseEvent.ROLL_OUT,hideToopTip);			
            //lines.addEventListener(mx.events.ToolTipEvent.TOOL_TIP_CREATE,createCustomToolTip);
            lines.addEventListener(flash.events.MouseEvent.CLICK,doubleLineInterface);
			
			
			
			var contextMenu : ContextMenu = new ContextMenu();
			contextMenu.hideBuiltInItems(); // 隐藏一些内建的鼠标右键菜单项
			var contextMenuItem1 : ContextMenuItem = new ContextMenuItem("链路信息");
			var contextMenuItem2 : ContextMenuItem = new ContextMenuItem("告警信息");
			var contextMenuItem3 : ContextMenuItem = new ContextMenuItem("历史告警");
			contextMenu.customItems.push(contextMenuItem1);
			contextMenu.customItems.push(contextMenuItem2);
			contextMenu.customItems.push(contextMenuItem3);
			lines.contextMenu = contextMenu;			
			
		}
		
		public function doubleLineInterface(event:MouseEvent):void{
			Alert.show("aaaaa");
			//var url:URLRequest=new URLRequest("./ipInterface.do?ipInterfaceId="+interfaceId);
  	    	//navigateToURL(url,"_blank");
		}
		
		public function createToopTip(event:MouseEvent):void{
			
			var ptt:PanelToolTip = new PanelToolTip();
			
			
			//ToolTipManager.toolTipClass = myTip;
			//myTip.addEventListener(mx.events.ToolTipEvent.TOOL_TIP_CREATE,createCustomToolTip);
			myTip = ToolTipManager.createToolTip("aaa",10,10) as IToolTip;
			
			//ToolTipManager.currentToolTip = ptt;
			//ToolTipManager.enabled = true;
			
			
			//myTip = ToolTip(ptt);
			myTip.x = event.localX;
			myTip.y = event.localY;		
			
			//myTip.setStyle("backgroundColor",0xFFCC00);
			//myTip.width = 150;
			//myTip.height = 200;
		}
		
		public function hideToopTip(event:MouseEvent):void{
			ToolTipManager.destroyToolTip(myTip);
		}
		
		public function createCustomToolTip(event:ToolTipEvent):void{
			var ptt:PanelToolTip = new PanelToolTip();
			ptt.nodeId = "10";
			event.toolTip = ptt;
		}
		
		public function resetBeginLine(x1:int,y1:int):void{
			lines.graphics.clear();
			lines.graphics.lineStyle(2,0x0099ff,1);
			lines.graphics.moveTo(x1,y1);
			lines.graphics.lineTo(line_x2,line_y2);
		}
		
		public function resetEndLine(x1:int,y1:int):void{
			lines.graphics.clear();
			lines.graphics.lineStyle(2,0x0099ff,1);
			lines.graphics.moveTo(line_x1,line_y1);
			lines.graphics.lineTo(x1,y1);
		}
		
		public function refreshLine():void{
			lines.graphics.clear();
			lines.graphics.lineStyle(2,0xFF0000,1);
			lines.graphics.moveTo(line_x1,line_y1);
			lines.graphics.lineTo(line_x2,line_y2);	
		}
		
		public function removeLine():void{
			lines.graphics.clear();
		}
		
		public function getLine():Sprite{
			return lines;
		}	
		
		public function getBeginX():int{
			return line_x1;
		}
		
		public function getBeginY():int{
			return line_y1;
		}
		
		public function getEndX():int{
			return line_x2;
		}
		
		public function getEndY():int{
			return line_y2;
		}
		
		public function setBeginX(x1:int):void{
			line_x1 = x1;
		}
		
		public function setBeginY(y1:int):void{
			line_y1 = y1;
		}
		
		public function setEndX(x2:int):void{
			line_x2 = x2;
		}
		
		public function setEndY(y2:int):void{
			line_y2 = y2;
		}		
	}
}


一个测试类Conf.mxml 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" width="660" height="422">
	<mx:Style>
		AlertTitle{ 
		    font-size: 12pt; 
		    font-weight: bold;
		}
		ToopTip{
			backgroundColor:red;
			backgroundImage:url("ASSETS/MAP.GIF");
		}	
	</mx:Style>
    <mx:Script>
		<![CDATA[
			import mx.events.ToolTipEvent;
		/*import flash.display.Shape;
		import mx.core.UIComponent;
	    import flash.display.DisplayObjectContainer;*/
	    
	    public var map1:NeMap;
		public var map2:NeMap;
		public var map3:NeMap;
		
		public var line:ExpanLine;
		public var line2:ExpanLine;
		public var line3:ExpanLine;
		import mx.managers.PopUpManager;
		import mx.controls.Alert;
		
		public var myPanel1:ShowFlow;
		
		public function init():void{
			
			map1 = new NeMap(200,100,"map1");
			map2 = new NeMap(100,200,"map2");
			map3 = new NeMap(200,200,"map3");
			
			myCanvas.setStyle("backgroundImage",'ASSETS/MAP.GIF');
			
			line  = new ExpanLine(map1.getCenterX(),map1.getCenterY(),map2.getCenterX(),map2.getCenterY(),this);
			line2 = new ExpanLine(map2.getCenterX(),map2.getCenterY(),map3.getCenterX(),map3.getCenterY(),this);
			line3 = new ExpanLine(map1.getCenterX(),map1.getCenterY(),map3.getCenterX(),map3.getCenterY(),this);
			
			
			mylabel.addChild(line.getLine());
            mylabel.addChild(line2.getLine());
            mylabel.addChild(line3.getLine());
            
            
            map1.toolTip = "map1map1map1map1map1map1map1map1map1map1map1map1map1map1map1map1";
            map2.toolTip = "map2map2map2map2map2map2map2map2map2map2map2map2map2map2map2map2";
            map3.toolTip = "map3map3map3map3map3map3map3map3map3map3map3map3map3map3map3map3";
            
           
            map1.setLine(line,true);
            map2.setLine(line,false);
            
            map2.setLine(line2,true);
            map3.setLine(line2,false);
            
            map1.setLine(line3,true);
            map3.setLine(line3,false);            
            
            myCanvas.addChild(map3);
            myCanvas.addChild(map1);
            myCanvas.addChild(map2);
            
            
	    }	
	    
	    public function createCustomToolTip(event:ToolTipEvent):void{
			var ptt:PanelToolTip = new PanelToolTip();
			event.toolTip = ptt;
		}
	    
	    public function linkAlarm():void{
	    	line.refreshLine();
	    }
	    
	    public function neDown():void{
	    	map1.setNeState("assets/criticlaStatus.gif");
	    }
	    
	    public function show(aa:Cond):void{
	    	Alert.show("show");
	   		myPanel1 = ShowFlow(PopUpManager.createPopUp(aa, ShowFlow, true)); 			 	
	    }
	    
	    
		]]>
	</mx:Script>
	<mx:Canvas id="myCanvas" x="0" y="0" width="659" height="412" borderColor="#FF0000" borderStyle="solid" verticalScrollPolicy="off">
		<mx:Panel x="0" y="0" width="650" height="410" layout="absolute" id="myPanel" alpha="0.5">
			<mx:Button x="450" y="99" label="生成Topo" click="init();" id="mybutton"  borderColor="#008080" toolTip="aaaaaaaa"/>
			<mx:Label x="0" y="0" id="mylabel" />
			<mx:Button x="450" y="152" label="链路变色" width="75" click="show(this);"/>
			<mx:Button x="450" y="202" label="节点Down" width="75"/>
		</mx:Panel>
	</mx:Canvas>	
</mx:Application>
5
顶
6
踩
分享到：
| 转oracle bin下命令含义
评论
15 楼 dtctve67 2014-05-05  
太乱了，还有错，文件都打不开，楼主这也太糊弄事了。
14 楼 neusoft_jerry 2014-04-21  
做的啥乱七八糟的啊，各种错误，上传之前能不能先清理下。
13 楼 jauney 2009-08-07  
请问下那个ShowFlow()类型是什么原因？我这儿的提示还是找不到
12 楼 piziwang 2008-07-16  
有很多错误啊，比如 ShowFlow, PanelToolTip等等提示找不到类型
我用的是 flex3.0, 如何解决啊？？？
11 楼 hegang3 2008-06-27  
这下可以了。谢谢楼主。
10 楼 hegang3 2008-06-19  
注销掉一些代码后
PanelToolTip
ShowFlow
找不到。
9 楼 hegang3 2008-06-19  
改动以后出错
                var nelineFlag:NeLineFlag = lineList[i]; 
NeLineFlag 找不到类型或不是编译常量


8 楼 hegang3 2008-06-19  
我的是 flex builder2
刚才cond的问题解决了。
谢谢jeffrey0411，centgo
还是很多类找不到。
7 楼 centgo 2008-06-18  
Cond 应该是 Conf.mxml 就是那个测试类，名字应该一致。
6 楼 hegang3 2008-06-18  
能问一下你的环境吗？
我这里是 flex builder 2 的
提示错误找不到Cond .
5 楼 jeffrey0411 2008-04-25  
那些类没有？有可能是版本的问题吧
4 楼 yjlhope 2008-04-25  
好多类都没有啊  
3 楼 jeffrey0411 2008-04-10  
Conf.mxml就是最后那个测试类
2 楼 fuwei2 2008-04-09  
请问Conf是个哪个类？我一直编译不通过
1 楼 jeffrey0411 2008-04-08  
这个是简单的一些例子，可以运行的，大家可以试试。
我会陆续把与spring的结合技术发布出来的。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    flex画拓扑图的第一步

    总结来说，使用Flex制作拓扑图涉及了Flex基础组件的使用、图形绘制、事件处理、数据结构设计和用户交互等多个方面，是一个集成了Flex核心技术的综合性项目。通过这样的实践，开发者不仅可以提升Flex技能，还能深入...

    flex总制作可拖拽的网络拓扑图实例

    在本文中，我们将深入探讨如何使用Adobe Flex技术创建一个可拖拽的网络拓扑图实例。Flex是一款强大的开发工具，它允许开发者构建富互联网应用程序（RIA），尤其适用于创建交互式的、图形化的用户界面。网络拓扑图是...

    flex制作拓扑拓扑

    7. **项目结构**：虽然没有提供具体的源代码，但一个典型的Flex拓扑项目可能包括多个MXML和ActionScript文件，分别负责不同的视图和逻辑。资源文件如图片和样式表也需妥善组织。 8. **部署与运行环境**：Flex应用...

    mapgis igserver flex入门手册

    空间分析是GIS的核心功能之一，MapGIS IGServer提供了多种空间分析工具，如拓扑分析、叠加分析、裁剪分析、网络分析、缓冲分析和投影转换等。这些工具能够帮助用户进行地理数据的深度挖掘和理解，支持决策制定和问题...

    ArcGIS电子地图制作与发布流程

    这涉及到收集地理信息，如地形图、遥感图像、矢量数据（点、线、面）、属性数据等。在ArcGIS中，这些数据可以导入到Geodatabase中进行统一管理。 1. 数据预处理：包括数据清洗、坐标系转换、拓扑规则检查等，确保...

    TWaver图形界面之道

    - **其他组件**：除了拓扑图组件之外，TWaver还提供了多种传统组件，如树组件、表格、树表格、属性页以及图表（饼图、线图、柱状图等）等。 #### 三、TWaver数据模型 TWaver不仅仅是一系列可视化的组件集合，其背后...

    IBM-server-blade visio

    Visio是一款强大的图表制作工具，尤其适用于创建流程图、网络拓扑图以及各种技术图纸，包括服务器硬件布局。在IBM-server-blade visio中，用户可以详细地展示IBM的刀片服务器配置和连接方式，帮助IT专业人员规划、...

    01-04开发工具清单 (40).docx

    7. Visio 2003：Microsoft Visio是一款流程图和示意图绘制工具，常用于创建UML模型、网络拓扑图和组织结构图等，是设计和沟通技术方案的重要辅助工具。 8. Microsoft Project 2003：这是一款项目管理软件，可以规划...

    2014全国职业院校技能大赛高职组计算机网络应用赛项样题

    考生需要根据拓扑图进行设备连接和配置。 5. **网络连接和配置**： - **双绞线制作**：遵循568B标准制作网线，这是网络连接的基础。 - **拓扑连接**：正确连接所有设备，确保网络通信的物理路径畅通。 - **设备...

    程序员必备网址

    - **`http://192.168.0.6:7001/ZG/jsp/topo/topoIndex.jsp`**：另一个内部项目网页，可能涉及到拓扑结构展示或管理。 - **`http://192.168.0.97:9008/`**：可能是用于访问某个服务或应用的内部网址。 - **`...

    VMware Workstation Pro 12.0.0 Build 2985596 - 64bit [ENG] [Serial]

    Workstation 12 Pro 界面包括简化的菜单、实时缩略图、选项卡、首选项屏幕和具有搜索功能的虚拟机库，让您可以快速查看和访问您的虚拟机，从而节省宝贵的时间。 借助 Workstation 12 Pro，您现在可以为桌面去掉...

Magicbox
Global site tag (gtag.js) - Google Analytics