(一)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说起