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>

</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第一次開啟時，需要之前的一些資料進行運算，此時即可通過共享機制實現。

Flex Viewer 開發教程（6）Widget與共享資料

相關文章