Flex拓扑图设计（三）部分核心代码 完结

??? flex的topo设计我觉得最难还是交互，现在还没解决得很好还是内存控制。

??? 首先我的topo是以一个flex的单例进行控制的，我是以单例把所有实际的控件联系起来

??? MainControl.as

package com.shine.topo.config { import com.shine.framework.util.UrlParametersArrayCollection; import com.shine.framework.view.SunshineTextArea; import com.shine.topo.domailModel.DomailDataModel; import com.shine.topo.model.ConfigModel; import com.shine.topo.model.FullDataNodesModel; import com.shine.topo.model.StatisticsModel; import com.shine.topo.topoview.NmsTopoMainView; import com.shine.topo.util.LineArrayCollection; import com.shine.topo.util.MapArrayCollection; import com.shine.topo.view.AlarmDataGrid; import com.shine.topo.view.BottomCanvas; import com.shine.topo.view.EagleViewCanvas; import com.shine.topo.view.NodeListCanvas; import com.shine.topo.view.SearchCanvas; import com.shine.topo.view.Statistics; import com.shine.topo.view.TopoHtmlCanvas; import com.shine.topo.view.TopoLeftTree; import com.shine.topo.view.TopoLeftTreeCanvas; import com.shine.topo.view.TopoNetCanvas; import com.shine.topo.view.TopoViewCanvas; import com.shine.topo.view.TopoViewListTree; import com.shine.topo.view.ViewCanvas; import com.shine.topo.view.XmlResurnTextArea; public class SingletonModel { private static var _instance:SingletonModel; //url public var _urlParametersArrayCollection:UrlParametersArrayCollection; //config public var configUrl:String="config.xml"; public var configXml:XML; public var configModel:ConfigModel; //data public var dataUrl:String; public var dataXml:XML; public var dataName:String; public var dataType:String; public var saveUrl:String; public var searchUrl:String; public var backgroupImage:String; public var mapBackup:MapArrayCollection; public var lineBackup:LineArrayCollection; private var _statisticsModel:StatisticsModel; //element list public var elementUrl:String; public var elementUrlMethod:String; //full public var fullDataModel:FullDataNodesModel; //domail public var domailDataModel:DomailDataModel; public var domainId:String; //alarm public var alarmUrl:String; public var alarmXml:XML; //控件 public var topoViewCanvas:TopoViewCanvas; public var topoNetCanvas:TopoNetCanvas; public var topoLeftTree:TopoLeftTree; public var topoLeftTreeCanvas:TopoLeftTreeCanvas; public var viewCanvas:ViewCanvas; public var eagleViewCanvas:EagleViewCanvas; public var bottomCanvas:BottomCanvas; public var nodeListCanvas:NodeListCanvas; private var _tipTextCanvas:SunshineTextArea private var _searchCavans:SearchCanvas; public var topoViewListTree:TopoViewListTree; public var nmsTopoMainView:NmsTopoMainView; //new public var topoMainViewCanvas; private var _statistics:Statistics; private var _xmlReturnCanvas:XmlResurnTextArea; private var _sunshineHtmlCavnas:TopoHtmlCanvas; public var alarmDataDrid:AlarmDataGrid; //视图 //值 public var allsrean:String="no"; public var eagleViewWidth:Number; public var bottomHeight:Number; public var topoLeftTreeWidth:Number; public var handleIcon:String="true"; public var refreshState:String="normal"; //refresh or normal public var outInterfaceefreshValue:int=0; public function SingletonModel(enforcer:SingletonEnforcer) { } public static function getInstance():SingletonModel { if (SingletonModel._instance == null) { SingletonModel._instance=new SingletonModel(new SingletonEnforcer()); } return SingletonModel._instance; } public function get urlParametersArrayCollection():UrlParametersArrayCollection { if (_urlParametersArrayCollection == null) { _urlParametersArrayCollection=new UrlParametersArrayCollection; return _urlParametersArrayCollection; } else { return _urlParametersArrayCollection; } } public function get statisticsModel():StatisticsModel { if (_statisticsModel == null) { _statisticsModel=new StatisticsModel; return _statisticsModel; } else { return _statisticsModel; } } public function get tipTextCanvas():SunshineTextArea { if (_tipTextCanvas != null) { return _tipTextCanvas; } else { _tipTextCanvas=new SunshineTextArea; _tipTextCanvas.horizontalScrollPolicy="off"; _tipTextCanvas.verticalScrollPolicy="off"; _tipTextCanvas.setStyle("backgroundColor","0xF1F8FC"); _tipTextCanvas.setStyle("borderColor","0x9EB7D5"); _tipTextCanvas.setStyle("cornerRadius","10"); _tipTextCanvas.setStyle("focusRoundedCorners","tl tr bl br"); viewCanvas.addChild(_tipTextCanvas); return _tipTextCanvas; } } public function get xmlReturnCanvas():SunshineTextArea { if (_xmlReturnCanvas != null) { return _xmlReturnCanvas; } else { _xmlReturnCanvas=new XmlResurnTextArea; _xmlReturnCanvas.horizontalScrollPolicy="off"; _xmlReturnCanvas.verticalScrollPolicy="off"; _xmlReturnCanvas.setStyle("backgroundColor","0xF1F8FC"); _xmlReturnCanvas.setStyle("borderColor","0x9EB7D5"); _xmlReturnCanvas.setStyle("cornerRadius","10"); _xmlReturnCanvas.setStyle("focusRoundedCorners","tl tr bl br"); _xmlReturnCanvas.width=300; viewCanvas.addChild(_xmlReturnCanvas); return _tipTextCanvas; } } public function get sunshineHtmlCavnas():TopoHtmlCanvas { if (_sunshineHtmlCavnas != null) { return _sunshineHtmlCavnas; } else { _sunshineHtmlCavnas=new TopoHtmlCanvas; _sunshineHtmlCavnas.width=0; _sunshineHtmlCavnas.height=0; _sunshineHtmlCavnas.oWidth=topoNetCanvas.width / 2; _sunshineHtmlCavnas.oHeight=topoNetCanvas.height / 2; _sunshineHtmlCavnas.x=topoNetCanvas.width / 4; _sunshineHtmlCavnas.y=topoNetCanvas.height / 4; _sunshineHtmlCavnas.moveable=false; topoNetCanvas.addChild(_sunshineHtmlCavnas); return _sunshineHtmlCavnas; } } public function set searchCavans(value:SearchCanvas):void { _searchCavans=value; } public function get searchCavans():SearchCanvas { if (_searchCavans != null) { return _searchCavans; } else { _searchCavans=new SearchCanvas; _searchCavans.visible=false; _searchCavans.x=viewCanvas.width / 2 - _searchCavans.width / 2; _searchCavans.y=viewCanvas.height / 2 - _searchCavans.height / 2; topoViewCanvas.addChild(_searchCavans); return _searchCavans; } } public function set statistics(value:Statistics):void { this._statistics=value; } public function get statistics():Statistics { if (_statistics != null) { return _statistics; } else { _statistics=new Statistics; _statistics.width=500; _statistics.height=330; _statistics.x=viewCanvas.width / 2 - _statistics.width / 2; _statistics.y=viewCanvas.height / 2 - _statistics.height / 2; _statistics.visible=false; nmsTopoMainView.addChild(_statistics); return _statistics; } } } } class SingletonEnforcer { }

?

?每个组件createcomplete都会把组件放到MainControl.as

?

?这个是一个核心画布的加载代码

?<?xml version="1.0" encoding="utf-8"?> <BaseTopoViewCanvas xmlns="com.shine.topo.view.*" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="{fullCreate()}" verticalScrollPolicy="off" horizontalScrollPolicy="off"> <mx:Script> <!--[CDATA[ import com.shine.topo.config.SingletonModel; import com.shine.topo.model.FullDataModel; import com.shine.topo.model.FullLineDataModel; import com.shine.topo.model.FullNodeDataModel; import com.shine.topo.model.NeLineModel; import com.shine.topo.service.DataModelService; import com.shine.topo.util.LineArrayCollection; import com.shine.topo.util.MapArrayCollection; import com.shine.topo.util.AppUtil; import flash.utils.*; import mx.collections.ArrayCollection; import mx.containers.Canvas; import mx.controls.Alert; import mx.controls.Label; public var fullDataModel:FullDataModel; public var mapBackup:MapArrayCollection=new MapArrayCollection; public var lineBackup:LineArrayCollection=new LineArrayCollection; public var categorys:ArrayCollection=new ArrayCollection; private var fullNodeDataModel:FullNodeDataModel; private var fullLineDataModel:FullLineDataModel; private var map:NeMap; private var line:ExpanLine; private var dataModelService:DataModelService=new DataModelService; //水印 private var tipLabel:Label=new Label; public function initFullCanvas(value:FullDataModel):void { this.startLoading(); this.fullDataModel=value; this.removeAllChildren(); mapBackup.clean(); lineBackup.clean(); if (SingletonModel.getInstance().backgroupImage.length != 0) this.initBackGroupImage(AppUtil.handleApp(SingletonModel.getInstance().backgroupImage)); var nodeLength:int=value.fullDataNodesMode.nodesArrayCollection.length; for (var i:int=0; i < nodeLength; i++) { fullNodeDataModel=value.fullDataNodesMode.nodesArrayCollection.getItemAt(i) as FullNodeDataModel; map=new NeMap; map.initMap(dataModelService.fullNodeDataModel2MapModel(fullNodeDataModel)); mapBackup.addItem(map); fullNodeDataModel=null; map=null; } var lineLength:int=value.fullDataLinesModel.linesArrayCollection.length; var mapBackupLength:int=mapBackup.length; for (var i:int=0; i < lineLength; i++) { fullLineDataModel=value.fullDataLinesModel.linesArrayCollection.getItemAt(i) as FullLineDataModel; var startMap:NeMap; var endMap:NeMap; for (var j:int=0; j < mapBackupLength; j++) { startMap=mapBackup.getItemAt(j) as NeMap; if (fullLineDataModel.start == startMap.neMapModel.id) { break; } } for (var j:int=0; j < mapBackupLength; j++) { endMap=mapBackup.getItemAt(j) as NeMap; if (fullLineDataModel.end == endMap.neMapModel.id) { break; } } var lineModel:NeLineModel=dataModelService.fullLineDataModel2LineModel(fullLineDataModel); lineModel.setPoint(startMap,endMap); line=new ExpanLine(lineModel); this.addChild(line.getLine()); startMap.setLine(line,true); endMap.setLine(line,false); lineBackup.addItem(line); fullLineDataModel=null; } for (var i:int=0; i < mapBackupLength; i++) { map=mapBackup.getItemAt(i) as NeMap; this.addChild(map); map=null; } SingletonModel.getInstance().mapBackup=mapBackup; SingletonModel.getInstance().lineBackup=lineBackup; this.completeLoading(); value=null; } public function fullCreate():void { this.completeLoading(); } public function showText():Canvas { tipLabel.text="123"; // tipLabel.x=this.width-tipLabel.width; // tipLabel.y=this.height-tipLabel.height; tipLabel.x=0; tipLabel.y=0; this.addChild(tipLabel); return this; } public function hideText():void { this.removeChild(tipLabel); } ]]--> </mx:Script> </BaseTopoViewCanvas> ?

?

?里面包括画线等特性了?