小菜毛毛技术分享

与大家共同成长

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  164 Posts :: 141 Stories :: 94 Comments :: 0 Trackbacks
最近学习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. <?xml version="1.0" encoding="utf-8"?>  
  2. <menus>  
  3.     <node label="Mail">  
  4.         <node label="Inbox"/>  
  5.         <node label="Personal Folder">  
  6.             <node label="Demo"/>  
  7.             <node label="Personal"/>  
  8.             <node label="Saved Mail"/>  
  9.             <node label="bar"/>  
  10.         </node>  
  11.         <node label="Calendar"/>  
  12.         <node label="Sent"/>  
  13.         <node label="Trash"/>  
  14.     </node>  
  15. </menus>  

xml文件的读写我们可以用FileStream类来实现:
读取xml文件:
Javascript代码 复制代码
  1. var testXML:XML;   
  2. var file:File = File.documentsDirectory.resolvePath("tree.xml");   
  3. var fileStream:FileStream = new FileStream();   
  4. fileStream.open(file, FileMode.READ);   
  5. testXML = XML(fileStream.readUTFBytes(fileStream.bytesAvailable));   
  6. fileStream.close();  

写回xml文件
Javascript代码 复制代码
  1. var testXML:XML=<content>content</content>......;   
  2. var file:File = File.documentsDirectory.resolvePath("tree.xml");   
  3. var fileStream:FileStream = new FileStream();   
  4. fileStream.open(file, FileMode.WRITE);   
  5. var outputString:String = '<?xml version="1.0" encoding="utf-8"?>\n';   
  6. outputString += testXML.toXMLString();   
  7. fileStream.writeUTFBytes(outputString);   
  8. 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. <?xml version="1.0" encoding="utf-8"?>   
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontFamily="simsun"    
  3.     fontSize="12" layout="absolute" width="242" height="442" creationComplete="loadXML()">   
  4.     <mx:Script>   
  5.           <![CDATA[   
  6.             import mx.collections.ArrayCollection;    
  7.             import mx.rpc.events.ResultEvent;          
  8.             public var loader:URLLoader=new URLLoader();   
  9.             public var menus:XML=new XML();            
  10.             public function loadXML():void             
  11.             {   
  12.                 var request:URLRequest=new URLRequest("tree.xml");   
  13.                 loader.load(request);    
  14.                 loader.addEventListener(Event.COMPLETE,completeHandle);   
  15.             }   
  16.             public function completeHandle(e:Event):void  
  17.             {   
  18.                 menus=XML(loader.data);               
  19.                 var results:XMLList=menus.node;       
  20.                 tree.dataProvider=results;    
  21.             }   
  22.           ]]>   
  23.     </mx:Script>   
  24.   
  25.     <mx:Tree id="tree" x="10" y="35" width="218" height="397" labelField="@label" />   
  26.     <mx:Label x="10" y="10" text="Tree Nodes From XML File"/>   
  27.  </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. import mx.rpc.events.ResultEvent;                          
  2. import mx.controls.Alert;                                 
  3.   
  4. private function showResult(e:ResultEvent):void  
  5. {   
  6.     Alert.show(e.result as String);                       
  7. }  


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

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

"http://localhost:8080/myflex/sum"是一个servlet的映射地址,actionscript方法addHandle将每一个数字参数添加到url映射地
址后面并且向服务器发送请求,addData方法把输入的数字显示到下方列表,delData方法删除整个列表,httpHandle方法处理服务器
的返回值。其中e.result.sumTag表示取得xml返回数据中sumTag标签中的内容。
以下是servlet中对接收参数的处理:
Java代码 复制代码
  1. public void doPost(HttpServletRequest request, HttpServletResponse response)   
  2.             throws ServletException, IOException   
  3.     {   
  4.         String[] para = request.getParameterValues("num");   
  5.         int sum = 0;   
  6.         if (para != null)   
  7.         {   
  8.             for (int i = 0; i < para.length; i++)   
  9.             {   
  10.                 if (para[i] != null && !"".equals(para[i]))   
  11.                 {   
  12.                     sum = sum + Integer.parseInt(para[i]);   
  13.                 }   
  14.             }   
  15.         }   
  16.         response.getWriter().print(   
  17.                 "<?xml version=\"1.0\" encoding=\"utf-8\"?><sumTag>" + sum   
  18.                         + "</sumTag>");   
  19.     }  


下面是例子运行的截图:


下一次学习总结一下<mx:WebService>组件和RemoteObject及其他的交互方式!
posted on 2009-07-28 13:53 小菜毛毛 阅读(1556) 评论(0)  编辑  收藏 所属分类: FLEX

只有注册用户登录后才能发表评论。


网站导航: