深入浅出Flex+Viewer+2[1].1(二)——体系结构
一、概述 ??????在上一篇文章《深入浅出Flex?Viewer?2.1(一)——概述》中,笔者对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框架相关的所有核心代码,其中关键文件如下:
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?2.1(三)——Config的原理》中,笔者将介绍Config文件所支持的所有配置项,以及用于解析该配置项的构件,及其相应的设计原理和数据结构,从而为读者对《深入浅出Flex?Viewer?2.1(四)——系统初始化的那些事儿》的理解作铺垫。 五、系列文章目录 ?????????《深入浅出Flex?Viewer?2.1(一)——概述》 ?????????《深入浅出Flex?Viewer?2.1(二)——体系结构》 ?????????《深入浅出Flex?Viewer?2.1(三)——Config文件详解》 ?????????《深入浅出Flex?Viewer?2.1(四)——系统初始化的那些事儿》 ?????????《深入浅出Flex?Viewer?2.1(五)——Widget的原理》 ?????????《深入浅出Flex?Viewer?2.1(六)——如何增加新的数据源》 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |