一、概述

在上一篇文章《深入浅出Flex Viewer (一)——概述》中,笔者对Flex Viewer用于构建以地图为中心的富客户端(RIA)应用的原型的功能和价值做了简要地介绍。在本文中,笔者将继续介绍该框架的体系结构。通过本文,读者可以详细了解到Flex Viewer框架源代码的关键目录和文件结构,以及这些文件中所包含或涉及到的系统的哪些构件(第二章);以及这些构件间的逻辑关系和连接这些构件所用的关键技术,如:消息总线(EventBus)、配置项管理(Config Manager)、数据共享机制(DataManager)的基本介绍(第三章)。

二、框架源码的结构视图

一般来说默认的Flex Viewer框架的源代码的结构如下图所示,其中目录结构图截取于Flash Builder 4.0,由于FB根据工程中目录和文件的语义将目录进行了逻辑上的重新组织,所以其可能与Flex Viewer实际的物理目录不一致:

图1 FB中的源代码目录

在源代码的根目录src下,存在4个子目录和3个文件,它们的功能分别是:

A、(默认包)

在目录下存在两个文件(FlexUnitCompilerApplication.mxml是FB自动生成的文件,可忽略),其中

1、index.mxml。它是整个框架的总入口,也就是说在运行时Flash Player也就是调用该文件所对应的flash文件来启动整个系统的;

2、defaults.css。它是整个系统的css样式表文件。

B、assets.image

该目录主要用于管理工程中的图片文件,工程中的其它文件可以通过相对路径的方式来访问其中的图片资源。

C、com.esri.viewer

该目录管理了Flex Viewer框架相关的所有核心代码,其中关键文件如下:

文件名

作用

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事件响应)的响应。

   

D、Widgets目录

该目录管理了系统中所有Widget的代码。

E、根目录下的config.xml文件

config.xml文件主要用于记录系统的配置项,以使得使用者能够在不修改框架代码的情况下来自定义系统的UI或功能。

三、构件的逻辑结构视图

在系统架构的逻辑结构上,框架大体上可分解为8个主要的架构元素:Viewer Container、Config Manager、UI Manager、Control Bar、Map Manager、Widget Manager、Data Manager,以及消息总线(EventBus)。它们之间的关系如下图所示:

图2 系统的架构图

其中该架构中存在着以下几个关键点:

A、消息总线

图中的Delegate即为消息总线(EventBus)。EventBus在整个系统中起到了至关重要的作用,即向整个系统中的所有组件提供统一的消息注册和发布功能,所有构件均仅和EventBus进行交互,从而使得各组件之间的完全做到低耦合、高内聚的效果。

图3 消息总线与其它构件的交互

B、Viewer Container

Viewer Container是所有其它架构元素的根节点,它直接作为可视化控件嵌入到页面文件index.mxml中,如下index.mxml中的代码所示:

图4 index.mxml的代码

C、Config Manager

该类负责从config文件中加载兵解析全部配置信息,然后将这些信息存储于数据结构configData,最后通过向EventBus触发事件AppEvent.CONFIG_LOADED将configData发布给其它构件使用。同时,其它任何向EventBus监听了该事件的构件(UI Manager、Map Manager、Widget Manager、Viewer Container等),均可自动调用相应的事件处理函数。

D、Data Manager

其内部运行原理主要是定义了一个用于存储公共数据的Hash表,并使用Singleton模式向整个系统提供数据发布和数据获取的服务,从而实现各构件间的数据共享。

Flex Viewer(二) 体系结构的更多相关文章

  1. Flex Viewer (二)——体系结构

    一.概述 在上一篇文章<深入浅出Flex Viewer (一)——概述>中,笔者对Flex Viewer用于构建以地图为中心的富客户端(RIA)应用的原型的功能和价值做了简要地介绍.在本文 ...

  2. Flex Viewer(三)——Config的原理

    一.概述 在上文<深入浅出Flex Viewer(二)——体系结构>中,笔者详细介绍了到Flex Viewer框架,使得读者能够对该框架源代码的关键目录和文件结构和这些文件中所包含或涉及到 ...

  3. Flex Viewer

    一.Flex Viewer简介 Flex Viewer是ESRI公司推出的可以高效开发基于WEB的地理信息应用系统的一种完全免费的应用程序框架.业务人员使用该框架可以无需任何额外的编程就能够通过简单配 ...

  4. Cesium的api之关于viewer(二)

    1.构建一个viewer,如下创建:options的参数根据实际情况,进行设定 var viewer = new Cesium.Viewer('cesiumContainer', { //Start ...

  5. 用Sample Flex Viewer框架创建GeoWeb应用程序

    ArcGIS FlexView 开发指南(中文) 在线预览:https://wenku.baidu.com/view/4c08cc78168884868762d616.html idea : http ...

  6. 无插件的大模型浏览器Autodesk Viewer开发培训-武汉-2014年8月28日 9:00 – 12:00

    武汉附近的同学们有福了,这是全球第一次关于Autodesk viewer的教室培训. :) 你可能已经在各种场合听过或看过Autodesk最新推出的大模型浏览器,这是无需插件的浏览器模型,支持几十种数 ...

  7. Autodesk 产品开发培训开始报名-8月26~28-武汉– Revit, Vault, Autodesk Viewer, Navisworks

    为了帮助Autodesk中国地区的二次开发人员有机会系统地了解与学习Autodesk 在BIM解决方案中的旗舰产品 Revit以及Navisworks等产品的最新开发技术,并有机会与Autodesk ...

  8. 布局神器display:flex

    2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现各种页面布局.目前已得到所有现在浏览器的支持.   flex浏览器支持 一.Flex布局是什么? Flex是Flexi ...

  9. 前端布局神器display:flex

    2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现各种页面布局.目前已得到所有现在浏览器的支持.   flex浏览器支持 一.Flex布局是什么? Flex是Flexi ...

随机推荐

  1. springboot配置mybatis的mapper路径

    1.在src/main/resources/目录下新建mybatis文件夹,将xxx.xml文件放入该文件夹内 2.在application.yml文件中配置: mybatis: configurat ...

  2. ZJOI2019爆蛋记

    Day-2 玩了一个下午,逛了填海校园,晚上吃肯德基 Day-1 上午听lyx巨佬讲课,讲到一半发现,越听越听不懂... 于是打开电脑开始刷知乎 下午听kcz孔爷讲课,emmmm电脑被我玩没电了... ...

  3. centos6.5安装maridb5.5.51

    1.先创建关于mariadb的yum源 vi /etc/yum.repos.d/MariaDB.repo [mariadb] name = MariaDB baseurl = http://yum.m ...

  4. 数组slice方法

    slice slice(start,end):方法可从已有数组中返回选定的元素,返回一个新数组,包含从start到end(不包含该元素)的数组元素.(不会改变原数组) start参数:必须,规定从何处 ...

  5. selenium之 chromedriver与chrome版本映射表(更新至v2.34)

    看到网上基本没有最新的chromedriver与chrome的对应关系表,便兴起整理了一份如下,希望对大家有用: chromedriver版本 支持的Chrome版本 v2.34 v61-63 v2. ...

  6. vue之给a标签赋值

    <li v-for="(bp,index) in bpLists"> <a class="bidPublicityTitle" :href=& ...

  7. 测试开发之前端——No1.HTML和HTML5

    学习之前,让我们先来了解一下HTML. 它的英文全称是:Hyper Text Markup Language,中文通常被称为超文本标记语言,HTML是Internet中用于编写网页的主要语言,HTML ...

  8. 墨刀 vs Axure RP

    https://www.jianshu.com/p/b4b9c1f15304 墨刀https://modao.cc/ Axure RP https://www.axure.com/https://ww ...

  9. docker:定制node.js的版本

    本想用alpine,但如果想使用node.js 6.3.1版本的软件, 总会搞不定glibc和libstdc++报一个无法识别版本信息的错误. 搞了一天,算了.使用debian:stretch-sli ...

  10. 一份可以发布jar包到MAVEN中央仓库的POM

    [2017-01-03 更新]将基础的pom抽离成一个项目无关的parent pom,euler-framework的pom继承这个parent pom 今天在家折腾了一下怎么把Jar包发布到Mave ...