《基于ESRIFlexViewer框架的ArcGISServer开发课件》由会员分享，可在线阅读，更多相关《基于ESRIFlexViewer框架的ArcGISServer开发课件（78页珍藏版）》请在金锄头文库上搜索。
1、基于基于ESRI Flex Viewer框架的框架的ArcGIS Server开发开发ESRI China Beijing内容概要内容概要框架结构框架结构框架结构框架结构Flex Builder ProjectFlex Builder Project设设置置置置WidgetWidget开开开开发发部署部署部署部署 Sample Flex Viewer Sample Flex Viewer核心核心核心核心编编程程程程Flex Viewer 和和Widget 部署部署应用案例应用案例软件需求软件需求vAdobe Flex3 Builder Standard Editor vAdobe SDK（可选
2、，如果没有（可选，如果没有Flex Builder）vArcGIS API for FlexFlex Viewer框架结构框架结构Flex ViewerLaptop MobileHand MobileArcGIS OnlineArcGIS Server其他Service和FeedSample Flex Viewer例程生命周期例程生命周期vFlash Player 通过加载和运行容器flash文件，在浏览器里启动Flex Viewer 应用程序.v2. The Flex Viewer container 从web server加载XML配置文件和皮肤flash文件应用于整个应用程序.v3基于配
3、置文件, 容器从地图服务器加载map services，比如 ArcGIS Online 或ArcGIS 9.3 servers. 容器同时也构建并且在控制条上显示菜单和来自配置文件的标记信息。v4. container widget manager根据在配置文件中指定的 URLs加载widget flash files.v5. 用户操作widgets 运行各种业务逻辑.Menu ControlMenu ControlSample Flex Viewer ContainerContainer SWF config.xml Skin SWF Widget SWF Files 12345Map S
4、ervicesServices and Data FeedsSample Flex Viewer Web ServerSample Flex Viewer Containerv使设计人员摆脱地图管理、地图导航、应用配置、组件间的通信、数据管理等繁重复杂的编程工作，专注于核心业务功能开发。v只需要在Flex Viewer应用程序的配置文件中增加配置项，就可以将功能以widget的形式快速部署到已有的Flex Viewer应用中。v容器由一系列高粘性、低耦合组件组成。容器会把关注的任务交给相应的组件去完成。这种设计方法不但简化了代码维护和定制，而且缩小了模块编写过程中产生的阻力。Sample Fl
5、ex Viewer ContainerContainer外观外观理解理解Widget模块开发模块开发v经过编译的widget是一个独立的SWF(Flash)文件，可以在Flex Viewer程序中共享、移动和配置它vWidget封装了一系列独立的业务逻辑，用户可以在其中执行任务。v一系列相互关联的widget加上清晰定义好的业务操作流程组成了业务解决方案。而且这样的方案可以应用于企业级的业务进程中。v轻量级的Flex Viewer Widget编程模型使得开发人员可以轻易定制widget，避免了将widget整合到Flex Viewer应用程序中所需的底层代码开发。开发开发widget的步骤的
6、步骤Widget模型的内容模型的内容vIBaseWidget Interface (IBaseWidget.as)vBaseWidget Class (BaseWidget.as)vIWidgetTemplate (IWidgetTemplate.as)vWidgetTemplate (WidgetTeamplate.mxml)IBaseWidget接口接口v定义了一些通信方法，WidgetManager用这些方法来管理widgetvBaseWidget实现这个接口public interface IBaseWidgetfunction setId(value:Number):void;fun
7、ction setTitle(value:String):void;function setIcon(value:String):void;function setConfig(value:String):void;function setConfigData(value:ConfigData):void;function setState(value:String):void;function setMap(value:Map):void;BaseWidget Classv所有Widget必须继承的基类vWidgetManager会验证所有扩展了BaseWidget的MXML或AS类v扩展了
8、BaseWidget的类可被编译为独立的SWFpublic class BaseWidget extends Module implements IBaseWidget public var configData:ConfigData; public var configXML:XML; public var map:Map; public function setMap(value:Map):void map = value; public function setId(value:Number):void widgetId = value; WidgetManagerprivate fun
9、ction widgetMenuClicked(event:AppEvent):voidvar id:Number = event.data as Number;var label:String = configData.configWidgetsid.label;var icon:String = configData.configWidgetsid.icon;var config:String = configData.configWidgetsid.config;var url:String = configData.configWidgetsid.url; /widget loaded
10、 var widget:IBaseWidget;if (widgetTable.containsKey(id) widget = widgetTable.find(id) as IBaseWidget;widget.setState(BaseWidget.STATE_MAXIMIZED); else /module loadedif (moduleTable.containsKey(url) widget = modInfo.factory.create() as IBaseWidget; widget.setId(id); widget.setTitle(label); widget.set
11、Icon(icon); widget.setConfig(config); widget.setConfigData(configData); widget.setMap(map); var widgetDO:DisplayObject = widget as DisplayObject;addChild(widgetDO); widgetTable.add(id, widget);else loadWidget(id, url); private function loadWidget(id:Number, url:String):voidinfo = ModuleManager.getMo
12、dule(url);info.data = id: id;info.addEventListener(ModuleEvent.READY, widgetReadyHandler); info.load();this.cursorManager.setBusyCursor(); private function widgetReadyHandler(event:ModuleEvent):voidvar info:IModuleInfo = event.module;moduleTable.add(info.url, info);var id:Number = info.data.id;var l
13、abel:String = configData.configWidgetsid.label;var icon:String = configData.configWidgetsid.icon;var config:String = configData.configWidgetsid.config;var widget:IBaseWidget = info.factory.create() as IBaseWidget;widget.setId(id);widget.setTitle(label);widget.setIcon(icon);widget.setConfig(config);w
14、idget.setConfigData(configData);widget.setMap(map);widgetTable.add(id, widget);var widgetDO:DisplayObject = widget as DisplayObject;addChild(widgetDO);this.cursorManager.removeBusyCursor(); IWidgetTemplatev定义了Widget和Widget Template之间的操作函数v在Widget中包含Template是可选的vWidget Template必须实现IWidgetTemplate接口pu
15、blic interface IWidgetTemplatefunction setTitle(value:String):void;function setIcon(value:String):void;function setState(value:String):void;WidgetTemplatevWidget模板是UI组件，为Widget提供了基本的UI layout和行为。v模板包含了类型化的window panel，具有自定义图标按钮的title barv使用模板可以使开发者专注于业务逻辑开发。v模板也可以定制，必须实现IWidgetTemplateWidget模板示例模板示例
16、模板标题模板标题模板图标模板图标private function init():voidwTemplate.addTitlebarButton(ICON_URL + i_draw.png, conditionAndResultLabel, showConditionAndResult);wTemplate.addTitlebarButton(ICON_URL + i_measure.png, measurementsLabel, showStateMeasurements);wTemplate.addTitlebarButton(ICON_URL + i_selectdraw.png, dra
17、wLabel, showStateDraw); 设置设置Flex Builder工程工程v步骤步骤 1: 解压缩工程包解压缩工程包设置设置Flex Builder工程工程v步骤步骤 2: 将工程导入到将工程导入到 Flex Builder project设置设置Flex Builder工程工程v步骤步骤 3: Build Flex Viewer工程工程在在Flex Viewer中开发中开发Widgetv步骤步骤1: 新建新建MXML class： MyFirstWidget.mxml在在Flex Viewer中开发中开发Widgetv步骤步骤 2: 填写新建填写新建MXML组件对话框组件对话框
18、在在Flex Viewer中开发中开发Widgetv步骤步骤 3: 将将MyFirstWidget 加到加到Flex Builder Project Module列表列表这一步至关重要，将确保Flex Builder把widget编译成单独的SWF文件在在Flex Viewer中开发中开发Widgetv步骤步骤 4. 编译编译Widget方案的好处方案的好处v不需要为widget新建另外的Flex Builder工程v编译的时候，widget将自动被优化。这会减小widget文件的大小，优化加载运行widget的性能设置测试服务设置测试服务v默认情况下，flex builder使用默认浏览器从
19、debug-bin目录下直接加载html，url如下： v这种测试方法不可取，应该设置http服务作为部署环境设置测试服务设置测试服务v步骤步骤1: 创建创建IIS 虚拟目录虚拟目录虚拟目录应该指向flex的debug-bin目录设置测试服务设置测试服务v步骤步骤2: 使用创建的虚拟目录配置使用创建的虚拟目录配置flex工程工程编写编写Widgetv使用使用WidgetTemplate模板模板v访问访问 Mapv在在Map上显示上显示Widget数据数据v从从Map接收数据接收数据 (点击点击, 画线画线, 等等.)v在在Widget中控制导航中控制导航v开发无模板的开发无模板的 Widget
20、 v开发自定义开发自定义Widget Templatev修改或创建修改或创建 新新ThemevWidget 配置配置使用使用WidgetTemplate 使用使用WidgetTemplatev第一步第一步: 将将widget 加到加到config.xml 文件中文件中v第二步第二步: 保存文件并且编译工程保存文件并且编译工程v第三步第三步: 运行运行Flex Viewer 应用程序应用程序mywidgets/MyFirstWidget.swfv第四步第四步: 从菜单按钮点击从菜单按钮点击My First Widget访问访问MapvFlex Viewer是以地图为中心的应用，程序初始化后wid
21、get就可以访问到map服务vBaseWidget类中定义了Map变量，Widget加载后，widget manger就会将当前活动map对象传递给widget对象v所有BaseWidget的派生类可以直接访问map对象访问访问Mappublic class BaseWidget extends Module implements IBaseWidget public var configData:ConfigData; public var configXML:XML; public var map:Map; public function setMap(value:Map):void ma
22、p = value; private function widgetMenuClicked(event:AppEvent):voidif (widgetTable.containsKey(id) else if (moduleTable.containsKey(url) widget.setMap(map); 访问地图访问地图-示例示例在在Map上显示上显示Widget数据数据vAdd Graphics Layer!CDATAprivate function init():voidgraphicPointSym = new PictureMarkerSymbol(widgetIcon, 30,
23、 30)graphicsLayer = new GraphicsLayer();graphicsLayer.symbol = graphicPointSym;map.addLayer(graphicsLayer); 推荐每一个推荐每一个Widget创建一个创建一个GraphicsLayer GraphicsLayer在在Map上显示上显示Widget数据数据v当当Widget 打开打开/最小化时，显示最小化时，显示/关闭关闭 Graphics Layerprivate function widgetClosedHandler(event:Event):voidgraphicsLayer.vis
24、ible = false;private function widgetOpenedHandler(event:Event):voidgraphicsLayer.visible = true;从从Map接收数据接收数据 (点击、画线等点击、画线等)vWidget可能需要接收来自Map的数据，如用户与Map交互操作产生的点、线、面数据vWidget模型通过内嵌的setMapAction函数接收数据private function activateTool():voidsetMapAction(Draw.POINT, Click Point, drawEnd);private function d
25、rawEnd(event:DrawEvent):voidvar geom:Geometry = event.geometry;var pt:MapPoint = geom as MapPointAlert.show(Click location: + pt.x + , + pt.y);vsetMapAction(BaseWidget.as)public function setMapAction(action:String, status:String, callback:Function):void var data:Object = tool: action, status: status
26、, handler: callback SiteContainer.dispatchEvent(new AppEvent(AppEvent.SET_MAP_ACTION, false, false, data);action: Draw.EXTENT Draw.MAPPOINT Draw.LINE Draw.POLYLINE Draw.POLYGON Draw.MULTIPOINT Draw.FREEHAND_POLYLINE Draw.FREEHAND_POLYGON Status：控制条上显示的状态信息callback:画操作完成后Map Manager调用的操作在在Widget中控制导航
27、中控制导航v可能需要在widget中控制地图的导航，如关闭widget时关闭graphics图层显示并且使地图处于Pan模式WidgetTemplate id=wTemplate widgetClosed=widgetClosedHandler(event)private function widgetClosedHandler(event:Event):voidgraphicsLayer.visible = false;setMapNavigation(Navigation.PAN, “Pan Map”);在在Widget中控制导航中控制导航vsetMapNavigation(BaseWid
28、get.as)public function setMapNavigation(navMethod:String, status:String):voidvar data:Object = tool: navMethod, status: statusSiteContainer.dispatchEvent(new AppEvent(AppEvent.SET_MAP_NAVIGATION, false, false, data);navMethod:Navigation.PAN Navigation.ZOOM_IN Navigation.ZOOM_OUT SiteContainer.NAVIGA
29、TION_ZOOM_FULL SiteContainer.NAVIGATION_ZOOM_PREVIOUS SiteContainer.NAVIGATION_ZOOM_NEXTstatus:控制条上显示的状态信息开发无模板的开发无模板的widgetv模板不是必须的，如显示一个时钟 开发自定义开发自定义Widget Templatev自定义widget Template必须实现iwidgetTemplate接口，即实现接口中的setTitle, setIcon 和 setState函数修改或修改或创创建新主建新主题题(皮肤皮肤)vFlex Viewer的外观可被定制或修改v主题(皮肤)和程序代码
30、分离v默认主题：Dark Angel，采用标准web CSS文件构建 ，可被编译成独立的SWF文件，在config.xml配置文件中指定，并且在运行时动态加载它com/esri/solutions/flexviewer/assets/images/logo.pngcom/esri/solutions/flexviewer/themes/darkangel/style.swf 创创建主建主题题步步骤骤v1: 修改修改DarkAngel CSS 文件或新建文件或新建CSS文件文件v2: 修改或替修改或替换icon imagesv3: 编译CSS 文件文件为SWF 文件文件v4: 将新主将新主题的的
31、URL 放到放到Config.xml文件文件Widget内容配置内容配置v每个widget可以有自己的配置文件v配置文件的位置在config.xml中指定vWidget Manager将widget配置文件的url传递给BaseWidget，BaseWidget加载并解析xml配置文件，保存为一个configXML变量(一个XML类型的AS变量)vWidget加载完后可以直接访问configXML变量relative/urlpath/MyNewWidget.swfWidget配置文件示例配置文件示例32618千米米Square MetersSquare KilometersSquare Fee
32、tSquare MilesAcresHectaresPolution SourcesRegionCode=valuePSName,PSCode,RegionCode操作操作Flex Viewer核心代核心代码码vFlex Viewer容易定制和扩展v体现了两种设计原则：高内聚(high cohesion)低耦合(low coupling)vContainer Event Bus 和依赖注入Dependence Injection (DI)Container Event Busv全局的event dispatcherv用于各个组件之间通信（消息传递）v在EventBus.as类中定义，在Site
33、Container容器类中可访问Container Event Buspublic function init():void_container = this;_lock = true; /make sure only one container is created.initLogging();/make sure the event bus is ready._containerEventDispatcher = EventBus.getInstance();/prepare to show error messageSiteContainer.addEventListener(AppEv
34、ent.APP_ERROR, showError);/tell the modules its on business.SiteContainer.dispatch(SiteContainer.CONTAINER_INITIALIZED);public static function addEventListener(type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false):void EventBus.getInstance().addEve
35、ntListener(type, listener, useCapture, priority, useWeakReference);public function ConfigManager() super(); /make sure the container is properly initialized and then /proceed with configuration initialization. SiteContainer.addEventListener(SiteContainer.CONTAINER_INITIALIZED, init);Config data通过Eve
36、ntBus在组件之间传递public function init(event:Event):voidconfigLoad();/config loadprivate function configLoad():voidvar configService:HTTPService = new HTTPService();configService.url = config.xml;configService.resultFormat = e4x;configService.addEventListener(ResultEvent.RESULT, configResult);configServic
37、e.addEventListener(FaultEvent.FAULT, configFault);configService.send();/config resultprivate function configResult(event:ResultEvent):voidtry/parse config.xml to create config data objectvar configData:ConfigData = new ConfigData();/dispatch eventSiteContainer.dispatchEvent(new AppEvent(AppEvent.CON
38、FIG_LOADED, false, false, configData);Config data通过EventBus在组件之间传递private function init():voidSiteContainer.addEventListener(ConfigEvent.CONFIG_LOADED, config);MapManager、WidgetManager等WidgetManager中的中的DIprivate function widgetReadyHandler(event:ModuleEvent):voidvar info:IModuleInfo = event.module;m
39、oduleTable.add(info.url, info);var id:Number = info.data.id;var label:String = configData.configWidgetsid.label;var icon:String = configData.configWidgetsid.icon;var config:String = configData.configWidgetsid.config; var widget:IBaseWidget = info.factory.create() as IBaseWidget;widget.setId(id);widg
40、et.setTitle(label);widget.setIcon(icon);widget.setConfig(config);widget.setConfigData(configData);widget.setMap(map);widgetTable.add(id, widget);var widgetDO:DisplayObject = widget as DisplayObject;addChild(widgetDO);this.cursorManager.removeBusyCursor(); 国国际际化化v和java类似，Flex可以采用.properties文件实现国际化v使用
41、flex的mx.resources.ResourceBundle类来读取properties文件vproperties文件须使用UTF-8编码Flex Viewer中的国中的国际际化化v步步骤1: 增加增加编译参数参数-locale如下如下Flex Viewer中的国中的国际际化化v步步骤2: 添加添加internationalization 目目录到到Build Source pathFlex Viewer中的国中的国际际化化v步步骤3：创建国建国际语言的言的resource文件文件close=Closeminimize=Minimizeclose=u5927u5bb6u597duff01m
42、inimize=u6b22u8fceuff01Flex Viewer中的国中的国际际化化v步步骤4: 在代在代码中使用国中使用国际化化ResourceBundle(WidgetTemplateStrings)private function nlsString(nlsToken:String):Stringreturn resourceManager.getString(WidgetFrameStrings, nlsToken);addTitlebarButton(com/esri/solutions/flexviewer/assets/images/widget/w_delete.png,
43、nlsString(close), closeWidget);addTitlebarButton(com/esri/solutions/flexviewer/assets/images/widget/w_min.png, nlsString(minimize), minimizeWidget);资源绑定本地化本地化设设置置v使用配置文件来本地化，以覆盖默认语言设置。如LiveMapsWidget.xml：图层可见性图层透明度部署部署 Widgetv1: 拷拷贝widget SWF 文件到一个固定位置文件到一个固定位置v2: 修改修改 Flex Viewer 的的config.xml文件文件v3
44、: 刷新刷新Flex Viewer applicationrelative/urlpath/MyNewWidget.swfurlpath/MyNewWidget.swf安全性考安全性考虑虑v访问网网络资源，安全沙箱限制源，安全沙箱限制vcrossdomain.xml文件放置在Web Server root目录下应应用案例用案例交大长天交大长天污染源监控信息系统污染源监控信息系统长长天天现现状状v原先已经建立了一套环境监测信息系统（Flex）v原系统属于MIS系统，没有空间信息v开发了重点污染源监控GIS系统（.Net ADF）v将来还需要开发一系列GIS系统地理信息地理信息地理信息地理信息共享平台共享平台共享平台共享平台环境监测业务系统污污染源染源染源染源业务业务系系系系统统环环境境监测监测GISGIS系系统统污污染源染源染源染源监监控控控控GISGIS系系系系统统结论结论与思考与思考v框架提供了地图管理、地图导航、应用配置、组件间的通信、数据管理等底层功能，使设计人员摆脱繁重工作量，专注于核心业务功能开发。v整个架构采用高内聚(high cohesion)低耦合(low coupling)设计原则。v本框架适合业务流程不是特别复杂、进度要求紧的项目开发v框架开发形式较为单一，但在本框架基础上可快速进行扩展
