（一）FlexViewer之總體框架解析

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：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/

                                                                           若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^