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

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

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();

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

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();

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

<?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>

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

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

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

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

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

这是客户端mxml的源代码：

Xml代码

<?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>

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

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

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

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

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

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

Xml代码

<?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>

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

<?xml version="1.0" encoding="utf-8"?>
<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>

<?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>

示例运行的截图：

本文转自：http://daoger.javaeye.com/blog/204694

posted on 2009-07-29 11:13 分布式编程阅读(196) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

分布式编程

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

公告

导航