基于ESRIFlexViewer框架的ArcGISServer开发.ppt

基于ESRIFlexViewer框架的ArcGISServer开发赵万锋ESRIChinaBeijing 内容概要 软件需求 AdobeFlex3BuilderStandardEditorAdobeSDK 可选 如果没有FlexBuilder ArcGISAPIforFlex FlexViewer框架结构 FlexViewer LaptopMobile HandMobile ArcGISOnline ArcGISServer 其他Service和Feed SampleFlexViewer例程生命周期 FlashPlayer通过加载和运行容器flash文件 在浏览器里启动FlexViewer应用程序 2 TheFlexViewercontainer从webserver加载XML配置文件和皮肤flash文件应用于整个应用程序 3基于配置文件 容器从地图服务器加载mapservices 比如ArcGISOnline或ArcGIS9 3servers 容器同时也构建并且在控制条上显示菜单和来自配置文件的标记信息 4 containerwidgetmanager根据在配置文件中指定的URLs加载widgetflashfiles 5 用户操作widgets运行各种业务逻辑 MenuControl SampleFlexViewerContainer ContainerSWFconfig xmlSkinSWFWidgetSWFFiles 1 2 3 4 5 MapServices ServicesandDataFeeds SampleFlexViewerWebServer SampleFlexViewerContainer 使设计人员摆脱地图管理 地图导航 应用配置 组件间的通信 数据管理等繁重复杂的编程工作 专注于核心业务功能开发 只需要在FlexViewer应用程序的配置文件中增加配置项 就可以将功能以widget的形式快速部署到已有的FlexViewer应用中 容器由一系列高粘性 低耦合组件组成 容器会把关注的任务交给相应的组件去完成 这种设计方法不但简化了代码维护和定制 而且缩小了模块编写过程中产生的阻力 SampleFlexViewerContainer Container外观 理解Widget模块开发 经过编译的widget是一个独立的SWF Flash 文件 可以在FlexViewer程序中共享 移动和配置它Widget封装了一系列独立的业务逻辑 用户可以在其中执行任务 一系列相互关联的widget加上清晰定义好的业务操作流程组成了业务解决方案 而且这样的方案可以应用于企业级的业务进程中 轻量级的FlexViewerWidget编程模型使得开发人员可以轻易定制widget 避免了将widget整合到FlexViewer应用程序中所需的底层代码开发 开发widget的步骤 Widget模型的内容 IBaseWidgetInterface IBaseWidget as BaseWidgetClass BaseWidget as IWidgetTemplate IWidgetTemplate as WidgetTemplate WidgetTeamplate mxml IBaseWidget接口 定义了一些通信方法 WidgetManager用这些方法来管理widgetBaseWidget实现这个接口 publicinterfaceIBaseWidget 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的类可被编译为独立的SWF publicclassBaseWidgetextendsModuleimplementsIBaseWidget publicvarconfigData ConfigData publicvarconfigXML XML publicvarmap Map publicfunctionsetMap value Map void map value publicfunctionsetId value Number void widgetId value WidgetManager privatefunctionwidgetMenuClicked 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 widgetloadedvarwidget IBaseWidget if widgetTable containsKey id widget widgetTable find id asIBaseWidget widget setState BaseWidget STATE MAXIMIZED else moduleloadedif 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 privatefunctionloadWidget id Number url String void info ModuleManager getModule url info data id id info addEventListener ModuleEvent READY widgetReadyHandler info load this cursorManager setBusyCursor privatefunctionwidgetReadyHandler 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 IWidgetTemplate 定义了Widget和WidgetTemplate之间的操作函数在Widget中包含Template是可选的WidgetTemplate必须实现IWidgetTemplate接口 publicinterfaceIWidgetTemplate functionsetTitle value String void functionsetIcon value String void functionsetState value String void WidgetTemplate Widget模板是UI组件 为Widget提供了基本的UIlayout和行为 模板包含了类型化的windowpanel 具有自定义图标按钮的titlebar使用模板可以使开发者专注于业务逻辑开发 模板也可以定制 必须实现IWidgetTemplate Widget模板示例 模板标题 模板图标 privatefunctioninit 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 设置FlexBuilder工程 步骤1 解压缩工程包 设置FlexBuilder工程 步骤2 将工程导入到FlexBuilderproject 设置FlexBuilder工程 步骤3 BuildFlexViewer工程 在FlexViewer中开发Widget 步骤1 新建MXMLclass MyFirstWidget mxml 在FlexViewer中开发Widget 步骤2 填写新建MXML组件对话框 在FlexViewer中开发Widget 步骤3 将MyFirstWidget加到FlexBuilderProjectModule列表 这一步至关重要 将确保FlexBuilder把widget编译成单独的SWF文件 在FlexViewer中开发Widget 步骤4 编译Widget 方案的好处 不需要为widget新建另外的FlexBuilder工程编译的时候 widget将自动被优化 这会减小widget文件的大小 优化加载运行widget的性能 设置测试服务 默认情况下 flexbuilder使用默认浏览器从debug bin目录下直接加载html url如下 file C AllESRI moxie dev FlexViewer bin debug index html这种测试方法不可取 应该设置http服务作为部署环境 设置测试服务 步骤1 创建IIS虚拟目录 虚拟目录应该指向flex的debug bin目录 设置测试服务 步骤2 使用创建的虚拟目录配置flex工程 编写Widget 使用WidgetTemplate模板访问Map在Map上显示Widget数据从Map接收数据 点击 画线 等 在Widget中控制导航开发无模板的Widget开发自定义WidgetTemplate修改或创建新ThemeWidget配置 使用WidgetTemplate 使用WidgetTemplate 第一步 将widget加到config xml文件中第二步 保存文件并且编译工程第三步 运行FlexViewer应用程序 mywidgets MyFirstWidget swf 第四步 从菜单按钮点击MyFirstWidget 访问Map FlexViewer是以地图为中心的应用 程序初始化后widget就可以访问到map服务BaseWidget类中定义了Map变量 Widget加载后 widgetmanger就会将当前活动map对象传递给widget对象所有BaseWidget的派生类可以直接访问map对象 访问Map publicclassBaseWidgetextendsModuleimplementsIBaseWidget publicvarconfigData ConfigData publicvarconfigXML XML publicvarmap Map publicfunctionsetMap value Map void map value privatefunctionwidgetMenuClicked event AppEvent void if widgetTable containsKey id else if moduleTable containsKey url widget setMap map 访问地图 示例 在Map上显示Widget数据 AddGraphicsLayer CDATA privatefunctioninit void graphicPointSym newPictureMarkerSymbol widgetIcon 30 30 graphicsLayer newGraphicsLayer graphicsLayer symbol graphicPointSym map addLayer graphicsLayer 推荐每一个Widget创建一个GraphicsLayerGraphicsLayer 在Map上显示Widget数据 当Widget打开 最小化时 显示 关闭GraphicsLayer 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 publicfunctionsetMapAction 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 POLYLINEDraw POLYGONDraw MULTIPOINTDraw FREEHAND POLYLINEDraw 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 publicfunctionsetMapNavigation 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 OUTSiteContainer NAVIGATION ZOOM FULLSiteContainer NAVIGATION ZOOM PREVIOUSSiteContainer NAVIGATION ZOOM NEXTstatus 控制条上显示的状态信息 开发无模板的widget 模板不是必须的 如显示一个时钟 开发自定义WidgetTemplate 自定义widgetTemplate必须实现iwidgetTemplate接口 即实现接口中的setTitle setIcon和setState函数 修改或创建新主题 皮肤 FlexViewer的外观可被定制或修改主题 皮肤 和程序代码分离默认主题 DarkAngel 采用标准webCSS文件构建 可被编译成独立的SWF文件 在config xml配置文件中指定 并且在运行时动态加载它 com esri solutions flexviewer assets images logo pngcom esri solutions flexviewer themes darkangel style swf 创建主题步骤 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变量 relative urlpath MyNewWidget swf Widget配置文件示例 http localhost ArcGIS rest services Geometry GeometryServer32618千米米SquareMetersSquareKilometersSquareFeetSquareMilesAcresHectaresPolutionSourceshttp localhost ArcGIS rest services ps MapServer 0RegionCode value PSName PSCode RegionCode 操作FlexViewer核心代码 FlexViewer容易定制和扩展体现了两种设计原则 高内聚 highcohesion 低耦合 lowcoupling ContainerEventBus和依赖注入DependenceInjection DI ContainerEventBus 全局的eventdispatcher用于各个组件之间通信 消息传递 在EventBus as类中定义 在SiteContainer容器类中可访问 ContainerEventBus publicfunctioninit void container this lock true makesureonlyonecontaineriscreated initLogging makesuretheeventbusisready containerEventDispatcher EventBus getInstance preparetoshowerrormessageSiteContainer addEventListener AppEvent APP ERROR showError tellthemodulesit sonbusiness SiteContainer dispatch SiteContainer CONTAINER INITIALIZED publicstaticfunctionaddEventListener type String listener Function useCapture Boolean false priority int 0 useWeakReference Boolean false void EventBus getInstance addEventListener type listener useCapture priority useWeakReference publicfunctionConfigManager super makesurethecontainerisproperlyinitializedandthen proceedwithconfigurationinitialization SiteContainer addEventListener SiteContainer CONTAINER INITIALIZED init Configdata通过EventBus在组件之间传递 publicfunctioninit event Event void configLoad configloadprivatefunctionconfigLoad void varconfigService HTTPService newHTTPService configService url config xml configService resultFormat e4x configService addEventListener ResultEvent RESULT configResult configService addEventListener FaultEvent FAULT configFault configService send configresultprivatefunctionconfigResult event ResultEvent void try parseconfig xmltocreateconfigdataobjectvarconfigData ConfigData newConfigData dispatcheventSiteContainer dispatchEvent newAppEvent AppEvent CONFIG LOADED false false configData Configdata通过EventBus在组件之间传递 privatefunctioninit void SiteContainer addEventListener ConfigEvent CONFIG LOADED config MapManager WidgetManager等 WidgetManager中的DI privatefunctionwidgetReadyHandler 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编码 F