小菜毛毛技術分享

最近學習flex，參考了不少網上的資料，特別是 中國flex開發(fā)者（http://www.flexer.cn/）。flex數(shù)據(jù)交互是一個關鍵，做個學習總結，請flex老鳥指正！

flex和后端的數(shù)據(jù)交互有很多方式，flex可以使用ActionScript讀寫文件（xml、txt）的形式存儲顯示數(shù)據(jù)，
在Flex 3.0中新增了對本地數(shù)據(jù)庫（.db格式）操作的類，可用于讀取本地的數(shù)據(jù)庫數(shù)據(jù)。新增了對PDF數(shù)據(jù)
操作的類，可用于讀取PDF數(shù)據(jù)。

xml文件方式

XML優(yōu)點是簡單小巧、存儲方便、檢索快速。所以，XML常用于數(shù)據(jù)存儲和數(shù)據(jù)交換。Flex 3.使用URLLoader類可方便地傳輸XML數(shù)據(jù)。
使用XML方式傳輸數(shù)據(jù)的步驟如下所示。
新建名為"tree.xml"文件，用以存儲XML數(shù)據(jù):

<?xml version="1.0" encoding="utf-8"?>
<menus>
<node label="Mail">
<node label="Inbox"/>
<node label="Personal Folder">
<node label="Demo"/>
<node label="Personal"/>
<node label="Saved Mail"/>
<node label="bar"/>
</node>
<node label="Calendar"/>
<node label="Sent"/>
<node label="Trash"/>
</node>
</menus>

xml文件的讀寫我們可以用FileStream類來實現(xiàn)：
讀取xml文件：

   var testXML:XML;
var file:File = File.documentsDirectory.resolvePath("tree.xml");
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.READ);
testXML = XML(fileStream.readUTFBytes(fileStream.bytesAvailable));
fileStream.close();

寫回xml文件

   var testXML:XML=<content>content</content>......;
var file:File = File.documentsDirectory.resolvePath("tree.xml");
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.WRITE);
var outputString:String = '<?xml version="1.0" encoding="utf-8"?>\n';
outputString += testXML.toXMLString();
fileStream.writeUTFBytes(outputString);
fileStream.close();

需要說明一下的是文件打開方式：FileMode
READ －－設置文件打開方式為只讀
WRITE－－設置文件打開方式為寫數(shù)據(jù)。文件不存在，則創(chuàng)建；文件存在，則覆蓋原有數(shù)據(jù)。
APPEND－－設置文件打開方式為追加。文件不存在，則創(chuàng)建；文件存在，則新數(shù)據(jù)從文件末尾開始增加。
UPDATE－－設置文件打開方式為讀寫。文件不存在，則創(chuàng)建。設置該模式通常用于隨機讀寫訪問文件。可以從文件的任意位置讀取，寫入數(shù)據(jù)時，只有寫入位置的存在字節(jié)被覆蓋，其他所有字節(jié)不受影響。

這里我們使用URLRequest類來加載xml數(shù)據(jù)，編寫應用程序初始化處理函數(shù)loadXML。
變量，用以指明XML文件路徑。
public function loadXML():void//應用程序初始化處理函數(shù)
{
    //定義URLRequest實例，指定文件地址。
    var request:URLRequest=new URLRequest("tree.xml");
    loader.load(request);//加載XML文件
    loader.addEventListener(Event.COMPLETE,completeHandle);     //添加加載完成時的監(jiān)聽
}

loader.addEventListener(Event.COMPLETE,completeHandle)語句表示添加對XML加載完成事件的監(jiān)聽。一旦加載完成執(zhí)行
completeHandle函數(shù)。完成剩余MXML代碼。剩余代碼包括completeHandle函數(shù)，<mx:Tree>組件設計等。
以下代碼是完整的MXML代碼。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontFamily="simsun"
fontSize="12" layout="absolute" width="242" height="442" creationComplete="loadXML()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
public var loader:URLLoader=new URLLoader();
public var menus:XML=new XML();
public function loadXML():void
{
var request:URLRequest=new URLRequest("tree.xml");
loader.load(request);
loader.addEventListener(Event.COMPLETE,completeHandle);
}
public function completeHandle(e:Event):void
{
menus=XML(loader.data);
var results:XMLList=menus.node;
tree.dataProvider=results;
}
]]>
</mx:Script>
<mx:Tree id="tree" x="10" y="35" width="218" height="397" labelField="@label" />
<mx:Label x="10" y="10" text="Tree Nodes From XML File"/>
</mx:Application>

這是運行結果截圖：



<mx:HTTPService>組件方式


<mx:HTTPService>組件可與所有的后端程序交互。例如，ASP、ASP.Net、JSP、PHP等。
以下是一個<mx:HTTPService>組件語法示例：
<mx:HTTPService id="feedRequest" url="http://localhost:8080/myflex/helloworld?para_1=para_1&para_2=para_2" result="showResult(event)" />
id唯一標識該組件，url是數(shù)據(jù)提交的地址，可以在地址后面添加參數(shù)，提交到后端進行處理，處理后
再返回Flex可識別的數(shù)據(jù)類型，如數(shù)組型、XML型、Object型等。

<mx:HTTPService>組件返回的數(shù)據(jù)存儲于ResultEvent類中。使用<mx:HTTPService>組件的result事件可處理HTTP程序返回的數(shù)據(jù)。
eg. <mx:HTTPService result="處理函數(shù)名">

返回的數(shù)據(jù)存儲于ResultEvent類的result屬性下。各種數(shù)據(jù)的具體位置與HTTP程序的處理結果有關。
數(shù)據(jù)返回后的處理方法示例：

import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
private function showResult(e:ResultEvent):void
{
Alert.show(e.result as String);
}

來一個簡單的例子會讓你更加明白的！

這是客戶端mxml的源代碼：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
private var arr:Array=new Array();
private function addHandle():void
{
myHttp.url="http://localhost:8080/myflex/sum";
if(arr.length>0)
myHttp.url+="?";
for(var i:int=0;i<arr.length;i++)
{
if(i!=arr.length-1)
myHttp.url+="num="+arr[i].para.toString()+"&";
else
myHttp.url+="num="+arr[i].para.toString();
}
Alert.show(myHttp.url);
myHttp.send();
}
private function addData():void
{
var obj:Object=new Object();
obj.para=txtPara.text;
arr.push(obj);
dg.dataProvider=arr;
txtPara.text="";
dg.validateNow();
}
private function delData():void
{
arr=new Array();
dg.dataProvider=arr;
dg.validateNow();
}
private function httpHandle(e:ResultEvent):void
{
lblResult.text=e.result.sumTag;
}
]]>
</mx:Script>
<mx:HTTPService id="myHttp" showBusyCursor="true" result="httpHandle(event);" useProxy="false"/>
<mx:Panel title="測試HTTPService" width="368" height="334" x="78" y="30" layout="absolute">
<mx:Label text="疊加參數(shù)：" x="110" y="26"/>
<mx:TextInput id="txtPara" x="161" y="24" width="95"/>
<mx:DataGrid id="dg" x="76" y="64" height="166" width="179">
<mx:columns>
<mx:DataGridColumn dataField="para" headerText="參數(shù)列表"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="添加" click="addData();" x="277" y="26"/>
<mx:Button label="刪除" click="delData();" x="277" y="64"/>
<mx:Label text="疊加結果是：" x="58" y="253"/>
<mx:Label x="126" y="253" id="lblResult"/>
<mx:Button label="計算" click="addHandle();" x="277" y="249"/>
</mx:Panel>
</mx:Application>

"http://localhost:8080/myflex/sum"是一個servlet的映射地址，actionscript方法addHandle將每一個數(shù)字參數(shù)添加到url映射地
址后面并且向服務器發(fā)送請求，addData方法把輸入的數(shù)字顯示到下方列表，delData方法刪除整個列表，httpHandle方法處理服務器
的返回值。其中e.result.sumTag表示取得xml返回數(shù)據(jù)中sumTag標簽中的內容。
以下是servlet中對接收參數(shù)的處理：

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
String[] para = request.getParameterValues("num");
int sum = 0;
if (para != null)
{
for (int i = 0; i < para.length; i++)
{
if (para[i] != null && !"".equals(para[i]))
{
sum = sum + Integer.parseInt(para[i]);
}
}
}
response.getWriter().print(
"<?xml version=\"1.0\" encoding=\"utf-8\"?><sumTag>" + sum
+ "</sumTag>");
}

下面是例子運行的截圖：


下一次學習總結一下<mx:WebService>組件和RemoteObject及其他的交互方式！