《FlexViewer开发教程》由会员分享，可在线阅读，更多相关《FlexViewer开发教程（58页珍藏版）》请在金锄头文库上搜索。
1、Flex Viewer 开发教程（1）Flex Viewer 配置文件 .2011-12-16 08:56:26 作者： ropp 浏览：396 评论：0Flex Viewer 的设计原则是 SIMPLICITY（简单）。因为简单原则，Flex Viewer 易于部署、配置和扩展。为了达到 “简单”这个目的，Flex Viewer 在设计和实现上未引入第三方框架。但是从其框架结构上，我们能 捕捉到一些 Flex 框架中最佳实践的影子，比如事件机制就与 PureMVC 中的 Notification 机制类似。其实，Flex Viewer 本身就可以被认为是一个框架。在这个框 架基础上，可以通过
2、扩展快速实现业务系统原型。本文档将详细介绍如何在“简单”原则下实现自定义 Widget，以及 Widget 如何与其它模块交互。说明：本文档使用的代码位于widgets.FlexViewerInAction目录下。1 Flex Viewer配置文件Flex Viewer 通过配置文件配置系统数据和功能，配置文件内容如下：ArcGIS Viewer for Flexa configurable web mapping applicationassets/images/logo.png0xFFFFFF,0x333333,0x101010,0x000000,0xFFD7000.8 title：Fle
3、x Viewer 自带 Banner 实现的标题； subtitle：Flex Viewer 自带 Banner 实现的副标题； logo：Flex Viewer 自带 Banner 实现的 Logo 图标； style：用来设置全局的组件样式，具体详见 UIManager 代码； UI Elements：指 Control Widget，比如 HeaderControllerWidget、NavigationWidget 等这些提供系 统级别功能的 Widget； map：Flex Viewer 用来设置 地图属性，包括底图、业务图层； widgetcontainer：Business Wi
4、dget 的容器，用来管理 Business Widget。Business Widget 指提供业务 功能的 Widget。上述配置文件并未使用到所有可用的属性，比如在 style 中设 置 font 属性，map 中设置 fullextent 等，此处不一一 列举，详见 ConfigManager 代码。需要说明的是，基于 Flex Viewer 开发业务系统，一般通过实现自定义的 Business Widget 来实现具体的业务功能，通过修改或者自 定义 Control Widget 实现符合需求的系统级别功能组件。所以，配置文件中的前三项并不是必须的，通常我们的 业务系统需要更具特色的
5、 Banner 实现。Flex Viewer 各部分与配置文件的对应关系 见下图：Flex Viewer 开发教程（2）Widget 配置文件2011-12-16 13:59:11 作者： ropp 浏览：178 评论：02 Widget 配置文件在 Flex Viewer 的设计中，每个 Widget 都可以有一个配置文件，来配置 Widget 所需要的各种资源，提倡的做法是配置文件名与 Widget 名称保持一致，并且位于同一目录下。当然，Widget 的配置文件不是必须的，当不需要配置信息时，配置文件可省略。在Flex Viewer 解析中，我们以 HelloWorldWidget 为例
6、，说明如何在 Flash Builder中实现自定义 Widget。下面我们同样以 HelloWorldWidget 为例，来说明 Widget 如何从其配置文件获取资源信息。先来看一下 HelloWorldWidget.xml，也就是配置文件的内容：Hello, Flex Viewer!再来看一下 HelloWorldWidget 的实现代码，如下： widgetConfigLoaded 事件widgetConfigLoaded 事件是 BaseWidget 中设计的一个事件，用来说明 Widget 对应的配置文件已经成功读取。通常在这个事件的响应方法中解析 XML 数据，获取所需的资源信息
7、。如果自定义 Widget 需要配置文件中的信息，如所示，设置 widgetConfigLoaded 事件的响应方法即可。 响应方法widgetConfigLoaded 事件的响应方法，在该方法中对 XML 配置信息进行解析。 configXML 对象Widget 配置文件是一个 XML 文档，configXML 是在 BaseWidget 中定义的 XML 对象，用来表示配置文件的 XML 数据。通常，widgetConfigLoaded 事件的响应方法中，直接访问 configXML 即可。 解析配置信息从 configXML 中获取所需资源信息，此处是 ActionScript 中对于
8、XML 数据的操作，可参考相关教程。 使用配置信息配置信息可以有多种使用方式，此处只是简单的把字符串信息显示出来。除此之外，配置信息可以是各种资源的 url、对 Timer 设置的时间间隔等等。在具体系统的开发过程中，应尽可能多的将 Widget 用到的资源放到配置文件中，这样的话，即便在系统交付之后，用户可以通过修改配置文件达到特定需求，而不需要更改源代码。下图是 HelloWorldWidget 打开时的画面：Flex Viewer 开发教程（3）Widget 与 WidgetTemplate .2011-12-21 16:12:14 作者： ropp 浏览：128 评论：01 Widge
9、t 与 WidgetTemplateHelloWorldWidget 中短短几行代码，却能实现如此 cool 的一个 Widget，这要归功于 WidgetTemplate。WidgetTemplate 是 IWidgetTemplate 接口的默认实现，提供组成 Widget 的各个部分，包括标题栏、内容面板、控制按钮、工具按钮、Widget 图标等等。Widget 将 WidgetTemplate 作为 UI 容器，比如在 HelloWorldWidget 中，我们将显示信息的 Label 放在 WidgetTemplate 中。当然，也可以实现自定义 WidgetTemplate，只要实
10、现 IWidgetTemplate 接口即可。在 Flex Viewer2.0 以后，WidgetTemplate 的外观通过皮肤（Skin）来定义，详见 WidgetTemplateSkin 代码。要想实现其它风格的 WidgetTemplate，自定义一个 WidgetTemplateSkin 即可。下图是一个自定义 WidgetTemplateSkin 的效果。WidgetTemplate 定义了三个事件：打开（open）、最小化（minimized）、关闭（closed）。这三个事件分别在 Widget 打开、最小化和关闭的时候发生。这三个事件在某些特殊业务需求下能发挥很大的作用，比如
11、某个 Widget 对应的一个 GraphicsLayer（见 ArcGIS API for Flex），当 Widget 打开时需要显示，当 Widget 最小化或者关闭时需要隐藏。此需求可以分别在三个事件的响应方法中实现。在 HelloWidgetTemplateWidget 中我们分别对三个事件进行响应，每个响应中显示一个弹出框来说明当前所发生的事件类型。窗口打开时的情形如下图所示：HelloWidgetTemplateWidget 代码如下： 设置 open 事件的响应方法； 设置 minimized 事件的响应方法； 设置 closed 事件的响应方法； 设置 WidgetTempl
12、ate 的皮肤； 实现 open 事件的响应方法； 实现 minimized 事件的响应方法； 实现 closed 事件的响应方法。Flex Viewer 开发教程（4）Widget 与 Map 交互2011-12-23 10:04:10 作者： ropp 浏览：121 评论：01 Widget 与 Map 交互Widget 与 Map 之间的交互是最常见的一种交互 ，BaseWidget 不仅定义了 Map实例对象，而且封装了与 Map 进行交 互的方法。BaseWidget 良好封装使 Widget 与 Map 交互非常简单。1.1 交互方式 1：map 实例在 BaseWidget 中，
13、有如下代码：/* Current active map that the container shows.* The WidgetManager will set its value when a widget is initialized.*/private var _map:Map;Bindable/* Set a map object reference. Used by WidgetManager to pass in the current* map.* param value the map reference object.*/public function get map():
14、Mapreturn _map;public function set map(value:Map):void_map = value;通过注释可知，Widget 在初始化的时候，WidgetManager 会将当前的 map 实例注入 Widget。所以，一旦 Widget 初始化完成，就有一个 map 实例可供使用。下面我们实现一个 HelloMapWidget，来说明在 Widget 如何使用 map 实例，代码如下：HelloMapWidget 实现的功能是，单击“Say Hi to Map”按钮，在地图当前视图范围的中心点显示 infoWindow，infoWindow 显示的 内容是
15、配置文件中的字符。运行结果如下图所示：有了 map 实例，在 Widget 就可以做任何与 Map 相关的事情，比如控制 Map 图层、获得 Map 的各种信息等等， 具体可参考 Flex Viewer 中的 NavigationWidget、MapSwitcherWidget 等。1.2 交互方式 2：BaseWidget 封装的方法除了 map 实例，Widget 可以通过 BaseWidget 中封装的方法与 Map 进行交互（实际上是与 MapManager 的交 互），见如下代码：/* Show information window (infoWindow) based on inf
16、oData from widget.*/public function showInfoWindow(infoData:Object):voidViewerContainer.dispatchEvent(new AppEvent(AppEvent.SHOW_INFOWINDOW, infoData);/* Set map action from widget.*/public function setMapAction(action:String, status:String, symbol:Symbol, callback:Function):voidvar data:Object =tool: action,status: status,symbol: symbol,handler: callback
