Flex Viewer 开发教程（6）Widget与共享数据

Flex Viewer通过DataManager提供数据共享服务，各个模块可通过事件进行数据共享和数据获取。DataManager负责将共享数据以key-value的形式存储于内存，并随时准备接收和派发共享数据。先来分析一下DataManager的代码：

public class DataManager extends EventDispatcher{       private var dataTable:Hashtable; ①       public function DataManager(){ super(); dataTable=new Hashtable(); ViewerContainer.addEventListener(AppEvent.CONFIG_LOADED, config);②         //this is a example to setup the listner to get the type of data  the Data         //Manager is interested in.        ViewerContainer.addEventListener(AppEvent.DATA_FETCH_ALL, fetchAllData);③        ViewerContainer.addEventListener(AppEvent.DATA_PUBLISH, addData);④         ViewerContainer.addEventListener(AppEvent.DATA_FETCH, fetchData);⑤     }   private function config(event:AppEvent):void{ }       private function fetchAllData(event:AppEvent):void{⑥        ViewerContainer.dispatchEvent(new AppEvent(AppEvent.DATA_SENT,  dataTable));     }       private function fetchData(event:AppEvent):void{⑦        var key:String=event.data.key as String;        var data:Object={key: key, collection: dataTable.find(key)};        ViewerContainer.dispatchEvent(new AppEvent(AppEvent.DATA_SENT, data));     }       private function addData(event:AppEvent):void{⑧        var key:String=event.data.key;        if (key){            var dataCollection:Object=event.data.collection;            if (dataTable.containsKey(key)){               dataTable.remove(key);            }            dataTable.add(key, dataCollection);            //var data:Object={key: key, data: dataTable};               // change by ropp to just send new published data               var data:Object={key: key, data: dataCollection};            ViewerContainer.dispatchEvent(new AppEvent(AppEvent.DATA_NEW_PUBLISHED, data));        }     } }

①    哈希表实例，用来以key-value的形式存储共享数据；

②    监听CONFIG_LOADED事件；

③    监听DATA_FETCH_ALL（获取所有共享数据）事件；

④    监听DATA_PUBLISH（发布共享数据）事件；

⑤    监听DATA_FETCH（根据key获取共享数据）事件；

⑥    DATA_FETCH_ALL事件响应方法；

⑦    DATA_FETCH事件响应方法，根据key返回对应的共享数据；

⑧    DATA_PUBLISH事件响应方法，将发布的共享数据保存，并将最新的共享数据分发出去（DATA_NEW_PUBLISHED事件）。此处源代码有一点小问题，修改见注释。

再来看一下BaseWidget对共享数据的支持，BaseWidget有如下代码：

/**  * Add information from a widget to the DataManager so that it can be shared  between widgets.  * @param key the widget name  * @param arrayCollection the list of object in infoData structure.  */ public function addSharedData(key:String, arrayCollection:ArrayCollection):void{①     var data:Object = {                 key: key,                 collection: arrayCollection     }; ViewerContainer.dispatchEvent(new AppEvent(AppEvent.DATA_PUBLISH,  data)); } /**  * Fetch shared data from DataManager.  */ public function fetchSharedData():void{② ViewerContainer.dispatchEvent(new AppEvent(AppEvent.DATA_FETCH_ALL)); } /** * Fetch share data from DataManager by key * @param key */ public function fetchShareDataByKey(key:String):void{③新添加方法 ViewerContainer.dispatchEvent(new AppEvent(AppEvent.DATA_FETCH, {key:key})); }

①    addShareData()方法用来向DataManager发布共享数据；

②    fetchShareData()方法用来向DataManager请求所有的共享数据；

③    fetchShareDataByKey()方法在BaseWidget中未提供，我们不妨把这个方法加上去，用来向DataManager请求以key存储的共享数据。

下面实现一个HelloDataManagerWidget来说明如何发布和获取共享数据，代码如下：

<?xml version="1.0" encoding="utf-8"?> <viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"                  xmlns:s="library://ns.adobe.com/flex/spark"                  xmlns:mx="library://ns.adobe.com/flex/mx"                  xmlns:viewer="com.esri.viewer.*"                  creationComplete="init()">     <fx:Script>        <![CDATA[            import com.esri.viewer.AppEvent;            import com.esri.viewer.ViewerContainer;            import com.esri.viewer.utils.Hashtable;            import mx.collections.ArrayCollection;              private function init():void{①               ViewerContainer.addEventListener(AppEvent.DATA_SENT,  dataSentHandler); ViewerContainer.addEventListener(AppEvent.DATA_NEW_PUBL ISHED, dataNewPublishedHandler);            }              private function dataSentHandler(event:AppEvent):void{②               if (event.data is Hashtable){                   var keyValue:String="";                   var table:Hashtable=Hashtable(event.data);                   var keySet:Array=table.getKeySet();                   for each (var key:String in keySet){                      keyValue+="key: " + key + "; value: " + String(table.find(key)) + "/n";                   }                   allValue.text=keyValue;               }               else if (event.data.collection)                   fValue.text=event.data.collection[0];            }              private function dataNewPublishedHandler(event:AppEvent):void{③               var data:Object=event.data;               var key:String=data.key;               var value:String=data.data[0];               this.nKey.text=key;               this.nValue.text=value;              }              private function shareData():void{④               this.addSharedData(key.text, new ArrayCollection([value.text]));            }              private function fetchByKey():void{⑤               this.fetchShareDataByKey(fKey.text);            }              private function fetchAll():void{⑥               this.fetchSharedData();            }        ]]>     </fx:Script>     <viewer:WidgetTemplate width="500" height="300">        <s:VGroup width="100%" height="100%">            <s:HGroup width="100%" verticalAlign="middle">               <s:Label text="Key"/>               <s:TextInput id="key"/>               <s:Label text="Value"/>               <s:TextInput id="value"/>               <s:Button label="Share" click="shareData()"/>            </s:HGroup>            <s:HGroup width="100%" verticalAlign="middle">               <s:Label text="New Share Data"/>               <s:Label text="Key"/>               <s:TextInput id="nKey"/>               <s:Label text="Value"/>               <s:TextInput id="nValue"/>            </s:HGroup>            <s:HGroup width="100%" verticalAlign="middle">               <s:Label text="Key"/>               <s:TextInput id="fKey"/>               <s:Button label="Fetch by Key" click="fetchByKey()"/>               <s:Label text="Value"/>               <s:TextInput id="fValue"/>            </s:HGroup>            <s:VGroup width="100%" height="100%"                     verticalAlign="middle" horizontalAlign="center">               <s:Button label="Fetch All" click="fetchAll()"/>               <s:TextArea id="allValue" width="100%" height="100%"/>            </s:VGroup>        </s:VGroup>     </viewer:WidgetTemplate> </viewer:BaseWidget>

①    在Widget的creationComplete事件的响应方法中，通过ViewerContainer对DATA_SENT和DATA_NEW_PUBLISHED事件进行监听。

②    DATA_SENT事件的响应方法，DataManager在两种情况下派发DATA_SENT事件，一是获取所有的共享数据，二是通过key获取共享数据。所以在此实现方法中要对这两种数据区别对待，如果返回的数据是Hashtable类型，则返回的是所有的共享数据，否则返回的是根据key获取的共享数据。

③    DATA_NEW_PUBLISHED事件的响应方法，获取的是最新被共享的数据。DataManager会把最新被共享的数据分发出来（我们已经对DataManager的addData()方法进行了修改，以期达到这个目的）。

④    调用addShareData()方法共享数据。

⑤    调用fetchShareDataByKey()方法通过key获取共享数据。

⑥    调用fetchShareData()方法获取所有的共享数据。

HelloDataManagerWidget运行时如下图所示:

 

u  点击Share按钮：共享key-value数据，同时最新的共享数据会在New Share Data中显示出来；

u  点击Fetch by Key按钮：根据key获取value；

u  点击Fetch All按钮：获取所有的共享数据。

数据共享机制为业务系统开发提供了很大的方便，比如当一个Widget第一次打开时，需要之前的一些数据进行运算，此时即可通过共享机制实现