《基于ESRI_Flex_Viewer框架的ArcGIS_Server开发》由会员分享，可在线阅读，更多相关《基于ESRI_Flex_Viewer框架的ArcGIS_Server开发（78页珍藏版）》请在金锄头文库上搜索。
1、基于ESRI Flex Viewer框架的 ArcGIS Server开发赵万锋 ESRI China Beijing内容概要框架结构Flex Builder Project设设置Widget开发发部署Sample Flex Viewer核心编编程Flex Viewer 和Widget 部署应用案例软件需求vAdobe Flex3 Builder Standard Editor vAdobe SDK（可选，如果没有Flex Builder）vArcGIS API for FlexFlex Viewer框架结构Flex ViewerLaptop MobileHand MobileArcGIS O
2、nlineArcGIS Server其他Service和FeedSample Flex Viewer例程生命周期vFlash Player 通过加载和运行容器flash文件，在浏览 器里启动Flex Viewer 应用程序. v2. The Flex Viewer container 从web server加载XML 配置文件和皮肤flash文件应用于整个应用程序. v3基于配置文件, 容器从地图服务器加载map services ，比如 ArcGIS Online 或ArcGIS 9.3 servers. 容器同 时也构建并且在控制条上显示菜单和来自配置文件的 标记信息。 v4. conta
3、iner widget manager根据在配置文件中指定 的 URLs加载widget flash files. v5. 用户操作widgets 运行各种业务逻辑.Menu ControlMenu Control Sample Flex Viewer ContainerContainer SWF config.xml Skin SWF Widget SWF Files 12345Map ServicesServices and Data FeedsSample Flex Viewer Web ServerSample Flex Viewer Containerv使设计人员摆脱地图管理、地图导
4、航、应用配置 、组件间的通信、数据管理等繁重复杂的编程工 作，专注于核心业务功能开发。 v只需要在Flex Viewer应用程序的配置文件中增加 配置项，就可以将功能以widget的形式快速部署 到已有的Flex Viewer应用中。 v容器由一系列高粘性、低耦合组件组成。容器会 把关注的任务交给相应的组件去完成。这种设计 方法不但简化了代码维护和定制，而且缩小了模 块编写过程中产生的阻力。Sample Flex Viewer ContainerContainer外观理解Widget模块开发v经过编译的widget是一个独立的SWF(Flash)文件 ，可以在Flex Viewer程序中共享、
5、移动和配置它 vWidget封装了一系列独立的业务逻辑，用户可以 在其中执行任务。 v一系列相互关联的widget加上清晰定义好的业务 操作流程组成了业务解决方案。而且这样的方案 可以应用于企业级的业务进程中。 v轻量级的Flex Viewer Widget编程模型使得开发 人员可以轻易定制widget，避免了将widget整合 到Flex Viewer应用程序中所需的底层代码开发。开发widget的步骤Widget模型的内容vIBaseWidget Interface (IBaseWidget.as) vBaseWidget Class (BaseWidget.as) vIWidgetTem
6、plate (IWidgetTemplate.as) vWidgetTemplate (WidgetTeamplate.mxml)IBaseWidget接口v定义了一些通信方法，WidgetManager用这些方 法来管理widget vBaseWidget实现这个接口public interface IBaseWidget function setId(value:Number):void; function setTitle(value:String):void; function setIcon(value:String):void; function setConfig(value:S
7、tring):void; function setConfigData(value:ConfigData):void; function setState(value:String):void; function setMap(value:Map):void; BaseWidget Classv所有Widget必须继承的基类 vWidgetManager会验证所有扩展了BaseWidget的 MXML或AS类 v扩展了BaseWidget的类可被编译为独立的SWFpublic class BaseWidget extends Module implements IBaseWidget publ
8、ic var configData:ConfigData; public var configXML:XML;public var map:Map; public function setMap(value:Map):voidmap = value;public function setId(value:Number):voidwidgetId = value;WidgetManagerprivate function widgetMenuClicked(event:AppEvent):void var id:Number = event.data as Number; var label:S
9、tring = configData.configWidgetsid.label; var icon:String = configData.configWidgetsid.icon; var config:String = configData.configWidgetsid.config; var url:String = configData.configWidgetsid.url; /widget loaded var widget:IBaseWidget; if (widgetTable.containsKey(id) widget = widgetTable.find(id) as
10、 IBaseWidget; widget.setState(BaseWidget.STATE_MAXIMIZED); else /module loaded if (moduleTable.containsKey(url)widget = modInfo.factory.create() as IBaseWidget;widget.setId(id);widget.setTitle(label);widget.setIcon(icon);widget.setConfig(config);widget.setConfigData(configData);widget.setMap(map);va
11、r widgetDO:DisplayObject = widget as DisplayObject; addChild(widgetDO);widgetTable.add(id, widget); else loadWidget(id, url); private function loadWidget(id:Number, url:String):void info = ModuleManager.getModule(url); info.data = id: id; info.addEventListener(ModuleEvent.READY, widgetReadyHandler);
12、 info.load(); this.cursorManager.setBusyCursor(); private function widgetReadyHandler(event:ModuleEvent):void var info:IModuleInfo = event.module; moduleTable.add(info.url, info); var id:Number = info.data.id; var label:String = configData.configWidgetsid.label; var icon:String = configData.configWi
13、dgetsid.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); widget.setConfigData(configData); widget.setMap(map); widgetTable.add(id, widg
14、et); var widgetDO:DisplayObject = widget as DisplayObject; addChild(widgetDO); this.cursorManager.removeBusyCursor(); IWidgetTemplatev定义了Widget和Widget Template之间的操作函 数 v在Widget中包含Template是可选的 vWidget Template必须实现IWidgetTemplate接口public interface IWidgetTemplate function setTitle(value:String):void;f
15、unction setIcon(value:String):void;function setState(value:String):void; WidgetTemplatevWidget模板是UI组件，为Widget提供了基本的UI layout和行为。 v模板包含了类型化的window panel，具有自定义 图标按钮的title bar v使用模板可以使开发者专注于业务逻辑开发。 v模板也可以定制，必须实现IWidgetTemplateWidget模板示例模板标题模板图标private function init():void wTemplate.addTitlebarButton(IC
16、ON_URL + “i_draw.png“, conditionAndResultLabel, showConditionAndResult); wTemplate.addTitlebarButton(ICON_URL + “i_measure.png“, measurementsLabel, showStateMeasurements); wTemplate.addTitlebarButton(ICON_URL + “i_selectdraw.png“, drawLabel, showStateDraw);设置Flex Builder工程v步骤 1: 解压缩工程包设置Flex Builder工程v步骤 2: 将工程导入到 Flex Builder project设置Flex Builder工程v步骤 3: Buil
