1、Esri西安办事处 彭剑ArcGIS Server 开发之 Flex实践FlexViewer 介绍 FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲 FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲为什么推出 FlexViewer ArcGIS Server for Flex APIs很丰富, Flex也不错,但是 一个标准的 GIS客户端起码包括哪些功能? ArcGIS Server的地理处理服务怎么应用 ?FlexViewer FlexViewer设计目标 FlexViewer的优点 高度可配置
2、 开发简单 高内聚低耦合 高依赖注入 FlexViewer的界面元素、地图的地址、功能模块的组合都是由一个 config.xml来控制 Widget(功能模块 )也是设计成一个良好的开发框架,开发简单、高度可配置 取决于开发者配置文件说明 Config.xml主要标签 menus Map Mapservice:type、 alpha、 visible Extent(initialextent、 fullextent):xmin、 ymin、 xmax、 ymax basemap Livemap Navtool Widgets Widget Label Menu Config LinksWidg
3、et 属于 FlexViewer的模块 每个 Widget包含一个业务逻辑 开发人员可以继承 BaseWidget来扩展自定义功能Widget开发模式 开发人员更加专注核心业务逻辑 开发过程简便继承 IBaseWidget使用 IWedgeTemplet布局封装业务逻辑加入到 config编译运行开发过程com/esri/solutions/flexviewer/widgets/SearchWidget.swf FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲FlexViewer剖析 IBaseWidget WidgetTemplet SiteC
4、ontainer MapManager WidgetManager AppenventIBaseWidget Widget基类,定义了基本属性:状态、地图和配置文件 和 WidgetManager交互 管理每个 Widget生命周期WidgetClass IBaseWidget的实现类 自定义的 Widget必须继承的基类 WidgetManager会验证所有扩展了 BaseWidget的 MXML或 AS类 扩展了 BaseWidget的类可被编译为独立的 SWFIWidgetTemplate IWidgetTemplate接口定义了 WidgetTemplate和BaseWidget之间进
5、行协作的方法WidgetTemplate Widget模板是 UI组件,为 Widget提供了基本的 UI layout和行为包括风格化的窗口面板( styled window panel), 标题栏( title bar) 以及自定义的图片按钮( custom image buttons) 使用模板可以使开发者专注于业务逻辑开发而且整个程序风格统一。 模板也可以定制,必须实现 IWidgetTemplateWidgetTemplate id=“wTemplate“ widgetClosed=“widgetClosedHandler(event)“ widgetOpened=“widgetOp
6、enedHandler(event)“ 模板不是必须的 也可以开发自定义的组件SiteContainer FlexViewer中的容器,管理所有的组件 负责事件的监听,分发 所有的全局事件都是从此进行分发 宿主 FlexViewer 的管家Config相关类 收集配置信息,根据配置设置页面布局或者读取业务资源 ConfiigData configManager 不仅读取全局的 Config.xml、单个 Widget也是通过它来读取 通过 http方式读取MapManager MapManager类是地图有关对象的管理器 配置文件设置的图层、菜单等参数在这进行解析 定义了大量的事件,扩展起来非
7、常方便 当然,你也可以自己定义事件再去扩展WidgetManager Widget管理器 WidgetManager管理着 widget的生命周期 widget菜单点击事件添加监听,创建,加载 widgetAppenvent 定义全局事件 IDInfoPopup 弹出窗口:定义一些基本的动作,弹出内容的展现方式 BaseWidget定义了 showInfoWindow方法,由MapManager来监听 widgetShowInfo 目前支持显示文字(分行显示)、图片( jpg、 png、 gif)、视频( Flv) 更多的元素支持需要扩展 只需要对 Link进行解析加载即可 FlexViewe
8、r介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲编写 Widget 使用 WidgetTemplate模板 访问 Map 在 Map上显示 Widget数据 从 Map接收数据 (点击 , 画线 , 等 .) 在 Widget中控制导航 开发无模板的 Widget 开发自定义 Widget Template Widget 配置使用 WidgetTemplate使用 WidgetTemplate 第一步 : 将 widget 加到 config.xml 文件中 第二步 : 保存文件并且编译工程 第三步 : 运行 Flex Viewer 应用程序mywidgets/MyFirstWidget.swf