一、概述

在上一篇文章《深入浅出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. 深入浅出js事件

    深入浅出js事件 一.事件流 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> & ...

  2. E1. Array and Segments (Easy version)(暴力) && E2. Array and Segments (Hard version)(线段树维护)

    题目链接: E1:http://codeforces.com/contest/1108/problem/E1 E2:http://codeforces.com/contest/1108/problem ...

  3. JQuery效果隐藏/显示

    hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...

  4. usb_control_msg函数用法和说明

    usb_control_msg是没有用到urb的在USB中简单进行发送和接收的一种机制,用于少量的数据通信.原型为:  程序代码 linux+v2.6.35/drivers/usb/core/mess ...

  5. win7下PHP+MySQL+CoreSeek中文检索引擎配置

    1.Windows下的coreseek安装测试 (64位win7旗舰版) 官方参考:http://www.coreseek.cn/products-install/install_on_windows ...

  6. HttpClient使用之下载远程服务器中的文件(注意目录遍历漏洞)

    参考文献: http://bbs.csdn.net/topics/390952011 http://blog.csdn.net/ljj_9/article/details/53306468 1.下载地 ...

  7. Linux:安装mysql

    #install mysql$ rpm -ivh MySQL-client-5.5.28-1.rhel5.x86_64.rpm --nodeps$ rpm -ivh MySQL-server-5.5. ...

  8. Windows caffe VGG人脸识别

    caffe自带的例子有mnist和cifar10,cifar10和mnist的运行方式类型,下好图片数据文件后,训练例子中的模型,然后测试模型,也可以自己用图片进行预测分类(自己图片最好是cifar1 ...

  9. Smashing The Browser:From Vulnerability Discovery To Exploit学习记录

    浏览器Fuzz技术 漏洞挖掘 白盒挖掘 代码审计 自动化代码分析 黑盒挖掘 Fuzzing 两种Fuzzing技术 静态Fuzzing 基于变异的 文件.文档 多媒体 bf3 基于生成的 浏览器 重点 ...

  10. poj 2524 求连通分量(并查集模板题)

    求连通分量 Sample Input 10 91 21 31 41 51 61 71 81 91 1010 42 34 54 85 80 0Sample Output Case 1: 1Case 2: ...