文章版權由作者李曉暉和博客園共有，若轉載請于明顯處標明出處：http://www.cnblogs.com/naaoveGIS/。

1.FlexViewer簡介

FlexViewer框架為Esri提供的可以高效開發基于WEB的地理信息應用系統的一種完全免費的應用程序框架。目前有兩種版本，一種是針對非開發人員的版 本，即編譯后的發布（release）版本；一種是供開發人員在源框架的基礎上，通過修改代碼和配置文件等，來實現定制業務。

這里我要跟大家一起探討的是面向開發人員的FlexViewer版本。

2.FlexViewer框架的組成

當我們從網上下載到FlexViewer的源碼，通過eclipse加載后便可以看到該框架的組成結構了。

?

?可以看到，有四個子目錄和三個文件。

2.1 index.mxml文件

此文件為整個框架的入口，當系統初始化時首先加載此文件。

2.2 com文件夾

此文件夾下的內容至關重要，配置文件的獲取和解析，地圖的初始化和加載，widget的加載以及事件機制等都與這個文件夾有關系。此為該文件夾下的文件組織：

?

下面以表格的形式給出各模塊的功能：

文件名	作用
AppEvent.as	定義了用于在消息總線(EventBus)中使用的消息類
BaseWidget.as	定義了Widget的基類，所有自定義的Widget均需繼承該類
ConfigData.as	定義了系統在初始化時將config.xml文件中的配置項加載內存后，用于管理這些配置項的類型
IBaseWidget.as	定義了接口BaseWidget，同時類BaseWidget實現了該接口
IInfowindowTemplate.as	定義了接口InfowindowTemplate，所有自定義的InfoWindowTemplate均需實現該接口，同時自定義模板用于InfoWindow的窗口定義中。
IWidgetContainer.as	定義了接口IWidgetContainer，所有自定義的WidgetContainer均需實現該接口。WidgetContainer是用于管理Widget的一個可視化容易。
IWidgetTemplate.as	定義了接口IWidgetTemplate，所有自定義的WidgetTemplate均需實現該接口，同時自定義模板用于Widget的窗口定義中。
ViewerContainer.mxml	定義了可視化容器ViewerContainer，該容器是Flex Viewer中構件樹的根
ConfigManager.as	定義了類configmanager，該類負責從config文件中加載兵解析全部配置信息，然后將這些信息存儲于數據結構configData，最后通過觸發事件AppEvent.CONFIG_LOADED將configData發布給其它組件使用
DataManager.as	定義了類DataManager，負責管理與維護系統內部的公共數據，使得系統中的各組件、Widget均能將公共數據發布到DataManager中或從其中獲取其它組件發布的數據。
EventBus.as	繼承了EventDispatcher接口，并使用單例模式向整個提供中的所有組件提供統一的消息注冊和發布功能，從而使得各組件之間的完全做到低耦合、高內聚的效果
MapManager.mxml	負責根據config文件中的配置信息初始化地圖控件、底圖、optlayer，以及optlayer所對應的InfoWindowWidget，并提供對事件SET_MAP_NAVIGATION（設置地圖瀏覽工具）、BASEMAP_SWITCH（設置底圖切換）、SET_MAP_ACTION（設置繪圖工具）、SHOW_INFOWINDOW（顯示InfoWindow）、MAP_RESIZE（改變地圖控件大小）、DATA_OPT_LAYERS（請求OptLayersTable）、MAP_LAYER_VISIBLE（設置指定圖層可見性）等的響應。
ScriptingManager.as	保留類，暫無特別用途
SecurityManager.as	保留類，暫無特別用途
UIManager.as	負責根據config文件中style的配置信息定義一套系統的UI樣式表
WidgetManager.as	負責根據config文件的配置自動初始化Widget Container，及其包含的Widget控件，同時提供對事件WIDGET_RUN（打開Widget）、DATA_CREATE_INFOWIDGET（創建OptLayer對應的InfoWindow）、WIDGET_FOCUS（設置Widget獲得焦點）、WIDGET_STATE_CHANGED（關閉Widget事件響應）的響應。

2.3 popups文件夾

此文件夾的內容是在FlexViewer2.3版本后才出現的，在此文件夾中可以通過XML的方式來配置彈出框的顯示方式。以下是其配置的格式：

?

以下是Esri官方中的一個配置的例子：

?? ? ? ? ??

2.4 widgets文件夾

此為模塊部分。FlexViewer框架可以將其理解為一個插件式框架，在src文件下已經定義了插件引擎、通信機制、數據存儲、配置讀取四個很重要的部分。而widgets便是我們的獨立插件部分，在Flex中稱其為module部分。如所有的插件系統一樣，插件必須繼承了某些接口，即實現了固定協議的，才能被容器加載。在FlexViewer中，IbaseWidget和IwidgetTemplate是每一個自定義widget需要繼承實現的兩個接口。

2.5 assets文件夾

該目錄為資源文件目錄，主要用于管理工程中的圖片文件，工程中的其它文件可以通過相對路徑的方式來訪問其中的圖片資源。

2.6 config.xml文件

此文件為配置文件，地圖的配置，widget的配置和其他需要使用的配置等都在這里。

2.7 defaults.css文件

為整個系統的樣式表。

3.框架啟動流程

3.1 實例化——加載組件

我們直接從index.xml中便能看出來整個框架啟動時的流程了。現在我先給出index.xml的內容：

?

可以看到，實例化的過程是：

?

以上初始化流程圖中，將viewerContainer的初始化放在最后，是因為雖然viewerContaner是最先調入內存中開始初始化的，但是卻是在將它的屬性都實例化完了，才調用的它的構建器，所以圖中默認將其放在最后初始化了。

但是實例化完后，系統的啟動卻只是等于把最核心的模塊裝載了，而這些模塊將在接下來一系列的消息觸發中，完成對框架的填充。

3.2消息觸發——通過配置填充框架

我首先給出實例化后觸發的消息機制流程圖：

?

下面，我將代碼中與此消息機制相關的流程也給大家展現出來。

3.2.1ViewerContainer實例化化完后觸發讀配置事件

?

?

3.2.2 configManager讀取完配置后觸發配置讀完事件

ConfigManager中監聽了ViewerContainer初始完成的事件。

?

此時，ConfigManger開始請求配置文件。

?

當把cofig.xml中的配置讀完后，會觸發配置讀完事件。

?

3.2.3 WidgetManger、MapManager、DataManager等監聽配置讀完事件并做出反應

這些組件中均寫有對AppEvent.CONFIG_LOADED事件的監聽，所以在配置文件讀取完后，這幾個組件均將做出相關響應。

4.解析核心組件的主要功能

先給出FlexViewer的架構圖：

?

?

4.1configManger——讀取配置

?

其中加載的配置文件如果沒特殊修改，將使用默認的地址：

?

如果要修改，可以在ViewerContainer里面找到相關屬性后修改。

在函數configService_resultHandler中對config文件中的配置做出解析。在源碼中，里面對geoserverURL等做了解析，并且均放入了configData.as中。但是這個并不是固定的，在自己修改和擴充框架時，可以更具需要在config中添加需要的配置，并且解析后放入其他的自定義文件里。此組件還能將widget相關配置讀完，存入到configData的對應的屬性中：

?

?

4.2dataManager——實現數據共享

我們查看dataManager的代碼，首先就會發現此類是一個繼承于EventDispatcher的類，不難推測出這個類肯定與消息機制有關系，但是到底有什么作用呢？

?????

閱讀這個類中的方法，便能猜出其作用了，這個類便是為了存儲消息，分發消息，共享消息用的。舉個例子，FlexViewer是模塊式框架，一個Widget只有當被調用時才會實例化，于是，當widgetA已經發出了幾個消息后，widgetB才被調用從而實例化，此時widgetB該如何獲得它錯過的widgetA中的消息呢。DataManger便能解決這個難題。

?

4.3mapManager——地圖加載和配置

在mapManager中有這樣幾個方法：

?

這些方法中可以將配置文件中配置好的基礎地圖和操作地圖等實例化。并且這幾個方法均需要調用一個共同的函數：addLayerToMap(layerObject:Object)。所以對不同類型的地圖的實例化，便是在這里進行控制的。如果自己擴展了一些自定義地圖類型，便需要在這個函數中加上對自定義的地圖類型的支持。

4.4widgetManager——將插件與宿主關聯起來

這其中有loadContainer和loadControl方法，便是對插件容器和具體插件的加載。

4.5uiManager——對UI的控制

這個類主要是實現對框架樣式的控制。其樣式的配置均是在config.xml中進行。

5.總結

以上我大致將FlexViewer框架的構造以及其初始化時的消息機制，并且對核心的組件進行了大致的介紹。利用Flexviewer框架可以快速的開發出效果很不錯的前端來。這里我給出一個項目實例的截圖，此項目便是在FlexViewer的基礎上修改、擴展、開發出來的。在以后的章節里，我會跟大家分享如何擴展Map類、如何自制Widget、以及跟例子相關的對config.xml文件的配置。相信通過對實例的探索，大家會對FlexViewer框架有更深的了解。

?

?

　　　　　　　　　　　　　　　　　　　　　　　　　-----歡迎轉載，但保留版權，請于明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

?????????????????????????????????????????????????????????????????????????? 如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

總結

以上是生活随笔為你收集整理的（一）FlexViewer之整体框架解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。