学习FlexViewer（一）——事件和框架

    ????? 上午做了关于FlexViewer的讲座，项目组决定下面继续在FlexViewer界面上拓展，因此我也有意通过博客与大家分享。众所周知，FlexViewer是由Esri公司推出的基于Web的Flex应用框架，开发人员通过配置文件即可快速搭建一个以地图服务应用为目的的富互联网应用。

?

????? 学习FlexViewer，最重要的是掌握其框架结构，了解FlexViewer组织模式，包括VierContainer、MapManager、ConfigManager、WidgetManager的关联关系，以及事件。本篇将重点讲述FlexViewer的组织原理以及开发方法，先从事件入手，通过事件的分发与监听，将FlexViewer中的各个Manager关联起来，进而明确其组织架构。

?

????? 1、Flex Viewer事件

????? 整个FlexViewer，有两个关于事件的类EventBus和AppEvent。EventBus继承自EventDispatcher类，它是一个singleton类，并且所有AppEvent的分发都要EventBus。AppEvent事件的构造函数如下，参数包括了事件类型（type），对象类型（data）以及回调函数：

????? public function AppEvent(type:String, data:Object = null, callback:Function = null)<br>
?? ? {<br>
??????? super(type);<br>
??????? _data = data;<br>
??????? _callback = callback;<br>
???? }

???? 事件类型：AppEvent的事件类型中涵盖了所有与FlexViewer相关的，其中比较重要的有：

<br>
? ? ? APP_ERROR：APP错误事件<br>
????? CONFIG_LOADED：加载Config文件完成后调用事件

????? MAP_LOADED：加载地图完成后调用

????? SET_MAP_ACTION：与地图交互相关的事件，其data参数中包含有地图交互动作的token值，如Zoomin，Zoomout等；<br>
????? DATA_FETCH_ALL：获得所有数据时调用；

????? DATA_FETCH：获得数据时调用

????? DATA_CREATE_INFOWIDGET：创建Widget时调用<br>
? ??? WIDGET_RUN：Widget运行时调用;

????? WIDGET_CHANGE_STATE：Widget状态变化时调用，其data参数中包含了widgetID和State值<br>
????? WIDGET_FOCUS：Widget得到焦点时调用<br>
????? WIDGET_ADD：添加Widget时调用<br>
????? WIDGET_ADDED：widget已添加后调用

?

???? 2、掌握FlexViewer的架构

?

<img src="http://dl.iteye.com/upload/attachment/599022/a839c1aa-2a27-31ff-a142-c83a7a37b726.bmp" alt="" width="756" height="473">

?

???? FlexViewer中，首先构造的UIComponet就是ViewContainer。ViewContainer中首先要通过httpservice加载config.xml文件，然后加载MapManger、ConfigManager、WidgetManager等对象；

?

???? MapManager与MapMangerSkin共同表达了FlexViewer主视图，实例化了Map对象，然后通过ViewContainer.DispatchEvent方法分发AppEvent.MAP_LOADED事件，事件的参数包含了事件类型(Type)，还包含了对象类型(data参数)，这样就可以通过AppEvent事件的监听获得Map对象了。

?

???? ConfigManger主要用于加载widget的xml文件，每一个widget实例化之前都要加载xml文件，在xml中可以定义一些全局的变量(如geometryservice等)，加载完毕之后同样通过viewContainer.DispatchEvent分发 CONFIG_LOADED事件，并添加相应的事件监听。

?

???? WidgetManager主要用于加载Widget，任何widget制作之后都要在WidgetManager中才能使用，因此该类中主要是Widget相关的事件相应。

?

<img src="http://dl.iteye.com/upload/attachment/599024/4c17e287-f281-3e0d-9e27-b88dafc75678.bmp" alt="">

 
   
     
        <ul style="display:none;">
         

<img src='http://dl.iteye.com/upload/attachment/599022/a839c1aa-2a27-31ff-a142-c83a7a37b726-thumb.bmp' class='magplus' title='点击查看原始大小图片' />

         
         

大小: 182.8 KB

        </ul>
     
   
     
        <ul style="display:none;">
         

<img src='http://dl.iteye.com/upload/attachment/599024/4c17e287-f281-3e0d-9e27-b88dafc75678-thumb.bmp' class='magplus' title='点击查看原始大小图片' />

         
         

大小: 320.3 KB

        </ul>
     
   
   
     

       
• 查看图片附件