一、概述

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

二、框架配置技术是什么

框架配置是Flex Viewer中的一大特色，它能够通过一些简单的配置就能在无需修改框架源代码或重新编译的情况下对系统的参数进行修改，或对框架功能进行快速地扩展，从而可以保证框架始终都具备一个非常稳定的架构的同时还能够满足一定范围内需求的变化。

Flex Viewer中的框架配置技术主要体现在两个方面，即框架级配置和Widget级配置，其中Widget配置将在《深入浅出Flex Viewer (五)——Widget的原理》中介绍，而本文将集中介绍框架级配置。

Flex Viewer中的框架配置功能的核心是位于框架代码根目录下的congfig.xml文件，使用者可以使用规定的语法在该xml文件中对框架的初始化参数进行配置，例如，应用程序的标题、样式风格、地图、图层、Widget等。


<?xml version="1.0" ?>

<!--

////////////////////////////////////////////////////////////////////////////////

//

// Copyright (c) 2010-2011 ESRI

//

// All rights reserved under the copyright laws of the United States.

// You may freely redistribute and use this software, with or

// without modification, provided you include the original copyright

// and use restrictions.  See use restrictions in the file:

// <install location>/License.txt

//

// Read more about ArcGIS Viewer for Flex 2.3 - http://links.esri.com/flexviewer

//

////////////////////////////////////////////////////////////////////////////////

-->

<configuration>

    <title>ArcGIS Viewer for Flex</title>

    <subtitle>a configurable web mapping application</subtitle>

    <logo>assets/images/logo.png</logo>

    <style>

        <colors>0xFFFFFF,0x333333,0x101010,0x000000,0xFFD700</colors>

        <alpha>0.8</alpha>

    </style>

    <!-- replace the following url with your own geometryservice -->

    <geometryservice url="http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer" />

    <!-- replace the following key with your own Bing key -->

    <bing key="Ahw1due6dkmZg98wUJJYLrVmYlDik4oleCg6hoNqx6l2jFYRToImQH1HfH-asjjH"/>

    <!-- UI elements -->

    <widget left="10"  top="50"    config="widgets/Navigation/NavigationWidget.xml" url="widgets/Navigation/NavigationWidget.swf"/>

    <widget right="-2" bottom="-2" config="widgets/OverviewMap/OverviewMapWidget.xml" url="widgets/OverviewMap/OverviewMapWidget.swf"/>

    <widget right="20" top="55"    config="widgets/MapSwitcher/MapSwitcherWidget.xml" url="widgets/MapSwitcher/MapSwitcherWidget.swf"/>

    <widget left="0"   top="0"     config="widgets/HeaderController/HeaderControllerWidget.xml" url="widgets/HeaderController/HeaderControllerWidget.swf"/>

    <map wraparound180="true" initialextent="-14083000 3139000 -10879000 5458000" fullextent="-20000000 -20000000 20000000 20000000" top="40">

        <basemaps>

            <layer label="Streets" type="tiled" visible="true"

                   url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>

            <layer label="Aerial"  type="tiled" visible="false"

                   url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"/>

            <layer label="Topo"    type="tiled" visible="false"

                   url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>

        </basemaps>

        <operationallayers>

            <layer label="Demographics" type="tiled" visible="false" alpha="0.5"

                   url="http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Household_Income/MapServer">

                <sublayer id="1" popupconfig="popups/PopUp_Demographics_BlockGroups.xml"/>

                <sublayer id="2" popupconfig="popups/PopUp_Demographics_Tracts.xml"/>

                <sublayer id="3" popupconfig="popups/PopUp_Demographics_Counties.xml"/>

                <sublayer id="4" popupconfig="popups/PopUp_Demographics_States.xml"/>

            </layer>

            <layer label="Boundaries and Places" type="tiled" visible="false"

                   url="http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer"/>

            <layer label="Fires" type="feature" visible="false" alpha="1.0"

                   popupconfig="popups/PopUp_Fires.xml"

                   url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0"/>

        </operationallayers>

    </map>

    <!-- widgets organized into widget containers that manage close/open etc -->

    <!-- supported layout property options: horizontal(default)|float|vertical|fix-->

    <widgetcontainer layout="float">

        <widget label="Bookmarks"         left="430" top="90"

                icon="assets/images/i_bookmark.png"

                config="widgets/Bookmark/BookmarkWidget.xml"

                url="widgets/Bookmark/BookmarkWidget.swf"/>

        <widget label="Find an address"   left="100" top="90" preload="open"

                icon="assets/images/i_target.png"

                config="widgets/Locate/LocateWidget_Bing.xml"

                url="widgets/Locate/LocateWidget.swf"/>

        <widget label="Louisville Police" left="590" top="280"

                icon="assets/images/i_police.png"

                config="widgets/Query/QueryWidget_Louisville_PoliceStations.xml"

                url="widgets/Query/QueryWidget.swf"/>

        <widget label="Search" left="80" top="280"

                icon="assets/images/i_search.png"

                config="widgets/Search/SearchWidget_Louisville.xml"

                url="widgets/Search/SearchWidget.swf"/>

        <widget label="Earthquakes (GeoRSS)" left="410" top="280"

                icon="assets/images/i_rss.png"

                config="widgets/GeoRSS/GeoRSSWidget.xml"

                url="widgets/GeoRSS/GeoRSSWidget.swf"/>

        <widget label="Draw and Measure" left="60" top="400"

                icon="assets/images/i_draw2.png"

                config="widgets/Draw/DrawWidget.xml"

                url="widgets/Draw/DrawWidget.swf"/>

        <widget label="Print" left="390" top="400"

                icon="assets/images/i_print.png"

                config="widgets/Print/PrintWidget.xml"

                url="widgets/Print/PrintWidget.swf"/>

        <!--

        <widget label="My first widget"

                icon="assets/images/i_widget.png"

                config="widgets/Samples/HelloWorld/HelloWorldWidget.xml"

                url="widgets/Samples/HelloWorld/HelloWorldWidget.swf"/>

        -->

    </widgetcontainer>

</configuration>

代码1. config.xml

三、框架配置的实现原理

在框架中主要有六大组件，即ViewerContainer、ConfigManager、DataManager、MapManager、UIManager、WidgetManager（见《深入浅出Flex Viewer(二)——体系结构》）。在进行框架配置初始化的整个过程中，这些组件均有参与。从参与程度来看，ConfigManager是配置文件解析的核心类，ViewerContainer类的实例管理了其它组件实例，另外四个组件主要是使用ConfigManager中得到的configData（记录了xml文件中所有的相关参数）。那么，下面将深入剖析源代码来呈现配置文件初始化的整个过程。

在flex应用程序的入口文件index.mxml中，代码如下：


    <viewer:ViewerContainer>

        <viewer:configManager>

            <managers:ConfigManager/>

        </viewer:configManager>

        <viewer:dataManager>

            <managers:DataManager/>

        </viewer:dataManager>

        <viewer:mapManager>

            <managers:MapManager/>

        </viewer:mapManager>

        <viewer:uiManager>

            <managers:UIManager/>

        </viewer:uiManager>

        <viewer:widgetManager>

            <managers:WidgetManager/>

        </viewer:widgetManager>

    </viewer:ViewerContainer>

代码2.index.mxml

在以上代码中，ViewerContainer的实例管理了其它的组件，在各类实例的初始化时，其初始化的顺序如下（由于DataManager、MapManager、UIManager、WidgetManager等四类在框架配置过程中的地位相同，均是配置参数的使用方，所以在下表中仅列DataManager）：

顺序号

ViewerContainer

ConfigManager

 DataManager

1

 创建实例 
xml配置文件地址的来源： 
A、直接硬编码 
B、从url参数中解析出配置文件地址		    

2

  

创建实例

监听事件：

ViewerContainer.CONTAINER_INITIALIZED

  

3

    

创建实例：

监听：

AppEvent.CONFIG_LOADED

AppEvent.DATA_FETCH_ALL

AppEvent.DATA_PUBLISH

AppEvent.DATA_FETCH

4

Init

监听：

AppEvent.APP_ERROR

AppEvent.CONFIG_LOADED

    

5

事件发布：

ViewerContainer.CONTAINER_INITIALIZED

    

6

  

处理事件：

ViewerContainer.CONTAINER_INITIALIZED

Init：

config：加载并解析ViewerContainer中设置的配置文件 ，最后填入configData变量

  

7

  

事件发布：

AppEvent.CONFIG_LOADED （configData）

  

8

    

接收并处理事件：

AppEvent.CONFIG_LOADED

当ConfigManager中发布事件AppEvent.CONFIG_LOADED的同时将从配置文件中解析出来的配置参数变量configData作为事件参数发布到消息总线上，然后凡是订阅了该消息的组件均会在其相应的事件处理函数中接收到configData变量，从而对其自身进行初始化。

这便是框架配置初始化的全部过程。

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

Flex Viewer(三)——Config的原理的更多相关文章

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

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

  2. Flex Viewer（二） 体系结构

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

  3. Flex Viewer

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

  4. Spring Boot干货系列：（三）启动原理解析

    Spring Boot干货系列:(三)启动原理解析 2017-03-13 嘟嘟MD 嘟爷java超神学堂 前言 前面几章我们见识了SpringBoot为我们做的自动配置,确实方便快捷,但是对于新手来说 ...

  5. TCP三次握手原理详解

    TCP/IP协议不是TCP和IP这两个协议的合称,而是指因特网整个TCP/IP协议族. 从协议分层模型方面来讲,TCP/IP由四个层次组成:网络接口层.网络层.传输层.应用层. TCP协议:即传输控制 ...

  6. 【Unity Shader】（三） ------ 光照模型原理及漫反射和高光反射的实现

    [Unity Shader](三) ---------------- 光照模型原理及漫反射和高光反射的实现 [Unity Shader](四) ------ 纹理之法线纹理.单张纹理及遮罩纹理的实现 ...

  7. 深入理解NIO（三）—— NIO原理及部分源码的解析

    深入理解NIO(三)—— NIO原理及部分源码的解析 欢迎回到淦™的源码看爆系列 在看完前面两个系列之后,相信大家对NIO也有了一定的理解,接下来我们就来深入源码去解读它,我这里的是OpenJDK-8 ...

  8. TCP三次握手原理

    本文主要讲述的是 1.TCP协议三次握手原理,以及为什么要三次握手,两次握手带来的不利后果. 2.TCP协议四次挥手原理,为什么要四次挥手. TCP协议三次握手原理: 首先,给张图片,建立TCP三次握 ...

  9. 【转】Spring Boot干货系列：（三）启动原理解析

    前言 前面几章我们见识了SpringBoot为我们做的自动配置,确实方便快捷,但是对于新手来说,如果不大懂SpringBoot内部启动原理,以后难免会吃亏.所以这次博主就跟你们一起一步步揭开Sprin ...

随机推荐

  1. Android横竖屏切换及其对应布局加载问题

    第一,横竖屏切换连带横竖屏布局问题: 如果要让软件在横竖屏之间切换,由于横竖屏的高宽会发生转换,有可能会要求不同的布局. 可以通过以下两种方法来切换布局: 1)在res目录下建立layout-land ...

  2. 初探JavaScript（一）——也谈元素节点、属性节点、文本节点

    Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...

  3. ShineTime - 带有 CSS3 闪亮特效的缩略图相册

    ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...

  4. 12个新潮的 HTML5 & CSS3 网站设计欣赏

    响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案. HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览. 今天, ...

  5. 【知识积累】DES算法之C#加密&Java解密

    一.前言 在项目需要添加安全模块,客户端调用服务端发布的service必须要经过验证,加密算法采用DES,客户端采用C#进行加密,服务端使用Java进行解密.废话不多说,直接上代码. 二.客户端 客户 ...

  6. C#中enum类型

    最近碰到了枚举类型,就顺便整理下. 枚举的基类Enum,可以是除 Char 外的任何整型.不做显示声明的话,默认是整形(Int32). 声明一个Enum类型: /// <summary> ...

  7. Elasticsearch 管理文档

    ES支持近实时的索引.更新.查询.删除文档,近实时就意味着刚刚索引的数据需要1秒钟后才能搜索到,这也是与传统的SQL数据库不同的地方. 更多的ES文档资料参考:Elasticsearch官方文档翻译 ...

  8. Visual Studio开发Cordova应用示例

    作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5455728.html 本文的GIF动画均使用ScreenToGif进行录制. Cordova是什么? ...

  9. 模拟checkbox的最优最简方法

    <label> <input type="/> <span class="iconfont"></span> </l ...

  10. 关于IE6中做兼容的那点事。

    前言 对于程序员来说,一听到你做的程序必须兼容IE6(当然主流浏览器肯定得兼容的),那颗滚烫的心瞬间哇凉哇凉的,但是有时,项目就要求这样,你也只能硬着头皮跟IE6来个亲密接触,最近正好做了个项目,关于 ...