Flex Viewer (二)——体系结构

一、概述

在上一篇文章《深入浅出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模式向整个系统提供数据发布和数据获取的服务,从而实现各构件间的数据共享。

本文原创发表于 博客园,作者为 乐水鱼,博客 http://www.cnblogs.com/wowMVP

时间: 2024-08-01 04:12:38

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

Flex Viewer(三)——Config的原理

一.概述 在上文<深入浅出Flex Viewer(二)——体系结构>中,笔者详细介绍了到Flex Viewer框架,使得读者能够对该框架源代码的关键目录和文件结构和这些文件中所包含或涉及到的系统的哪些构件:以及这些构件间的逻辑关系和连接这些构件所用的关键技术,如:消息总线(EventBus).配置项管理(Config Manager).数据共享机制(DataManager)等内容有一个大概地了解.在本文中将继续介绍Flex Viewer中框架配置技术的设计和实现原理,及其和框架其它组件间的关系

Flex Viewer

一.Flex Viewer简介 Flex Viewer是ESRI公司推出的可以高效开发基于WEB的地理信息应用系统的一种完全免费的应用程序框架.业务人员使用该框架可以无需任何额外的编程就能够通过简单配置的方法快速搭建起一个基于ArcGIS Server的.以地图为中心的富客户端(RIA)应用的原型.该框架中还自带了大量的能够满足各种地图应用需要的Widget,如Identify.GeoRSS.DataExtract.BookMark.NetworkAnalyst.MapSwitcher等地图交互

Flex入门(二)——Flex+BlazeDs+J2ee小实例

首先来简单介绍一下BlazeDS. BlaseDS的核心功能包括RPC Services(远程过程调用服务) 和Messaging Service(消息服务).BlazeDS是一个基于服务器的Java远程调用(remoting)和web消息传递(messaging)技术,使得后台的Java应用程序可以和运行在浏览器上的Flex应用程序能够互相通信.简单来说一个BlazeDS应用包括客户端(Flex或AIR应用程序)和一个服务端(J2EE程序).BlazeDS在期间起着承上启下的作用,Flex和B

Cesium的api之关于viewer(二)

1.构建一个viewer,如下创建:options的参数根据实际情况,进行设定 1 var viewer = new Cesium.Viewer('cesiumContainer', { 2 //Start in Columbus Viewer 3 sceneMode : Cesium.SceneMode.COLUMBUS_VIEW, // 设定3维地图的默认场景模式 4 //Use standard Cesium terrain 5 terrainProvider : new Cesium.C

Spring 教程(二) 体系结构

体系结构 Spring 有可能成为所有企业应用程序的一站式服务点,然而,Spring 是模块化的,允许你挑选和选择适用于你的模块,不必要把剩余部分也引入.下面的部分对在 Spring 框架中所有可用的模块给出了详细的介绍. Spring 框架提供约 20 个模块,可以根据应用程序的要求来使用. 核心容器 核心容器由核心,Bean,上下文和表达式语言模块组成,它们的细节如下: 核心模块提供了框架的基本组成部分,包括 IoC 和依赖注入功能. Bean 模块提供 BeanFactory,它是一个工厂

arcgis viewer for flex 之 自定义widget(arcmap设计pie圆饼图)

自定义Widget 终于可以实现第一个Widget了,按照惯例,我们通过一个Hello World Widget来说明如何在Flex Viewer中开发.编译.配臵.部署和使用自定义Widget.Flex Viewer的源代码中已经包含了一个HelloWorld Widget,我们还是亲手尝试一下吧. 1) 安装Flash Builder,下载Flex Viewer源码,我们使用最新的2.3: 2) 打开Flash Builder,导入Flex Viewer 2.3的源代码: 3) 鼠标放在wi

Arcgis apis for flex项目实例—开发篇(2):鹰眼图

在底图调用完成后,我们要为地图添加一些工具,首先就是出场率很高的鹰眼图.我这里的鹰眼图是从ESRI的Flex Viewer中剥离出来的,申明一下,怕ESRI说我侵权.经常有人质疑我为什么不直接用Viewer而要费心思自己去写一些组件.我个人的经验是Viewer东西太多了,很臃肿,对于我们这样有整洁强迫症的人来说工程里存在大量用不着的代码非常难受,其实也不光是心理作用了,确实Viewer不经过大量优化会加载比较慢.但是,Viewer中有很多思想和很多组件是非常好用的,比如这个鹰眼,所以我们依然要借

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

武汉附近的同学们有福了,这是全球第一次关于Autodesk viewer的教室培训. :) 你可能已经在各种场合听过或看过Autodesk最新推出的大模型浏览器,这是无需插件的浏览器模型,支持几十种数据格式.目前该产品还没有正式发布,但如果你感兴趣,座位紧张,赶紧报名:   http://www.autodesk.com.cn/adsk/servlet/item?siteID=1170359&id=23581540  (这是系列培训中的一部分)   通用无插件大模型浏览器–Autodesk Vi

前端布局神器display:flex

2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现各种页面布局.目前已得到所有现在浏览器的支持. flex浏览器支持 一.Flex布局是什么? Flex是Flexible Box的缩写,翻译成中文就是"弹性盒子",用来为盒装模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/ display: flex; //将对象作为弹性伸缩盒显示 }