基于ESRIFlexViewer框架的ArcGISServer開發

ESRIChinaBeijing內容概要框架結構FlexBuilderProject設置Widget開發部署SampleFlexViewer核心編程FlexViewer和Widget部署應用案例軟件需求AdobeFlex3BuilderStandardEditorAdobeSDK（可選，如果沒有FlexBuilder）ArcGISAPIforFlexSampleFlexViewer例程生命周期FlashPlayer通過加載和運行容器flash文件，在瀏覽器里啟動FlexViewer應用程序.2.TheFlexViewercontainer從webserver加載XML配置文件和皮膚flash文件應用于整個應用程序.3基于配置文件,容器從地圖服務器加載mapservices，比如ArcGISOnline或ArcGIS9.3servers.容器同時也構建并且在控制條上顯示菜單和來自配置文件的標記信息。4.containerwidgetmanager根據在配置文件中指定的URLs加載widgetflashfiles.5.用戶操作widgets運行各種業務邏輯.MenuControlMenuControlSampleFlexViewerContainerContainerSWFconfig.xmlSkinSWFWidgetSWFFiles

MapServicesServicesandDataFeedsSampleFlex

ViewerWebServerSampleFlexViewerContainer使設計人員擺脫地圖管理、地圖導航、應用配置、組件間的通信、數據管理等繁重復雜的編程工作，專注于核心業務功能開發。只需要在FlexViewer應用程序的配置文件中增加配置項，就可以將功能以widget的形式快速部署到已有的FlexViewer應用中。容器由一系列高粘性、低耦合組件組成。容器會把關注的任務交給相應的組件去完成。這種設計方法不但簡化了代碼維護和定制，而且縮小了模塊編寫過程中產生的阻力。Container外觀理解Widget模塊開發經過編譯的widget是一個獨立的SWF(Flash)文件，可以在FlexViewer程序中共享、移動和配置它Widget封裝了一系列獨立的業務邏輯，用戶可以在其中執行任務。一系列相互關聯的widget加上清晰定義好的業務操作流程組成了業務解決方案。而且這樣的方案可以應用于企業級的業務進程中。輕量級的FlexViewerWidget編程模型使得開發人員可以輕易定制widget，避免了將widget整合到FlexViewer應用程序中所需的底層代碼開發。開發widget的步驟IBaseWidget接口定義了一些通信方法，WidgetManager用這些方法來管理widgetBaseWidget實現這個接口

public

interfaceIBaseWidget {

functionsetId(value:Number):void;

functionsetTitle(value:String):void;

functionsetIcon(value:String):void;

functionsetConfig(value:String):void;

functionsetConfigData(value:ConfigData):void;

functionsetState(value:String):void;

functionsetMap(value:Map):void; }BaseWidgetClass所有Widget必須繼承的基類WidgetManager會驗證所有擴展了BaseWidget的MXML或AS類擴展了BaseWidget的類可被編譯為獨立的SWFpublic

classBaseWidgetextendsModuleimplementsIBaseWidget{…………public

varconfigData:ConfigData;public

varconfigXML:XML;public

varmap:Map;public

functionsetMap(value:Map):void{map=value;}

public

functionsetId(value:Number):void{widgetId=value;}WidgetManagerprivate

functionwidgetMenuClicked(event:AppEvent):void{

varid:Number=event.dataasNumber;

varlabel:String=configData.configWidgets[id].label;

varicon:String=configData.configWidgets[id].icon;

varconfig:String=configData.configWidgets[id].config;

varurl:String=configData.configWidgets[id].url;

//widgetloaded

varwidget:IBaseWidget;

if(widgetTable.containsKey(id)) { widget=widgetTable.find(id)asIBaseWidget; widget.setState(BaseWidget.STATE_MAXIMIZED); }

else {

//moduleloaded

if(moduleTable.containsKey(url)) {

widget=modInfo.factory.create()asIBaseWidget; widget.setId(id); widget.setTitle(label); widget.setIcon(icon); widget.setConfig(config); widget.setConfigData(configData); widget.setMap(map);

varwidgetDO:DisplayObject=widgetasDisplayObject; addChild(widgetDO); widgetTable.add(id,widget); }

else { loadWidget(id,url); } }} IWidgetTemplate定義了Widget和WidgetTemplate之間的操作函數在Widget中包含Template是可選的WidgetTemplate必須實現IWidgetTemplate接口public

interfaceIWidgetTemplate{

functionsetTitle(value:String):void;

functionsetIcon(value:String):void;

functionsetState(value:String):void;}

WidgetTemplateWidget模板是UI組件，為Widget提供了基本的UIlayout和行為。模板包含了類型化的windowpanel，具有自定義圖標按鈕的titlebar使用模板可以使開發者專注于業務邏輯開發。模板也可以定制，必須實現IWidgetTemplateWidget模板示例模板標題模板圖標<BaseWidgetxmlns:esri =""………… widgetConfigLoaded ="init()">private

functioninit():void{wTemplate.addTitlebarButton(ICON_URL+"i_draw.png",conditionAndResultLabel,showConditionAndResult);wTemplate.addTitlebarButton(ICON_URL+"i_measure.png",measurementsLabel,showStateMeasurements);wTemplate.addTitlebarButton(ICON_URL+"i_selectdraw.png",drawLabel,showStateDraw); }</BaseWidget>設置FlexBuilder工程步驟1:解壓縮工程包設置FlexBuilder工程步驟2:將工程導入到FlexBuilderproject設置FlexBuilder工程步驟3:BuildFlexViewer工程在FlexViewer中開發Widget步驟2:填寫新建MXML組件對話框在FlexViewer中開發Widget步驟3:將MyFirstWidget

加到FlexBuilderProjectModule列表這一步至關重要，將確保FlexBuilder把widget編譯成單獨的SWF文件設置測試服務默認情況下，flexbuilder使用默認瀏覽器從debug-bin目錄下直接加載html，url如下：

這種測試方法不可取，應該設置http服務作為部署環境設置測試服務步驟1:創建IIS虛擬目錄虛擬目錄應該指向flex的debug-bin目錄設置測試服務步驟2:使用創建的虛擬目錄配置flex工程編寫Widget使用WidgetTemplate模板訪問Map在Map上顯示Widget數據從Map接收數據(點擊,畫線,等.)在Widget中控制導航開發無模板的Widget開發自定義WidgetTemplate修改或創建

新ThemeWidget配置使用WidgetTemplate<BaseWidgetxmlns:esri ="" xmlns:mx="" widgetConfigLoaded="init()"><WidgetTemplateid="wTemplate">

</WidgetTemplate></BaseWidget><BaseWidgetxmlns:esri ="" xmlns:mx="" widgetConfigLoaded="init()"></BaseWidget>使用WidgetTemplate第一步:將widget加到config.xml文件中第二步:保存文件并且編譯工程第三步:運行FlexViewer應用程序<widgetlabel="MyFirstWidget"icon="com/esri/solutions/flexviewer/assets/images/icons/i_globe.png"menu="menuWidgets">mywidgets/MyFirstWidget.swf</widget>第四步:從菜單按鈕點擊MyFirstWidget訪問MapFlexViewer是以地圖為中心的應用，程序初始化后widget就可以訪問到map服務BaseWidget類中定義了Map變量，Widget加載后，widgetmanger就會將當前活動map對象傳遞給widget對象所有BaseWidget的派生類可以直接訪問map對象訪問Mappublic

classBaseWidgetextendsModuleimplementsIBaseWidget{…………public

varconfigData:ConfigData;public

varconfigXML:XML;public

varmap:Map;public

functionsetMap(value:Map):void{map=value;}private

functionwidgetMenuClicked(event:AppEvent):void{

if(widgetTable.containsKey(id)) { }

else {

if(moduleTable.containsKey(url)) { widget.setMap(map); } }}

訪問地圖-示例<?xmlversion="1.0"encoding="utf-8"?><BaseWidgetxmlns="com.esri.solutions.flexviewer.*"xmlns:mx=""><mx:Script><![CDATA[importcom.esri.ags.geometry.MapPoint;privatefunctioncenterMap():void{varpoint:MapPoint=newMapPoint(-118.24799,33.975004);map.centerAt(point);}]]></mx:Script><WidgetTemplateid="widgetTemplate"><mx:Buttonclick="centerMap()"label=”RecenterMap”/></WidgetTemplate></BaseWidget>在Map上顯示Widget數據AddGraphicsLayer<?xmlversion="1.0"encoding="utf-8"?><BaseWidgetx="600"y="300"xmlns:esri=""xmlns="com.esri.solutions.flexviewer.*"xmlns:mx=""xmlns:mxeffects="com.adobe.ac.mxeffects.*"xmlns:widgets="com.esri.solutions.flexviewer.widgets.*"widgetConfigLoaded="init()"><mx:Script><![CDATA[…privatefunctioninit():void{graphicPointSym=newPictureMarkerSymbol(widgetIcon,30,30)graphicsLayer=newGraphicsLayer();graphicsLayer.symbol=graphicPointSym;map.addLayer(graphicsLayer);…

推薦每一個Widget創建一個GraphicsLayer GraphicsLayer在Map上顯示Widget數據當Widget打開/最小化時，顯示/關閉GraphicsLayer<WidgetTemplateid="wTemplate"widgetClosed="widgetClosedHandler(event)"widgetOpened="widgetOpenedHandler(event)">…privatefunctionwidgetClosedHandler(event:Event):void{graphicsLayer.visible=false;}privatefunctionwidgetOpenedHandler(event:Event):void{graphicsLayer.visible=true;}從Map接收數據(點擊、畫線等)Widget可能需要接收來自Map的數據，如用戶與Map交互操作產生的點、線、面數據Widget模型通過內嵌的setMapAction函數接收數據privatefunctionactivateTool():void{setMapAction(Draw.POINT,"ClickPoint",drawEnd);}privatefunctiondrawEnd(event:DrawEvent):void{vargeom:Geometry=event.geometry;varpt:MapPoint=geomasMapPointAlert.show("Clicklocation:"+pt.x+","+pt.y);}setMapAction(BaseWidget.as)public

functionsetMapAction(action:String,status:String,callback:Function):void{

vardata:Object= { tool:action, status:status, handler:callback }SiteContainer.dispatchEvent(newAppEvent(AppEvent.SET_MAP_ACTION,false,false,data)); }action:Draw.EXTENTDraw.MAPPOINTDraw.LINEDraw.POLYLINE Draw.POLYGONDraw.MULTIPOINTDraw.FREEHAND_POLYLINE Draw.FREEHAND_POLYGONStatus：控制條上顯示的狀態信息callback:畫操作完成后MapManager調用的操作在Widget中控制導航可能需要在widget中控制地圖的導航，如關閉widget時關閉graphics圖層顯示并且使地圖處于Pan模式<WidgetTemplateid="wTemplate"widgetClosed="widgetClosedHandler(event)"…privatefunctionwidgetClosedHandler(event:Event):void{graphicsLayer.visible=false;setMapNavigation(Navigation.PAN,“PanMap”);}在Widget中控制導航setMapNavigation(BaseWidget.as)public

functionsetMapNavigation(navMethod:String,status:String):void{

vardata:Object={ tool:navMethod, status:status } SiteContainer.dispatchEvent(newAppEvent(AppEvent.SET_MAP_NAVIGATION,false,false,data));}navMethod:Navigation.PANNavigation.ZOOM_INNavigation.ZOOM_OUT SiteContainer.NAVIGATION_ZOOM_FULL SiteContainer.NAVIGATION_ZOOM_PREVIOUS SiteContainer.NAVIGATION_ZOOM_NEXTstatus:控制條上顯示的狀態信息開發無模板的widget模板不是必須的，如顯示一個時鐘<BaseWidgetxmlns="com.esri.solutions.flexviewer.*"xmlns:mx="”><mx:SWFLoadersource="mywidgets/clock.swf"/></BaseWidget>開發自定義WidgetTemplate自定義widgetTemplate必須實現iwidgetTemplate接口，即實現接口中的setTitle,setIcon和setState函數<?xmlversion="1.0"encoding="utf-8"?><mx:TitleWindowxmlns:mx=""layout="vertical"width="400"height="300"implements="com.esri.solutions.flexviewer.IWidgetTemplate"><mx:Script><![CDATA[publicfunctionsetTitle(value:String):void{this.title=value;}publicfunctionsetIcon(value:String):void{}publicfunctionsetState(value:String):void{}]]></mx:Script></mx:TitleWindow><?xmlversion="1.0"encoding="utf-8"?><BaseWidgetxmlns="com.esri.solutions.flexviewer.*"xmlns:mx=""xmlns:mywidgets="mywidgets.*"><mywidgets:MyTemplate><mx:Buttonlabel="Hello,World!"/></mywidgets:MyTemplate></BaseWidget>修改或創建新主題(皮膚)FlexViewer的外觀可被定制或修改主題(皮膚)和程序代碼分離默認主題：DarkAngel，采用標準webCSS文件構建

，可被編譯成獨立的SWF文件，在config.xml配置文件中指定，并且在運行時動態加載它<logo>com/esri/solutions/flexviewer/assets/images/logo.png</logo><stylesheet>com/esri/solutions/flexviewer/themes/darkangel/style.swf</stylesheet><menus>…………創建主題步驟1:修改DarkAngelCSS文件或新建CSS文件2:修改或替換iconimages3:編譯CSS文件為SWF文件4:將新主題的URL放到 Config.xml文件Widget內容配置每個widget可以有自己的配置文件配置文件的位置在config.xml中指定WidgetManager將widget配置文件的url傳遞給BaseWidget，BaseWidget加載并解析xml配置文件，保存為一個configXML變量(一個XML類型的AS變量)Widget加載完后可以直接訪問configXML變量<widgetlabel="ANewWidget"icon="urlpath/myicon.png"menu="menuWidgets"config=”youconfig.xml”>relative/urlpath/MyNewWidget.swf</widget>Widget配置文件示例<?xmlversion="1.0"?><configuration> <geometryservice></geometryservice> <spatialref>32618</spatialref> <distanceunits> <distanceunitabbr="km"conversion=".001">千米</distanceunit> <distanceunitabbr="m"conversion="1">米</distanceunit> </distanceunits> <areaunits> <areaunitabbr="sqm"conversion="1">SquareMeters</areaunit> <areaunitabbr="sqkm"conversion="0.000001">SquareKilometers</areaunit> <areaunitabbr="sqft"conversion="10.763910417">SquareFeet</areaunit> <areaunitabbr="sqmi"conversion="0.21">SquareMiles</areaunit> <areaunitabbr="ac"conversion="0.147">Acres</areaunit> <areaunitabbr="ha"conversion="0.0001">Hectares</areaunit> </areaunits> <layers> <layer> <name>PolutionSources</name> <url></url> <expression>RegionCode='[value]'</expression> <graphicalsearchlabel></graphicalsearchlabel> <fields>PSName,PSCode,RegionCode</fields> </layer> </layers></configuration>操作FlexViewer核心代碼FlexViewer容易定制和擴展體現了兩種設計原則：高內聚(highcohesion)低耦合(lowcoupling)ContainerEventBus和依賴注入DependenceInjection(DI)ContainerEventBus全局的eventdispatcher用于各個組件之間通信（消息傳遞）在EventBus.as類中定義，在SiteContainer容器類中可訪問ContainerEventBuspublic

functioninit():void{ _container=this; _lock=true;//makesureonlyonecontaineriscreated. initLogging();

//makesuretheeventbusisready. _containerEventDispatcher=EventBus.getInstance();

//preparetoshowerrormessage SiteContainer.addEventListener(AppEvent.APP_ERROR,showError);

//tellthemodulesit'sonbusiness. SiteContainer.dispatch(SiteContainer.CONTAINER_INITIALIZED);}public

static

functionaddEventListener(type:String, listener:Function,useCapture:Boolean=false, priority:int=0,useWeakReference:Boolean=false):void

{ EventBus.getInstance().addEventListener(type,listener, useCapture,priority,useWeakReference);}

public

functionConfigManager(){super();//makesurethecontainerisproperlyinitializedandthen

//proceedwithconfigurationinitialization. SiteContainer.addEventListener(SiteContainer.CONTAINER_INITIALIZED,init);}Configdata通過EventBus在組件之間傳遞public

functioninit(event:Event):void{ configLoad();}//configloadprivate

functionconfigLoad():void{

varconfigService:HTTPService=newHTTPService(); configService.url="config.xml"; configService.resultFormat="e4x"; configService.addEventListener(ResultEvent.RESULT,configResult); configService.addEventListener(FaultEvent.FAULT,configFault); configService.send();}//configresultprivate

functionconfigResult(event:ResultEvent):void{

try {

//parseconfig.xmltocreateconfigdataobject

varconfigData:ConfigData=newConfigData(); ………… //dispatchevent SiteContainer.dispatchEvent(new AppEvent(AppEvent.CONFIG_LOADED,false,false,configData));}Configdata通過EventBus在組件之間傳遞privatefunctioninit():void{SiteContainer.addEventListener(ConfigEvent.CONFIG_LOADED,config);…}MapManager、WidgetManager等WidgetManager中的DIprivate

functionwidgetReadyHandler(event:ModuleEvent):void{

varinfo:IModuleInfo=event.module; moduleTable.add(info.url,info);

varid:Number=info.data.id;

varlabel:String=configData.configWidgets[id].label;

varicon:String=configData.configWidgets[id].icon;

varconfig:String=configData.configWidgets[id].config;

varwidget:IBaseWidget=info.factory.create()asIBaseWidget; widget.setId(id); widget.setTitle(label); widget.setIcon(icon); widget.setConfig(config); widget.setConfigData(configData); widget.setMap(map); widgetTable.add(id,widget);

varwidgetDO:DisplayObject=widgetasDisplayObject; addChild(widgetDO);

this.cursorManager.removeBusyCursor();}

國際化和java類似，Flex可以采用.properties文件實現國際化使用flex的mx.resources.ResourceBundle類來讀取properties文件properties文件須使用UTF-8編碼FlexViewer中的國際化步驟1:增加編譯參數-locale如下FlexViewer中的國際化步驟2:添加internationalization目錄到BuildSourcepathFlexViewer中的國際化步驟3：創建國際語言的resource文件close=Closemi