天天看點

(一)FlexViewer之整體架構解析

FlexViewer架構為Esri提供的可以高效開發基于WEB的地理資訊應用系統的一種完全免費的應用程式架構。目前有兩種版本,一種是針對非開發人員的版 本,即編譯後的釋出(release)版本;一種是供開發人員在源架構的基礎上,通過修改代碼和配置檔案等,來實作定制業務。

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

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

(一)FlexViewer之整體架構解析

 可以看到,有四個子目錄和三個檔案。

此檔案為整個架構的入口,當系統初始化時首先加載此檔案。

此檔案夾下的内容至關重要,配置檔案的擷取和解析,地圖的初始化和加載,widget的加載以及事件機制等都與這個檔案夾有關系。此為該檔案夾下的檔案組織:

(一)FlexViewer之整體架構解析

下面以表格的形式給出各子產品的功能:

檔案名

作用

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事件響應)的響應。

此檔案夾的内容是在FlexViewer2.3版本後才出現的,在此檔案夾中可以通過XML的方式來配置彈出框的顯示方式。以下是其配置的格式:

(一)FlexViewer之整體架構解析

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

(一)FlexViewer之整體架構解析
(一)FlexViewer之整體架構解析

此為子產品部分。FlexViewer架構可以将其了解為一個插件式架構,在src檔案下已經定義了插件引擎、通信機制、資料存儲、配置讀取四個很重要的部分。而widgets便是我們的獨立插件部分,在Flex中稱其為module部分。如所有的插件系統一樣,插件必須繼承了某些接口,即實作了固定協定的,才能被容器加載。在FlexViewer中,IbaseWidget和IwidgetTemplate是每一個自定義widget需要繼承實作的兩個接口。

該目錄為資源檔案目錄,主要用于管理工程中的圖檔檔案,工程中的其它檔案可以通過相對路徑的方式來通路其中的圖檔資源。

此檔案為配置檔案,地圖的配置,widget的配置和其他需要使用的配置等都在這裡。

為整個系統的樣式表。

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

(一)FlexViewer之整體架構解析

可以看到,執行個體化的過程是:

(一)FlexViewer之整體架構解析

以上初始化流程圖中,将viewerContainer的初始化放在最後,是因為雖然viewerContaner是最先調入記憶體中開始初始化的,但是卻是在将它的屬性都執行個體化完了,才調用的它的建構器,是以圖中預設将其放在最後初始化了。

但是執行個體化完後,系統的啟動卻隻是等于把最核心的子產品裝載了,而這些子產品将在接下來一系列的消息觸發中,完成對架構的填充。

我首先給出執行個體化後觸發的消息機制流程圖:

(一)FlexViewer之整體架構解析

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

(一)FlexViewer之整體架構解析
(一)FlexViewer之整體架構解析

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

(一)FlexViewer之整體架構解析

此時,ConfigManger開始請求配置檔案。

(一)FlexViewer之整體架構解析

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

(一)FlexViewer之整體架構解析

這些元件中均寫有對AppEvent.CONFIG_LOADED事件的監聽,是以在配置檔案讀取完後,這幾個元件均将做出相關響應。

先給出FlexViewer的架構圖:

(一)FlexViewer之整體架構解析
(一)FlexViewer之整體架構解析

其中加載的配置檔案如果沒特殊修改,将使用預設的位址:

(一)FlexViewer之整體架構解析

如果要修改,可以在ViewerContainer裡面找到相關屬性後修改。

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

(一)FlexViewer之整體架構解析

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

(一)FlexViewer之整體架構解析

閱讀這個類中的方法,便能猜出其作用了,這個類便是為了存儲消息,分發消息,共享消息用的。舉個例子,FlexViewer是子產品式架構,一個Widget隻有當被調用時才會執行個體化,于是,當widgetA已經發出了幾個消息後,widgetB才被調用進而執行個體化,此時widgetB該如何獲得它錯過的widgetA中的消息呢。DataManger便能解決這個難題。

(一)FlexViewer之整體架構解析

在mapManager中有這樣幾個方法:

(一)FlexViewer之整體架構解析

這些方法中可以将配置檔案中配置好的基礎地圖和操作地圖等執行個體化。并且這幾個方法均需要調用一個共同的函數:addLayerToMap(layerObject:Object)。是以對不同類型的地圖的執行個體化,便是在這裡進行控制的。如果自己擴充了一些自定義地圖類型,便需要在這個函數中加上對自定義的地圖類型的支援。

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

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

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

(一)FlexViewer之整體架構解析

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

                                  

(一)FlexViewer之整體架構解析