flex拓扑图制作

flex拓扑图(完整例子一)

(2010-06-04 14:00:06)

网上流传一个版本的拓扑图，基本是不可以使用的。又因为公司近来要搞一个相关的项目，就把该项目的代码下载下来做了修改可以使用。我现在改的一个简单例子给大家分享一下。

网元的代码（NeMap.as）：

package com
{
 importflash.events.MouseEvent;  
    importflash.ui.ContextMenu;  
    importflash.ui.ContextMenuItem;  
      
    importmx.containers.Canvas;  
    importmx.controls.Image;  
    importmx.controls.Label;  
    importmx.events.MoveEvent;     
    public classNeMap extends mx.containers.Canvas{     
       private var nePic :String ="assets/zx.PNG";//网元图     
       private var neState:String ="assets/zx.PNG";//网元状态图     
       private var neName:String ="北京HSTPA";     
       private var lineList:Array =newArray();     
       private var lineCount:int =0;     
       private var x_Coordinates:int =100;     
       private var y_Coordinates:int =100;     
             
       private var nePicImage:Image = newImage();     
       private var neStateImage:Image = newImage();     
       private var neNameLable:Label = newLabel();     
             
       private var oldIndex:int =0;     
             
       public functionNeMap(x:int,y:int,ne:String){     
           this.width  =60;     
           this.height =60;     
           this.x =x;     
           this.y =y;     
           this.neName =ne;     
           init();     
       }     
             
             
       private functioninit():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);     
             
           this.addEventListener(flash.events.MouseEvent.CLICK,doubleNe);  
              
           initNePic();     
           initNeState();           
           initLabel();     
                 
           this.addChild(nePicImage);     
           this.addChild(neStateImage);     
           this.addChild(neNameLable);     
           this.verticalScrollPolicy ="off";     
           this.horizontalScrollPolicy ="off";     
                 
           this.contextMenu =initPopMenu();                
       }     
             
       private functiondragBegin(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 functiondragEnd(event:MouseEvent):void{     
           this.parent.setChildIndex(this,oldIndex);     
           this.stopDrag();                 
                     
       }     
             
       private functiondragEnd1(event:MoveEvent):void{     
          refreshLine();     
       }     
             
       private functiondragEnd2(event:MouseEvent):void{     
          refreshLine();     
       }     
             
       private functionrefreshLine():void{     
            var x:int =getCenterX();     
           var y:int =getCenterY();     
           for(vari: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 functionselectedNe(event:MouseEvent):void{     
           //this.setStyle("borderColor","#FF0000");     
           //this.setStyle("borderStyle","outset");     
       }     
             
       private functionnoSelectedNe(event:MouseEvent):void{     
           this.setStyle("borderColor","");     
           this.setStyle("borderStyle","");     
       }     
             
       private functioninitNePic():void{     
           nePicImage.source =nePic;     
           nePicImage.x =10;     
           nePicImage.y =0;     
           nePicImage.width =50;     
           nePicImage.height =46;     
       }     
             
       private functioninitNeState():void{     
           neStateImage.source =neState;     
           neStateImage.x =0;     
           neStateImage.y =0;     
           neStateImage.width =10;     
           neStateImage.height =10;     
       }     
             
       private functioninitLabel():void{     
           neNameLable.text =neName;     
           neNameLable.x =0;     
           neNameLable.y =30;     
           neNameLable.width =100;     
           neNameLable.height =20;     
       }     
             
       private functioninitPopMenu():ContextMenu{     
           var contextMenu : ContextMenu = newContextMenu();     
           contextMenu.hideBuiltInItems();     
           var contextMenuItem1 : ContextMenuItem = newContextMenuItem("网元信息");     
           var contextMenuItem2 : ContextMenuItem = newContextMenuItem("告警信息");     
           var contextMenuItem3 : ContextMenuItem = newContextMenuItem("历史告警");     
           contextMenu.customItems.push(contextMenuItem1);     
           contextMenu.customItems.push(contextMenuItem2);     
           contextMenu.customItems.push(contextMenuItem3);     
                 
           returncontextMenu;     
       }     
             
       public functiongetCenterX():int{     
           returnthis.x+10;     
       }     
             
       public functiongetCenterY():int{     
           returnthis.y+10;     
       }     
             
       public functionsetLine(line1:ExpanLine,flag:Boolean):void{     
           var neLineFlag:NeLineFlag = newNeLineFlag(line1,flag);     
           lineList[lineCount] =neLineFlag;     
           lineCount++;     
           //this.line =line1;     
           //this.isHeaderLine =flag;     
       }     
             
       public functionsetNeState(state:String):void{     
           neStateImage.source =state;     
       }  
          
       public functiondoubleNe(event:MouseEvent):void{  
            //  
       }      
    }
}

 

线路代码（ExpanLine.as）：

package com
{
 import flash.display.Sprite;
 import flash.events.MouseEvent;
 import flash.ui.ContextMenu;
 import flash.ui.ContextMenuItem;
 
 import mx.controls.Alert;
 import mx.controls.Button;
 import mx.controls.Label;
 import mx.core.IToolTip;
 import mx.events.ToolTipEvent;
 importmx.managers.ToolTipManager;     
         
    public classExpanLine extendsmx.controls.Button     
   {     
       private varline_x1:int;//连线一段     
       private varline_y1:int;     
       private varline_x2:int;//连线另一段     
       private varline_y2:int;     
       //private var lines :Sprite =  newSprite();     
             
       private var lines:Label = newLabel();     
             
       //private var myPanel:ShowFlow =null;     
             
       private varparentWindow:TopoTest2;     
             
       public varmyTip:IToolTip;     
             
             
             
       public functionExpanLine(x1:int,y1:int,x2:int,y2:int,parent:TopoTest2){     
           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 = newContextMenu();     
           contextMenu.hideBuiltInItems(); //隐藏一些内建的鼠标右键菜单项     
           var contextMenuItem1 : ContextMenuItem = newContextMenuItem("链路信息");     
           var contextMenuItem2 : ContextMenuItem = newContextMenuItem("告警信息");     
           var contextMenuItem3 : ContextMenuItem = newContextMenuItem("历史告警");     
           contextMenu.customItems.push(contextMenuItem1);     
           contextMenu.customItems.push(contextMenuItem2);     
           contextMenu.customItems.push(contextMenuItem3);     
           lines.contextMenu =contextMenu;                 
                 
       }     
             
       public functiondoubleLineInterface(event:MouseEvent):void{     
           Alert.show("aaaaa");     
           //var url:URLRequest=newURLRequest("./ipInterface.do?ipInterfaceId="+interfaceId);     
           //navigateToURL(url,"_blank");     
       }     
             
       public functioncreateToopTip(event:MouseEvent):void{     
                 
           //var ptt:PanelToolTip = newPanelToolTip();     
                 
                 
           //ToolTipManager.toolTipClass =myTip;     
           //myTip.addEventListener(mx.events.ToolTipEvent.TOOL_TIP_CREATE,createCustomToolTip);     
           myTip = ToolTipManager.createToolTip("aaa",10,10) asIToolTip;     
                 
           //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 functionhideToopTip(event:MouseEvent):void{     
           ToolTipManager.destroyToolTip(myTip);     
       }     
             
       public functioncreateCustomToolTip(event:ToolTipEvent):void{     
            
       }     
             
       public functionresetBeginLine(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 functionresetEndLine(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 functionrefreshLine():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 functionremoveLine():void{     
           lines.graphics.clear();     
       }     
             
       public functiongetLine():Sprite{     
           returnlines;     
       }        
             
       public functiongetBeginX():int{     
           returnline_x1;     
       }     
             
       public functiongetBeginY():int{     
           returnline_y1;     
       }     
             
       public functiongetEndX():int{     
           returnline_x2;     
       }     
             
       public functiongetEndY():int{     
           returnline_y2;     
       }     
             
       public functionsetBeginX(x1:int):void{     
           line_x1 =x1;     
       }     
             
       public functionsetBeginY(y1:int):void{     
           line_y1 =y1;     
       }     
             
       public functionsetEndX(x2:int):void{     
           line_x2 =x2;     
       }     
             
       public functionsetEndY(y2:int):void{     
           line_y2 =y2;     
       }            
    }
}

线的控制实体类（NeLineFlag.as）：

package com
{
 public classNeLineFlag  
   {     
       private var line:ExpanLine=null;  
       private var flag:Boolean =false;  
       public functionNeLineFlag(line:ExpanLine,flag:Boolean)  
       {  
           this.line=line;  
           this.flag=flag;  
       }  
          
       public functiongetLine():ExpanLine{  
           return line;  
       }  
          
       public functiongetFlag():Boolean{  
           return flag;  
       }  
    }
}

 

mxml（NetPicture.mxml）：

<?xml version="1.0"encoding="utf-8"?>     
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute" xmlns:ns1="*" width="100%"height="100%">     
   <mx:Style>     
       AlertTitle{      
           font-size:12pt;      
           font-weight:bold;     
       }     
       ToopTip{     
           backgroundColor:red;     
           backgroundImage:url("ASSETS/MAP.GIF");     
       }        
   </mx:Style>     
   <mx:Script>     
       <!--[CDATA[     
           importmx.events.ToolTipEvent;     
            
             
       public varmap1:NeMap;     
       public varmap2:NeMap;     
       public varmap3:NeMap;     
             
       public varline:ExpanLine;     
       public varline2:ExpanLine;     
       public varline3:ExpanLine;     
       importmx.managers.PopUpManager;     
       importmx.controls.Alert;     
             
       //public varmyPanel1:ShowFlow;     
             
       public functioninit():void{     
                 
           map1 = newNeMap(400,100,"ATM交换机1");     
           map2 = newNeMap(100,200,"ATM交换机2");     
           map3 = newNeMap(600,400,"ATM交换机3");     
                 
           myCanvas.setStyle("backgroundImage",'ASSETS/MAP.GIF');     
                 
           line  = newExpanLine(map1.getCenterX(),map1.getCenterY(),map2.getCenterX(),map2.getCenterY(),this);     
           line2 = newExpanLine(map2.getCenterX(),map2.getCenterY(),map3.getCenterX(),map3.getCenterY(),this);     
           line3 = newExpanLine(map1.getCenterX(),map1.getCenterY(),map3.getCenterX(),map3.getCenterY(),this);     
                 
                 
           mylabel.addChild(line.getLine());     
           mylabel.addChild(line2.getLine());     
           mylabel.addChild(line3.getLine());     
                 
                 
           map1.toolTip ="192.168.1.220";     
           map2.toolTip ="202.168.1.220";     
           map3.toolTip ="10.104.20.135";     
                 
                
           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 functioncreateCustomToolTip(event:ToolTipEvent):void{     
           //var ptt:PanelToolTip = newPanelToolTip();     
           //event.toolTip =ptt;     
       }     
             
       public functionlinkAlarm():void{     
           line.refreshLine();     
       }     
             
       public functionneDown():void{     
           map1.setNeState("assets/criticlaStatus.gif");     
       }         
             
       ]]-->     
   </mx:Script>     
   <mx:Canvas id="myCanvas" x="0" y="0" width="100%"height="100%" borderColor="#FF0000" borderStyle="solid"verticalScrollPolicy="off">     
       <mx:Panel x="0" y="0" width="100%" height="100%"layout="absolute" id="myPanel"alpha="0.5">     
           <mx:Label x="0" y="0" id="mylabel"initialize="init();"/>      
       </mx:Panel>     
   </mx:Canvas>       
</mx:Application>