作品版权由作者李晓晖和新浪共有,若转载请于分明处标明出处:http://www.cnblogs.com/naaoveGIS/

1.FlexViewer简介

FlexViewer框架为Esri提供的可以快捷开发基于WEB的地理新闻运用种类的一种完全免费的应用程序框架。如今有三种版本,一种是本着非开发人士的版
本,即编译后的发布(release)版本;一种是供开发人士在源框架的根基上,通过改动代码和安插文件等,来兑现定制业务。

那里自己要跟大家一道琢磨的是面向开发人员的FlexViewer版本。

2.FlexViewer框架的结合

当大家从网上下载到FlexViewer的源码,通过eclipse加载后便可以看看该框架的结缘结构了。

 图片 1

 可以见到,有三个子目录和多少个文本。

2.1 index.mxml文件

此文件为任何框架的输入,当系统最先化时首先加载此文件。

2.2 com文件夹

此文件夹下的始末根本,配置文件的拿走和分析,地图的初阶化和加载,widget的加载以及事件机制等都与那一个文件夹有提到。此为该文件夹下的文件协会:

 图片 2

上面以表格的款式提交各模块的功效:

文件名

作用

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的章程来配置弹出框的突显方式。以下是其布置的格式:

 图片 3

以下是Esri官方中的一个布局的例证:

 图片 4       
  图片 5

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的情节:

 图片 6

可以看出,实例化的历程是:

 图片 7

上述先导化流程图中,将viewerContainer的开头化放在最后,是因为即使viewerContaner是首先调入内存中初露开首化的,不过却是在将它的性质都实例化完了,才调用的它的创设器,所以图中默许将其坐落最终起初化了。

然而实例化完后,系统的起步却只是等于把最主旨的模块装载了,而那一个模块将在接下去一多元的音信触发中,达成对框架的填写。

3.2音信触发——通过安排填充框架

自身先是给出实例化后触发的新闻机制流程图:

 图片 8

上边,我将代码中与此音信机制相关的流程也给大家突显出来。

3.2.1ViewerContainer实例化化完后触发读配置事件

 图片 9

 图片 10

3.2.2 configManager读取完配置后触发配置读完事件

ConfigManager中监听了ViewerContainer开端落成的风云。

 图片 11

那时,ConfigManger开首请求配置文件。

 图片 12

当把cofig.xml中的配置读完后,会触发配置读完事件。

 图片 13

3.2.3 WidgetManger、MapManager、DataManager等监听配置读完事件并做出反应

那么些零部件中均写有对App伊夫nt.CONFIG_LOADED事件的监听,所以在安插文件读取完后,那多少个零件均将做出相关响应。

4.解析宗旨零部件的最首要职能

先给出FlexViewer的架构图:

 图片 14

 

4.1configManger——读取配置

 图片 15

中间加载的布署文件如若没尤其修改,将利用默认的地方:

 图片 16

如若要修改,可以在ViewerContainer里面找到相关属性后修改。

在函数configService_resultHandler中对config文件中的配置做出分析。在源码中,里面对geoserverURL等做了剖析,并且均放入了configData.as中。不过这几个并不是定点的,在协调修改和壮大框架时,可以更具须求在config中添加需求的配备,并且解析后放入其余的自定义文件里。此组件还是能将widget相关安排读完,存入到configData的呼应的性质中:

 图片 17

 

4.2dataManager——完成多少共享

大家查阅dataManager的代码,首先就会意识此类是一个连续于伊芙ntDispatcher的类,简单推测出那个类肯定与信息机制有提到,不过究竟有啥样效益吧?

     图片 18

开卷那么些类中的方法,便能猜出其职能了,这么些类便是为了存储消息,分发新闻,共享音信用的。举个例子,FlexViewer是模块式框架,一个Widget唯有当被调用时才会实例化,于是,当widgetA已经发生了多少个音信后,widgetB才被调用从而实例化,此时widgetB该怎么获取它失去的widgetA中的音信啊。DataManger便能一蹴即至那些难点。

 图片 19

4.3mapManager——地图加载和配置

在mapManager中有诸如此类多少个格局:

 图片 20

这么些点子中可以将布署文件中布署好的功底地图和操作地图等实例化。并且那多少个措施均需求调用一个一块的函数:addLayerToMap(layerObject:Object)。所以对差别档次的地图的实例化,便是在此地举行控制的。即使自己壮大了一些自定义地图类型,便必要在那个函数中添加对自定义的地图类型的支持。

4.4widgetManager——将插件与宿主关联起来

这之中有loadContainer和loadControl方法,便是对插件容器和实际插件的加载。

4.5uiManager——对UI的控制

其一类重假诺兑现对框架样式的决定。其样式的安顿均是在config.xml中展开。

5.总结

上述我大概将FlexViewer框架的社团以及其初步化时的新闻机制,并且对基本的零部件举行了大体上的牵线。利用Flexviewer框架可以连忙的付出出职能很不错的前端来。那里我付出一个品类实例的截图,此项目便是在FlexViewer的基本功上修修改改、增加、开发出来的。在将来的章节里,我会跟大家享用怎样伸张Map类、怎么着自制Widget、以及跟例子相关的对config.xml文件的配置。相信通过对实例的探赜索隐,大家会对FlexViewer框架有更深的精通。

 图片 21

 

                         —–欢迎转发,但保留版权,请于鲜明处标明出处:http://www.cnblogs.com/naaoveGIS/

                                                                          
借使您觉得本文确实扶助了你,可以微信扫一扫,举办小额的打赏和鞭策,谢谢
^_^

                                  图片 22

相关文章

网站地图xml地图