- 1. Esri西安办事处 彭剑 ArcGIS Server 开发之Flex实践 ——FlexViewer介绍
- 2. FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲
- 3. FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲
- 4. 为什么推出FlexViewerArcGIS Server for Flex APIs很丰富，Flex也不错，但是… 一个标准的GIS客户端起码包括哪些功能？ ArcGIS Server的地理处理服务怎么应用…？
- 5. FlexViewerFlexViewer设计目标 FlexViewer的优点 高度可配置 开发简单 高内聚低耦合 高依赖注入
- 6. FlexViewer的界面元素、地图的地址、功能模块的组合都是由一个config.xml来控制 Widget(功能模块)也是设计成一个良好的开发框架，开发简单、高度可配置——取决于开发者
- 7. 配置文件说明Config.xml主要标签 menus Map Mapservice:type、alpha、visible… Extent(initialextent、fullextent):xmin、ymin、xmax、ymax basemap Livemap Navtool Widgets Widget Label Menu Config Links
- 8. (本页无文本内容)
- 9. Widget属于FlexViewer的模块 每个Widget包含一个业务逻辑 开发人员可以继承BaseWidget来扩展自定义功能
- 10. Widget开发模式开发人员更加专注核心业务逻辑
开发过程简便继承IBaseWidget使用IWedgeTemplet布局封装业务逻辑加入到config编译运行开发过程
com/esri/solutions/flexviewer/widgets/SearchWidget.swf - 11. FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲
- 12. FlexViewer剖析IBaseWidget WidgetTemplet SiteContainer MapManager WidgetManager Appenvent
- 13. (本页无文本内容)
- 14. IBaseWidgetWidget基类，定义了基本属性：状态、地图和配置文件 和WidgetManager交互——管理每个Widget生命周期
- 15. WidgetClassIBaseWidget的实现类 自定义的Widget必须继承的基类 WidgetManager会验证所有扩展了BaseWidget的MXML或AS类 扩展了BaseWidget的类可被编译为独立的SWF
- 16. IWidgetTemplateIWidgetTemplate接口定义了WidgetTemplate和BaseWidget之间进行协作的方法
- 17. WidgetTemplateWidget模板是UI组件，为Widget提供了基本的UI layout和行为
包括风格化的窗口面板（styled window panel），标题栏（title bar）以及自定义的图片按钮（custom image buttons）
使用模板可以使开发者专注于业务逻辑开发而且整个程序风格统一。
模板也可以定制，必须实现IWidgetTemplate
WidgetTemplate id="wTemplate" widgetClosed="widgetClosedHandler(event)" widgetOpened="widgetOpenedHandler(event)">
- 18. 模板不是必须的
也可以开发自定义的组件
- 19. SiteContainerFlexViewer中的容器，管理所有的组件 负责事件的监听，分发——所有的全局事件都是从此进行分发 宿主——FlexViewer的管家
- 20. Config相关类收集配置信息，根据配置设置页面布局或者读取业务资源 ConfiigData configManager 不仅读取全局的Config.xml、单个Widget也是通过它来读取 通过http方式读取
- 21. (本页无文本内容)
- 22. MapManagerMapManager类是地图有关对象的管理器 配置文件设置的图层、菜单等参数在这进行解析 定义了大量的事件，扩展起来非常方便——当然，你也可以自己定义事件再去扩展
- 23. WidgetManager Widget管理器 WidgetManager管理着widget的生命周期 widget菜单点击事件添加监听，创建，加载widget
- 24. Appenvent 定义全局事件ID
- 25. InfoPopup弹出窗口：定义一些基本的动作，弹出内容的展现方式 BaseWidget定义了showInfoWindow方法，由MapManager来监听——widgetShowInfo 目前支持显示文字（分行显示）、图片（jpg、png、gif）、视频（Flv）——更多的元素支持需要扩展 只需要对Link进行解析加载即可
- 26. (本页无文本内容)
- 27. FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲
- 28. 编写Widget使用WidgetTemplate模板 访问 Map 在Map上显示Widget数据 从Map接收数据 (点击, 画线, 等.) 在Widget中控制导航 开发无模板的 Widget 开发自定义Widget Template Widget 配置
- 29. 使用WidgetTemplate
- 30. 使用WidgetTemplate第一步: 将widget 加到config.xml 文件中
第二步: 保存文件并且编译工程
第三步: 运行Flex Viewer 应用程序
mywidgets/MyFirstWidget.swf - 31. 第四步: 从菜单按钮点击My First Widget
- 32. 访问MapFlex Viewer是以地图为中心的应用，程序初始化后widget就可以访问到map服务 BaseWidget类中定义了Map变量，Widget加载后，widget manger就会将当前活动map对象传递给widget对象 所有BaseWidget的派生类可以直接访问map对象
- 33. 访问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 { map = value; }private function widgetMenuClicked(event:AppEvent):void { if (widgetTable.containsKey(id)) { } else { if (moduleTable.containsKey(url)) { widget.setMap(map); } } }
- 34. 访问地图-示例
- 35. 在Map上显示Widget数据Add Graphics Layer
- 36. 在Map上显示Widget数据当Widget 打开/最小化时，显示/关闭 Graphics Layer
…private function widgetClosedHandler(event:Event):void { graphicsLayer.visible = false; } private function widgetOpenedHandler(event:Event):void { graphicsLayer.visible = true; } - 37. 从Map接收数据 (点击、画线等)Widget可能需要接收来自Map的数据，如用户与Map交互操作产生的点、线、面数据 Widget模型通过内嵌的setMapAction函数接收数据private function activateTool():void { setMapAction(Draw.POINT, "Click Point", drawEnd); } private function drawEnd(event:DrawEvent):void { var geom:Geometry = event.geometry; var pt:MapPoint = geom as MapPoint Alert.show("Click location: " + pt.x + ", " + pt.y); }
- 38. setMapAction(BaseWidget.as)public function setMapAction(action:String, status:String, callback:Function):void { var data:Object = { tool: action, status: status, 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调用的操作
- 39. 在Widget中控制导航可能需要在widget中控制地图的导航，如关闭widget时关闭graphics图层显示并且使地图处于Pan模式
- 40. 在Widget中控制导航setMapNavigation(BaseWidget.as) public function setMapNavigation(navMethod:String, status:String):void { var data:Object = { tool: navMethod, status: status } SiteContainer.dispatchEvent(new AppEvent(AppEvent.SET_MAP_NAVIGATION, false, false, data)); }navMethod:Navigation.PAN Navigation.ZOOM_IN Navigation.ZOOM_OUT SiteContainer.NAVIGATION_ZOOM_FULL SiteContainer.NAVIGATION_ZOOM_PREVIOUS SiteContainer.NAVIGATION_ZOOM_NEXT status:控制条上显示的状态信息
- 41. 开发无模板的widget模板不是必须的，如显示一个时钟
- 36. 在Map上显示Widget数据当Widget 打开/最小化时，显示/关闭 Graphics Layer
- 42. 开发自定义Widget Template自定义widget Template必须实现iwidgetTemplate接口，即实现接口中的setTitle, setIcon 和 setState函数
- 43.
- 44.
- 45. Widget内容配置每个widget可以有自己的配置文件
配置文件的位置在config.xml中指定
Widget Manager将widget配置文件的url传递给BaseWidget，BaseWidget加载并解析xml配置文件，保存为一个configXML变量(一个XML类型的AS变量)
Widget加载完后可以直接访问configXML变量
relative/urlpath/MyNewWidget.swf - 46. Widget配置文件示例
http://localhost/ArcGIS/rest/services/Geometry/GeometryServer 32618 千米 米 Square Meters Square Kilometers Square Feet Square Miles Acres Hectares Polution Sources http://localhost/ArcGIS/rest/services/ps/MapServer/0 RegionCode='[value]' PSName,PSCode,RegionCode - 47. FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲
- 48. 如何与业务系统结合FlexViewer是很好，但仅仅是纯GIS应用，业务系统是一个复杂的系统：以数据为导向，GIS只是其中的一小部分——有时候还那么可有可无 FlexViewer如何迎合业务系统，嵌入到其他系统里面？怎么和其他的业务接口通信？——其实，这是Flex层面的问题 FlexViewer能否实现在线编辑——GIS RIA开发都要面对的问题 按权限加载地图——大数据量下的业务过滤
- 49. 结合几种方式WebService Http Remote Object（BlazeDS） JavaScript
- 50. 在线编辑9.3.1之前——八仙过海 WFS WebService GP Services 10问世后 FeatureService：应对之前Server API的弊端
- 51. 按权限加载图层ArcEngine的方法运用在Web端 传统做法: 通过权限取得数据 通过数据获取图形范围 图形过滤 表面上是个在Web上进行图形过滤的问题，实际上取决于数据的完整性 解决方案：LayerDefinition
- 52. FlexViewer后续 ArcGIS Viewer beta 基于ArcGIS Server for Flex 2.0（ArcGIS 10） 秉承FlexViewer的开发模式 集成的编辑功能 更多的主界面风格 萝卜青菜各有所爱
- 53. 谢谢
