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); }
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)) + " "; } allValue.text=keyvalue; } else if (event.data.collection) fValue.text=event.data.collection[0]; }
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; }
function shareData():void{④ this.addSharedData(key.text, new ArrayCollection([value.text])); }
function fetchByKey():void{⑤ this.fetchShareDataByKey(fKey.text); }
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="New Share Data"/> <s:Label text="nKey"/> <s:Label text="nValue"/> </s:HGroup> <s:HGroup width="fKey"/> <s:Button label="Fetch by Key" click="fetchByKey()"/> <s:Label text="fValue"/> </s:HGroup> <s:VGroup width="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运行时如下图所示:
a) 点击Fetch All按钮：获取所有的共享数据。
数据共享机制为业务系统开发提供了很大的方便，比如当一个Widget第 一次打开时，需要之前的一些数据进行运算，此时即可通过共享机制实现。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
