深入浅出Flex Viewer (二)——体系结构

一、概述在上一篇文章《深入浅出Flex Viewer (一)——概述》中，笔者对Flex Viewer用于构建以地图为中心的富客户端（RIA）应用的原型的功能和价值做了简要地介绍。在本文中，笔者将继续介绍该框架的体系结构。通过本文，读者可以详细了解到FlexViewer框架源代码的关键目录和文件结构，以及这些文件中所包含或涉及到的系统的哪些构件（第二章）；以及这些构件间的逻辑

奔跑的熊猫

936人浏览 · 2013-08-02 17:45:01

奔跑的熊猫 · 2013-08-02 17:45:01 发布

一、概述

在上一篇文章《深入浅出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框架源代码的关键目录和文件结构，以及这些文件中所包含或涉及到的系统的哪些构件；以及这些构件间的逻辑关系和连接这些构件所用的关键技术，如：消息总线（EventBus）、配置项管理（Config Manager）、数据共享机制（DataManager）的基本介绍。

那么在本系列下一篇文章《深入浅出Flex Viewer (三)——Config的原理》中，笔者将介绍Config文件所支持的所有配置项，以及用于解析该配置项的构件，及其相应的设计原理和数据结构，从而为读者对《深入浅出Flex Viewer (四)——系统初始化的那些事儿》的理解作铺垫。