flex和后端的数据交互(一)－－XML和HTTPService

最近在学习flex，感觉不错就给转过来了。

最近学习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代码 ​​
​​

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8"?>
3. <menus>
4. <node label="Mail">
5. <node label="Inbox"/>
6. <node label="Personal Folder">
7. <node label="Demo"/>
8. <node label="Personal"/>
9. <node label="Saved Mail"/>
10. <node label="bar"/>
11. </node>
12. <node label="Calendar"/>
13. <node label="Sent"/>
14. <node label="Trash"/>
15. </node>
16. </menus>
    1. 
       

<?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文件：

Javascript代码 ​​
​​

1. 1. 
      
2. var testXML:XML;
3. var file:File = File.documentsDirectory.resolvePath("tree.xml");
4. var fileStream:FileStream = new FileStream();
5. fileStream.open(file, FileMode.READ);
6. testXML = XML(fileStream.readUTFBytes(fileStream.bytesAvailable));
7. fileStream.close();
   1. 
      

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文件

Javascript代码 ​​
​​

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

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代码。

Java代码 ​​
​​

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8"?>
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontFamily="simsun"
4. fontSize="12" layout="absolute" width="242" height="442" creationComplete="loadXML()">
5. <mx:Script>
6. <![CDATA[
7. import mx.collections.ArrayCollection;
8. import mx.rpc.events.ResultEvent;
9. public var loader:URLLoader=new URLLoader();
10. public var menus:XML=new XML();
11. public function loadXML():void
12. {
13. var request:URLRequest=new URLRequest("tree.xml");
14. loader.load(request);
15. loader.addEventListener(Event.COMPLETE,completeHandle);
16. }
17. public function completeHandle(e:Event):void
18. {
19. menus=XML(loader.data);
20. var results:XMLList=menus.node;
21. tree.dataProvider=results;
22. }
23. ]]>
24. </mx:Script>
25. 
    
26. <mx:Tree id="tree" x="10" y="35" width="218" height="397" labelField="@label" />
27. <mx:Label x="10" y="10" text="Tree Nodes From XML File"/>
28. </mx:Application>
    1. 
       

<?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程序的处理结果有关。

数据返回后的处理方法示例：

Java代码 ​​
​​

1. 1. 
      
2. import mx.rpc.events.ResultEvent;
3. import mx.controls.Alert;
4. 
   
5. private function showResult(e:ResultEvent):void
6. {
7. Alert.show(e.result as String);
8. }
   1. 
      

import mx.rpc.events.ResultEvent;                       
import mx.controls.Alert;                              

private function showResult(e:ResultEvent):void
{
    Alert.show(e.result as String);                    
}

来一个简单的例子会让你更加明白的！

这是客户端mxml的源代码：

Xml代码 ​​
​​

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8"?>
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
4. <mx:Script>
5. <![CDATA[
6. import mx.rpc.events.ResultEvent;
7. import mx.controls.Alert;
8. 
   
9. private var arr:Array=new Array();
10. private function addHandle():void
11. {
12. myHttp.url="http://localhost:8080/myflex/sum";
13. if(arr.length>0)
14. myHttp.url+="?";
15. for(var i:int=0;i<arr.length;i++)
16. {
17. if(i!=arr.length-1)
18. myHttp.url+="num="+arr[i].para.toString()+"&";
19. else
20. myHttp.url+="num="+arr[i].para.toString();
21. }
22. Alert.show(myHttp.url);
23. myHttp.send();
24. }
25. 
    
26. private function addData():void
27. {
28. var obj:Object=new Object();
29. obj.para=txtPara.text;
30. arr.push(obj);
31. dg.dataProvider=arr;
32. txtPara.text="";
33. dg.validateNow();
34. }
35. 
    
36. private function delData():void
37. {
38. arr=new Array();
39. dg.dataProvider=arr;
40. dg.validateNow();
41. }
42. 
    
43. private function httpHandle(e:ResultEvent):void
44. {
45. lblResult.text=e.result.sumTag;
46. }
47. ]]>
48. </mx:Script>
49. <mx:HTTPService id="myHttp" showBusyCursor="true" result="httpHandle(event);" useProxy="false"/>
50. <mx:Panel title="测试HTTPService" width="368" height="334" x="78" y="30" layout="absolute">
51. <mx:Label text="叠加参数：" x="110" y="26"/>
52. <mx:TextInput id="txtPara" x="161" y="24" width="95"/>
53. <mx:DataGrid id="dg" x="76" y="64" height="166" width="179">
54. <mx:columns>
55. <mx:DataGridColumn dataField="para" headerText="参数列表"/>
56. </mx:columns>
57. </mx:DataGrid>
58. <mx:Button label="添加" click="addData();" x="277" y="26"/>
59. <mx:Button label="删除" click="delData();" x="277" y="64"/>
60. <mx:Label text="叠加结果是：" x="58" y="253"/>
61. <mx:Label x="126" y="253" id="lblResult"/>
62. <mx:Button label="计算" click="addHandle();" x="277" y="249"/>
63. </mx:Panel>
64. </mx:Application>
    1. 
       

<?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中对接收参数的处理：

Java代码 ​​
​​

1. 1. 
      
2. public void doPost(HttpServletRequest request, HttpServletResponse response)
3. throws ServletException, IOException
4. {
5. String[] para = request.getParameterValues("num");
6. int sum = 0;
7. if (para != null)
8. {
9. for (int i = 0; i < para.length; i++)
10. {
11. if (para[i] != null && !"".equals(para[i]))
12. {
13. sum = sum + Integer.parseInt(para[i]);
14. }
15. }
16. }
17. response.getWriter().print(
18. "<?xml version=/"1.0/" encoding=/"utf-8/"?><sumTag>" + sum
19. + "</sumTag>");
20. }
    1. 
       

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>");
  }

下面是例子运行的截图：

用actionscript给服务器请求添加参数难免会很麻烦，使用mx:request标签就可以解决这一问题，可以把他

嵌套到HTTPService标签中实现参数的提交。如下例所示：

Xml代码 ​​
​​

1. 1. 
      
2. <mx:request>
3. <txtPara>{txtPara.text}</txtPara>
4. </mx:request>
   1. 
      

<mx:request>       <txtPara>{txtPara.text}</txtPara>  </mx:request>

其中txtPara是发送到服务器端参数的名城，标签体是参数值，而标签体的值就是下方文本框的值。

以下是完整的mxml文件：

Xml代码 ​​
​​

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8"?>
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
4. <mx:Script>
5. <![CDATA[
6. import mx.rpc.events.ResultEvent;
7. import mx.controls.Alert;
8. private function httpHandle(e:ResultEvent):void
9. {
10. Alert.show(e.result.Result);
11. }
12. ]]>
13. </mx:Script>
14. <mx:HTTPService id="myHttp" url="http://localhost:8080/myflex/http" showBusyCursor="true" result="httpHandle(event);" useProxy="false">
15. <mx:request>
16. <txtPara>{txtPara.text}</txtPara>
17. </mx:request>
18. </mx:HTTPService>
19. <mx:Panel title="TEST HTTPService" width="368" height="140" x="78" y="30" layout="absolute">
20. <mx:Label text="PARA" x="110" y="26"/>
21. <mx:TextInput id="txtPara" x="161" y="24" width="95"/>
22. <mx:Label text="The para sent to service is:" x="58" y="53"/>
23. <mx:Label x="126" y="53" id="lblResult"/>
24. <mx:Button label="Submit" click="myHttp.send()" x="277" y="53"/>
25. </mx:Panel>
26. </mx:Application>
    1. 
       

<?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 function httpHandle(e:ResultEvent):void    {    Alert.show(e.result.Result);   }         ]]>      </mx:Script>    <mx:HTTPService id="myHttp" url="http://localhost:8080/myflex/http" showBusyCursor="true" result="httpHandle(event);" useProxy="false">   <mx:request>           <txtPara>{txtPara.text}</txtPara>      </mx:request>  </mx:HTTPService>  <mx:Panel title="TEST HTTPService" width="368" height="140" x="78" y="30" layout="absolute">      <mx:Label text="PARA" x="110" y="26"/>        <mx:TextInput id="txtPara" x="161" y="24" width="95"/>       <mx:Label text="The para sent to service is:" x="58" y="53"/>      <mx:Label x="126" y="53" id="lblResult"/>        <mx:Button label="Submit" click="myHttp.send()" x="277" y="53"/>     </mx:Panel> </mx:Application>

在服务器端就可以从request中取到txtPara参数的值，这里没有做过多处理，只是在后端取到这个值又通过xml形式返还到客户端。

mx:request组件一般是结合mx:form组件一起使用，flex提供了完备的数据校验功能，如对字符串的校验mx:StringValidator、

对电话号码验证的mx:PhoneNumberValidator、对日期验证的mx:DateValidator、对电子邮件验证的mx:EmailValidator、对邮编验证

的mx:ZipCodeValidator等等。下面这个示例来自Flex的在线文档，主要展示flex的form验证功能，没有数据的提交。

Xml代码 ​​
​​

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8"?>
3. <!-- Simple example to demonstrate Form layout container. -->
4. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
5. <mx:Panel title="Form Container Example" height="75%" width="75%"
6. paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
7. <mx:Text width="100%" color="blue"
8. text="Moving from one form field to another triggers the validator."/>
9. <mx:Form width="100%" height="100%">
10. <mx:FormHeading label="Enter values into the form."/>
11. <mx:FormItem label="First name">
12. <mx:TextInput id="fname" width="200"/>
13. </mx:FormItem>
14. <mx:FormItem label="Date of birth (mm/dd/yyyy)">
15. <mx:TextInput id="dob" width="200"/>
16. </mx:FormItem>
17. <mx:FormItem label="E-mail address">
18. <mx:TextInput id="email" width="200"/>
19. </mx:FormItem>
20. <mx:FormItem label="Age">
21. <mx:TextInput id="age" width="200"/>
22. </mx:FormItem>
23. <mx:FormItem label="SSN">
24. <mx:TextInput id="ssn" width="200"/>
25. </mx:FormItem>
26. <mx:FormItem label="Zip">
27. <mx:TextInput id="zip" width="200"/>
28. </mx:FormItem>
29. <mx:FormItem label="Phone">
30. <mx:TextInput id="phone" width="200"/>
31. </mx:FormItem>
32. </mx:Form>
33. </mx:Panel>
34. 
    
35. <mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>
36. <mx:PhoneNumberValidator source="{phone}" property="text"/>
37. <mx:DateValidator source="{dob}" property="text"/>
38. <mx:EmailValidator source="{email}" property="text"/>
39. <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
40. minValue="18" maxValue="100" domain="int"/>
41. <mx:SocialSecurityValidator source="{ssn}" property="text"/>
42. <mx:ZipCodeValidator source="{zip}" property="text"/>
43. </mx:Application>
    1. 
       

<?xml version="1.0" encoding="utf-8"?> <!-- Simple example to demonstrate Form layout container. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">     <mx:Panel title="Form Container Example" height="75%" width="75%"          paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">         <mx:Text width="100%" color="blue"             text="Moving from one form field to another triggers the validator."/>         <mx:Form width="100%" height="100%">             <mx:FormHeading label="Enter values into the form."/>             <mx:FormItem label="First name">                 <mx:TextInput id="fname" width="200"/>             </mx:FormItem>             <mx:FormItem label="Date of birth (mm/dd/yyyy)">                 <mx:TextInput id="dob" width="200"/>             </mx:FormItem>             <mx:FormItem label="E-mail address">                 <mx:TextInput id="email" width="200"/>             </mx:FormItem>             <mx:FormItem label="Age">                 <mx:TextInput id="age" width="200"/>             </mx:FormItem>             <mx:FormItem label="SSN">                 <mx:TextInput id="ssn" width="200"/>             </mx:FormItem>             <mx:FormItem label="Zip">                 <mx:TextInput id="zip" width="200"/>             </mx:FormItem>             <mx:FormItem label="Phone">                 <mx:TextInput id="phone" width="200"/>             </mx:FormItem>         </mx:Form>     </mx:Panel>      <mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>     <mx:PhoneNumberValidator source="{phone}" property="text"/>     <mx:DateValidator source="{dob}" property="text"/>     <mx:EmailValidator source="{email}" property="text"/>     <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"         minValue="18" maxValue="100" domain="int"/>     <mx:SocialSecurityValidator source="{ssn}" property="text"/>     <mx:ZipCodeValidator source="{zip}" property="text"/> </mx:Application>