小菜毛毛技術分享

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

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

xml文件方式

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

<?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類來實現：
讀取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－－設置文件打開方式為寫數據。文件不存在，則創建；文件存在，則覆蓋原有數據。
APPEND－－設置文件打開方式為追加。文件不存在，則創建；文件存在，則新數據從文件末尾開始增加。
UPDATE－－設置文件打開方式為讀寫。文件不存在，則創建。設置該模式通常用于隨機讀寫訪問文件。可以從文件的任意位置讀取，寫入數據時，只有寫入位置的存在字節被覆蓋，其他所有字節不受影響。

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

loader.addEventListener(Event.COMPLETE,completeHandle)語句表示添加對XML加載完成事件的監聽。一旦加載完成執行
completeHandle函數。完成剩余MXML代碼。剩余代碼包括completeHandle函數，<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是數據提交的地址，可以在地址后面添加參數，提交到后端進行處理，處理后
再返回Flex可識別的數據類型，如數組型、XML型、Object型等。

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

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

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="疊加參數：" 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="參數列表"/>
</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將每一個數字參數添加到url映射地
址后面并且向服務器發送請求，addData方法把輸入的數字顯示到下方列表，delData方法刪除整個列表，httpHandle方法處理服務器
的返回值。其中e.result.sumTag表示取得xml返回數據中sumTag標簽中的內容。
以下是servlet中對接收參數的處理：

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及其他的交互方式！