基于ESRI Flex Viewer框架的ArcGIS Server开发课件

基于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