flex和後端的數據交互(二)--和

轉載:http://daoger.iteye.com/blog/205894

 

用actionscript給服務器請求添加參數難免會很麻煩,使用mx:request標籤就可以解決這一問題,可以把他
嵌套到HTTPService標籤中實現參數的提交。如下例所示:

Xml代碼 複製代碼
  1. <mx:request>  
  2.       <txtPara>{txtPara.text}</txtPara>  
  3.  </mx:request>  
<mx:request>
      <txtPara>{txtPara.text}</txtPara>
 </mx:request>


其中txtPara是發送到服務器端參數的名城,標籤體是參數值,而標籤體的值就是下方文本框的值。
以下是完整的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.         private function httpHandle(e:ResultEvent):void   
  8.         {  
  9.             Alert.show(e.result.Result);  
  10.         }  
  11.         ]]>     
  12.     </mx:Script>     
  13.     <mx:HTTPService id="myHttp" url="http://localhost:8080/myflex/http" showBusyCursor="true" result="httpHandle(event);" useProxy="false">  
  14.         <mx:request>  
  15.             <txtPara>{txtPara.text}</txtPara>  
  16.         </mx:request>  
  17.     </mx:HTTPService>  
  18.     <mx:Panel title="TEST HTTPService" width="368" height="140" x="78" y="30" layout="absolute">  
  19.         <mx:Label text="PARA" x="110" y="26"/>     
  20.         <mx:TextInput id="txtPara" x="161" y="24" width="95"/>    
  21.         <mx:Label text="The para sent to service is:" x="58" y="53"/>  
  22.         <mx:Label x="126" y="53" id="lblResult"/>     
  23.         <mx:Button label="Submit" click="myHttp.send()" x="277" y="53"/>      
  24.     </mx:Panel>  
  25. </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代碼 複製代碼
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!-- Simple example to demonstrate Form layout container. -->  
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
  4.     <mx:Panel title="Form Container Example" height="75%" width="75%"    
  5.         paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">  
  6.         <mx:Text width="100%" color="blue"  
  7.             text="Moving from one form field to another triggers the validator."/>  
  8.         <mx:Form width="100%" height="100%">  
  9.             <mx:FormHeading label="Enter values into the form."/>  
  10.             <mx:FormItem label="First name">  
  11.                 <mx:TextInput id="fname" width="200"/>  
  12.             </mx:FormItem>  
  13.             <mx:FormItem label="Date of birth (mm/dd/yyyy)">  
  14.                 <mx:TextInput id="dob" width="200"/>  
  15.             </mx:FormItem>  
  16.             <mx:FormItem label="E-mail address">  
  17.                 <mx:TextInput id="email" width="200"/>  
  18.             </mx:FormItem>  
  19.             <mx:FormItem label="Age">  
  20.                 <mx:TextInput id="age" width="200"/>  
  21.             </mx:FormItem>  
  22.             <mx:FormItem label="SSN">  
  23.                 <mx:TextInput id="ssn" width="200"/>  
  24.             </mx:FormItem>  
  25.             <mx:FormItem label="Zip">  
  26.                 <mx:TextInput id="zip" width="200"/>  
  27.             </mx:FormItem>  
  28.             <mx:FormItem label="Phone">  
  29.                 <mx:TextInput id="phone" width="200"/>  
  30.             </mx:FormItem>  
  31.         </mx:Form>  
  32.     </mx:Panel>  
  33.   
  34.     <mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>  
  35.     <mx:PhoneNumberValidator source="{phone}" property="text"/>  
  36.     <mx:DateValidator source="{dob}" property="text"/>  
  37.     <mx:EmailValidator source="{email}" property="text"/>  
  38.     <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"  
  39.         minValue="18" maxValue="100" domain="int"/>  
  40.     <mx:SocialSecurityValidator source="{ssn}" property="text"/>  
  41.     <mx:ZipCodeValidator source="{zip}" property="text"/>  
  42. </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>


示例運行的截圖:


其他一些入門例子可以參考:甘先生Blog http://www.blogjava.net/gump/articles/22859.html
更多問題請參考Flex的在線文檔:http://www.adobe.com/support/documentation/en/flex/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章