Flex Viewer 開發教程（1）Flex Viewer配置檔案

gispace發表於2011-05-12
FlexView

Flex Viewer的設計原則是SIMPLICITY（簡單）。因為簡單原則，Flex Viewer易於部署、配置和擴充套件。為了達到“簡單”這個目的，Flex Viewer在設計和實現上未引入第三方框架。但是從其框架結構上，我們能捕捉到一些Flex框架中最佳實踐的影子，比如事件機制就與PureMVC中的Notification機制類似。

其實，Flex Viewer本身就可以被認為是一個框架。在這個框架基礎上，可以通過擴充套件快速實現業務系統原型。本文件將詳細介紹如何在“簡單”原則下實現自定義Widget，以及Widget如何與其它模組互動。

說明

本文件使用的程式碼位於widgets.FlexViewerInAction目錄下。

 

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"/>⑤

   <widget right="-2" bottom="-2" config="widgets/OverviewMap/OverviewMapWidget.xml"

    url="widgets/OverviewMap/OverviewMapWidget.swf"/>⑥

   <widget right="20" top="55" config="widgets/MapSwitcher/MapSwitcherWidget.xml"

    url="widgets/MapSwitcher/MapSwitcherWidget.swf"/>⑦

    <widget left="0" top="0" config="widgets/HeaderController/HeaderControllerWidget.xml"

    url="widgets/HeaderController/HeaderControllerWidget.swf"/>⑧

 

   <map initialextent="-14083000 3139000 -10879000 5458000" top="40" wraparound180="true">⑨

   <basemaps>

           <layer label="Streets" type="tiled" visible="true" alpha="1" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>

           <layer label="Aerial" type="tiled" visible="false" alpha="1" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"/>

           <layer label="Topo" type="tiled" visible="false" alpha="1" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>

       </basemaps>

   <operationallayers>

           <layer label="Boundaries and Places" type="tiled" visible="false" url="http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer"/>

           <layer label="Fires" type="feature" visible="false" alpha="1" info="widgets/InfoTemplates/SimpleInfoWinWidget.swf"

           infoconfig="widgets/InfoTemplates/IWT_Fires.xml"    url="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">⑩

       <widget label="Bookmarks" left="430" top="90" icon="assets/images/i_bookmark.png"

       config="widgets/Bookmark/BookmarkWidget.xml"

       url="widgets/Bookmark/BookmarkWidget.swf"/>

       <widget label="Find an address" left="100" top="90" preload="open" icon="assets/images/i_target.png"

       config="widgets/Locate/LocateWidget_Bing.xml"

       url="widgets/Locate/LocateWidget.swf"/>

       <widget label="Louisville Police" left="590" top="280" icon="assets/images/i_police.png"          config="widgets/Query/QueryWidget_Louisville_PoliceStations.xml"

        url="widgets/Query/QueryWidget.swf"/>

       <widget label="Search" left="80" top="280" icon="assets/images/i_search.png"

       config="widgets/Search/SearchWidget_Louisville.xml"

       url="widgets/Search/SearchWidget.swf"/>

       <widget label="Earthquakes (GeoRSS)" left="410" top="280" icon="assets/images/i_rss.png"

       config="widgets/GeoRSS/GeoRSSWidget.xml"

       url="widgets/GeoRSS/GeoRSSWidget.swf"/>

       <widget label="Draw and Measure" left="60" top="400" icon="assets/images/i_draw2.png"

       config="widgets/Draw/DrawWidget.xml"

       url="widgets/Draw/DrawWidget.swf"/>

       <widget label="Print" left="390" top="400" icon="assets/images/i_print.png"

       config="widgets/Print/PrintWidget.xml"

       url="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各部分與配置檔案的對應關係見下圖：

 

 

 

相關文章