（一）FlexViewer之整体框架解析
文章版權(quán)由作者李曉暉和博客園共有，若轉(zhuǎn)載請于明顯處標(biāo)明出處：http://www.cnblogs.com/naaoveGIS/。
1.FlexViewer簡介
FlexViewer框架為Esri提供的可以高效開發(fā)基于WEB的地理信息應(yīng)用系統(tǒng)的一種完全免費(fèi)的應(yīng)用程序框架。目前有兩種版本，一種是針對非開發(fā)人員的版 本，即編譯后的發(fā)布（release）版本；一種是供開發(fā)人員在源框架的基礎(chǔ)上，通過修改代碼和配置文件等，來實(shí)現(xiàn)定制業(yè)務(wù)。
這里我要跟大家一起探討的是面向開發(fā)人員的FlexViewer版本。
2.FlexViewer框架的組成
當(dāng)我們從網(wǎng)上下載到FlexViewer的源碼，通過eclipse加載后便可以看到該框架的組成結(jié)構(gòu)了。
?
?可以看到，有四個(gè)子目錄和三個(gè)文件。
2.1 index.mxml文件
此文件為整個(gè)框架的入口，當(dāng)系統(tǒng)初始化時(shí)首先加載此文件。
2.2 com文件夾
此文件夾下的內(nèi)容至關(guān)重要，配置文件的獲取和解析，地圖的初始化和加載，widget的加載以及事件機(jī)制等都與這個(gè)文件夾有關(guān)系。此為該文件夾下的文件組織：
?
下面以表格的形式給出各模塊的功能：
| 文件名 | 作用 |
| AppEvent.as | 定義了用于在消息總線(EventBus)中使用的消息類 |
| BaseWidget.as | 定義了Widget的基類，所有自定義的Widget均需繼承該類 |
| ConfigData.as | 定義了系統(tǒng)在初始化時(shí)將config.xml文件中的配置項(xiàng)加載內(nèi)存后，用于管理這些配置項(xiàng)的類型 |
| IBaseWidget.as | 定義了接口BaseWidget，同時(shí)類BaseWidget實(shí)現(xiàn)了該接口 |
| IInfowindowTemplate.as | 定義了接口InfowindowTemplate，所有自定義的InfoWindowTemplate均需實(shí)現(xiàn)該接口，同時(shí)自定義模板用于InfoWindow的窗口定義中。 |
| IWidgetContainer.as | 定義了接口IWidgetContainer，所有自定義的WidgetContainer均需實(shí)現(xiàn)該接口。WidgetContainer是用于管理Widget的一個(gè)可視化容易。 |
| IWidgetTemplate.as | 定義了接口IWidgetTemplate，所有自定義的WidgetTemplate均需實(shí)現(xiàn)該接口，同時(shí)自定義模板用于Widget的窗口定義中。 |
| ViewerContainer.mxml | 定義了可視化容器ViewerContainer，該容器是Flex Viewer中構(gòu)件樹的根 |
| ConfigManager.as | 定義了類configmanager，該類負(fù)責(zé)從config文件中加載兵解析全部配置信息，然后將這些信息存儲于數(shù)據(jù)結(jié)構(gòu)configData，最后通過觸發(fā)事件AppEvent.CONFIG_LOADED將configData發(fā)布給其它組件使用 |
| DataManager.as | 定義了類DataManager，負(fù)責(zé)管理與維護(hù)系統(tǒng)內(nèi)部的公共數(shù)據(jù)，使得系統(tǒng)中的各組件、Widget均能將公共數(shù)據(jù)發(fā)布到DataManager中或從其中獲取其它組件發(fā)布的數(shù)據(jù)。 |
| EventBus.as | 繼承了EventDispatcher接口，并使用單例模式向整個(gè)提供中的所有組件提供統(tǒng)一的消息注冊和發(fā)布功能，從而使得各組件之間的完全做到低耦合、高內(nèi)聚的效果 |
| MapManager.mxml | 負(fù)責(zé)根據(jù)config文件中的配置信息初始化地圖控件、底圖、optlayer，以及optlayer所對應(yīng)的InfoWindowWidget，并提供對事件SET_MAP_NAVIGATION（設(shè)置地圖瀏覽工具）、BASEMAP_SWITCH（設(shè)置底圖切換）、SET_MAP_ACTION（設(shè)置繪圖工具）、SHOW_INFOWINDOW（顯示InfoWindow）、MAP_RESIZE（改變地圖控件大小）、DATA_OPT_LAYERS（請求OptLayersTable）、MAP_LAYER_VISIBLE（設(shè)置指定圖層可見性）等的響應(yīng)。 |
| ScriptingManager.as | 保留類，暫無特別用途 |
| SecurityManager.as | 保留類，暫無特別用途 |
| UIManager.as | 負(fù)責(zé)根據(jù)config文件中style的配置信息定義一套系統(tǒng)的UI樣式表 |
| WidgetManager.as | 負(fù)責(zé)根據(jù)config文件的配置自動(dòng)初始化Widget Container，及其包含的Widget控件，同時(shí)提供對事件WIDGET_RUN（打開Widget）、DATA_CREATE_INFOWIDGET（創(chuàng)建OptLayer對應(yīng)的InfoWindow）、WIDGET_FOCUS（設(shè)置Widget獲得焦點(diǎn)）、WIDGET_STATE_CHANGED（關(guān)閉Widget事件響應(yīng)）的響應(yīng)。 |
2.3 popups文件夾
此文件夾的內(nèi)容是在FlexViewer2.3版本后才出現(xiàn)的，在此文件夾中可以通過XML的方式來配置彈出框的顯示方式。以下是其配置的格式：
?
以下是Esri官方中的一個(gè)配置的例子：
?? ? ? ? ??
2.4 widgets文件夾
此為模塊部分。FlexViewer框架可以將其理解為一個(gè)插件式框架，在src文件下已經(jīng)定義了插件引擎、通信機(jī)制、數(shù)據(jù)存儲、配置讀取四個(gè)很重要的部分。而widgets便是我們的獨(dú)立插件部分，在Flex中稱其為module部分。如所有的插件系統(tǒng)一樣，插件必須繼承了某些接口，即實(shí)現(xiàn)了固定協(xié)議的，才能被容器加載。在FlexViewer中，IbaseWidget和IwidgetTemplate是每一個(gè)自定義widget需要繼承實(shí)現(xiàn)的兩個(gè)接口。
2.5 assets文件夾
該目錄為資源文件目錄，主要用于管理工程中的圖片文件，工程中的其它文件可以通過相對路徑的方式來訪問其中的圖片資源。
2.6 config.xml文件
此文件為配置文件，地圖的配置，widget的配置和其他需要使用的配置等都在這里。
2.7 defaults.css文件
為整個(gè)系統(tǒng)的樣式表。
3.框架啟動(dòng)流程
3.1 實(shí)例化——加載組件
我們直接從index.xml中便能看出來整個(gè)框架啟動(dòng)時(shí)的流程了。現(xiàn)在我先給出index.xml的內(nèi)容：
?
可以看到，實(shí)例化的過程是：
?
以上初始化流程圖中，將viewerContainer的初始化放在最后，是因?yàn)殡m然viewerContaner是最先調(diào)入內(nèi)存中開始初始化的，但是卻是在將它的屬性都實(shí)例化完了，才調(diào)用的它的構(gòu)建器，所以圖中默認(rèn)將其放在最后初始化了。
但是實(shí)例化完后，系統(tǒng)的啟動(dòng)卻只是等于把最核心的模塊裝載了，而這些模塊將在接下來一系列的消息觸發(fā)中，完成對框架的填充。
3.2消息觸發(fā)——通過配置填充框架
我首先給出實(shí)例化后觸發(fā)的消息機(jī)制流程圖：
?
下面，我將代碼中與此消息機(jī)制相關(guān)的流程也給大家展現(xiàn)出來。
3.2.1ViewerContainer實(shí)例化化完后觸發(fā)讀配置事件
?
?
3.2.2 configManager讀取完配置后觸發(fā)配置讀完事件
ConfigManager中監(jiān)聽了ViewerContainer初始完成的事件。
?
此時(shí)，ConfigManger開始請求配置文件。
?
當(dāng)把cofig.xml中的配置讀完后，會觸發(fā)配置讀完事件。
?
3.2.3 WidgetManger、MapManager、DataManager等監(jiān)聽配置讀完事件并做出反應(yīng)
這些組件中均寫有對AppEvent.CONFIG_LOADED事件的監(jiān)聽，所以在配置文件讀取完后，這幾個(gè)組件均將做出相關(guān)響應(yīng)。
4.解析核心組件的主要功能
先給出FlexViewer的架構(gòu)圖：
?
?
4.1configManger——讀取配置
?
其中加載的配置文件如果沒特殊修改，將使用默認(rèn)的地址：
?
如果要修改，可以在ViewerContainer里面找到相關(guān)屬性后修改。
在函數(shù)configService_resultHandler中對config文件中的配置做出解析。在源碼中，里面對geoserverURL等做了解析，并且均放入了configData.as中。但是這個(gè)并不是固定的，在自己修改和擴(kuò)充框架時(shí)，可以更具需要在config中添加需要的配置，并且解析后放入其他的自定義文件里。此組件還能將widget相關(guān)配置讀完，存入到configData的對應(yīng)的屬性中：
?
?
4.2dataManager——實(shí)現(xiàn)數(shù)據(jù)共享
我們查看dataManager的代碼，首先就會發(fā)現(xiàn)此類是一個(gè)繼承于EventDispatcher的類，不難推測出這個(gè)類肯定與消息機(jī)制有關(guān)系，但是到底有什么作用呢？
?????
閱讀這個(gè)類中的方法，便能猜出其作用了，這個(gè)類便是為了存儲消息，分發(fā)消息，共享消息用的。舉個(gè)例子，FlexViewer是模塊式框架，一個(gè)Widget只有當(dāng)被調(diào)用時(shí)才會實(shí)例化，于是，當(dāng)widgetA已經(jīng)發(fā)出了幾個(gè)消息后，widgetB才被調(diào)用從而實(shí)例化，此時(shí)widgetB該如何獲得它錯(cuò)過的widgetA中的消息呢。DataManger便能解決這個(gè)難題。
?
4.3mapManager——地圖加載和配置
在mapManager中有這樣幾個(gè)方法：
?
這些方法中可以將配置文件中配置好的基礎(chǔ)地圖和操作地圖等實(shí)例化。并且這幾個(gè)方法均需要調(diào)用一個(gè)共同的函數(shù)：addLayerToMap(layerObject:Object)。所以對不同類型的地圖的實(shí)例化，便是在這里進(jìn)行控制的。如果自己擴(kuò)展了一些自定義地圖類型，便需要在這個(gè)函數(shù)中加上對自定義的地圖類型的支持。
4.4widgetManager——將插件與宿主關(guān)聯(lián)起來
這其中有l(wèi)oadContainer和loadControl方法，便是對插件容器和具體插件的加載。
4.5uiManager——對UI的控制
這個(gè)類主要是實(shí)現(xiàn)對框架樣式的控制。其樣式的配置均是在config.xml中進(jìn)行。
5.總結(jié)
以上我大致將FlexViewer框架的構(gòu)造以及其初始化時(shí)的消息機(jī)制，并且對核心的組件進(jìn)行了大致的介紹。利用Flexviewer框架可以快速的開發(fā)出效果很不錯(cuò)的前端來。這里我給出一個(gè)項(xiàng)目實(shí)例的截圖，此項(xiàng)目便是在FlexViewer的基礎(chǔ)上修改、擴(kuò)展、開發(fā)出來的。在以后的章節(jié)里，我會跟大家分享如何擴(kuò)展Map類、如何自制Widget、以及跟例子相關(guān)的對config.xml文件的配置。相信通過對實(shí)例的探索，大家會對FlexViewer框架有更深的了解。
?
?
-----歡迎轉(zhuǎn)載，但保留版權(quán)，請于明顯處標(biāo)明出處：http://www.cnblogs.com/naaoveGIS/
?????????????????????????????????????????????????????????????????????????? 如果您覺得本文確實(shí)幫助了您，可以微信掃一掃，進(jìn)行小額的打賞和鼓勵(lì)，謝謝 ^_^
總結(jié)
以上是生活随笔為你收集整理的（一）FlexViewer之整体框架解析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在Atom中运行脚本
- 下一篇： 从Pycharm说起