Flex Viewer 开发教程1Flex Viewer配置文件

Flex Viewer 的设计原则是SIMPLICITY（简单）。因为简单原则，Flex Viewer易于部署、配置和扩展。为了达到 “简单”这个目的，Flex Viewer在设计和实现上未引入第三方框架。但是从其框架结构上，我们能 捕捉到一些Flex框架中最佳实践的影子，比如事件机制就与PureMVC中的Notification机制类似。

其实，Flex Viewer本身就可以被认为是一个框架。在这个框 架基础上，可以通过扩展快速实现业务系统原型。本文档将详细介绍如何在“简单”原则下实现自定义Widget，以及Widget如何与其它模块交互。

说明：本文档使用的代码位于widgets.FlexViewerInAction目录下。

1       Flex Viewer配置文件

Flex Viewer通过配置文件配置系统数据和功能，配置文件内容如下：

<?xml version="1.0" ?> <configuration>        <title>ArcGIS Viewer for Flex</title>①        <subtitle>a configurable web mapping application</subtitle>②        <logo>assets/images/logo.png</logo>③        <style>④               <colors>0xFFFFFF,0x333333,0x101010,0x000000,0xFFD700</colors>               <alpha>0.8</alpha>        </style>        <bing key="Al0VE_jsmagxk4LFghXGlK5JSHfC0tk-eHRubZv_eMYm6wzgQaStYks8g-wWcgk3"/>        <!-- UI elements -- >        <widget left="10" top="50" config="widgets/Navigation/NavigationWidget.xml"               url="widgets/Navigation/NavigationWidget.swf"/>⑤        right="-2" bottom="widgets/OverviewMap/OverviewMapWidget.xml"        "widgets/OverviewMap/OverviewMapWidget.swf"/>⑥        "20" "55" "widgets/MapSwitcher/MapSwitcherWidget.xml"        "widgets/MapSwitcher/MapSwitcherWidget.swf"/>⑦          "0" "widgets/HeaderController/HeaderControllerWidget.xml"        "widgets/HeaderController/HeaderControllerWidget.swf"/>⑧          <map initialextent="-14083000 3139000 - 10879000 5458000" "40" wraparound180="true">⑨               <basemaps>                     <layer label="Streets" type="tiled" visible="true" alpha="1" "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>                    "Aerial" "false" "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer""Topo" "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>               </basemaps>               <operationallayers>                     "Boundaries and Places" "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapSe rver"/>                     "Fires" "feature" info="widgets/InfoTemplates/SimpleInfoWinWidget.swf"                    infoconfig="widgets/InfoTemplates/IWT_Fires.xml"          "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0"</operationallayers>        </map>          <!-- widgets organized into widget containers that manage close/open etc -->          <!-- supported layout property options: horizontal(default)|float|vertical|fix-->        <widgetcontainer layout="horizontal">⑩                      "Bookmarks" "430" "90" icon="assets/images/i_bookmark.png"               "widgets/Bookmark/BookmarkWidget.xml"               "widgets/Bookmark/BookmarkWidget.swf"/>                      "Find an address" "100" preload="open" "assets/images/i_target.png"               "widgets/Locate/LocateWidget_Bing.xml"               "widgets/Locate/LocateWidget.swf""Louisville Police" "590" "280" "assets/images/i_police.png"                "widgets/Query/QueryWidget_Louisville_PoliceStations.xml"            "widgets/Query/QueryWidget.swf""Search" "80" "assets/images/i_search.png"               "widgets/Search/SearchWidget_Louisville.xml"               "widgets/Search/SearchWidget.swf""Earthquakes (GeoRSS) " "410" "assets/images/i_RSS.png"               "widgets/GeoRSS/GeoRSSWidget.xml"               "widgets/GeoRSS/GeoRSSWidget.swf""Draw and Measure" "60" "400" "assets/images/i_draw2.png"               "widgets/Draw/DrawWidget.xml"               "widgets/Draw/DrawWidget.swf""Print" "390" "assets/images/i_print.png"               "widgets/Print/PrintWidget.xml"               "widgets/Print/PrintWidget.swf"</widgetcontainer> </configuration>

①     title：Flex 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 Widget的容器，用来管理Business Widget。Business Widget指提供业务 功能的Widget。

上述配置文件并未使用到所有可用的属性，比如在style中设 置font属性，map中设置fullextent等，此处不一一 列举，详见ConfigManager代码。

需要说明的是，基于Flex Viewer开发业务系统，一般通过实现自定义的Business Widget来实现具体的业务功能，通过修改或者自 定义Control Widget实现符合需求的系统级别功能组件。所以，配置文件中的前三项并不是必须的，通常我们的 业务系统需要更具特色的Banner实现。Flex Viewer各部分与配置文件的对应关系 见下图：