小菜毛毛技術分享

與大家共同成長

BlogJava :: 首頁 :: 聯(lián)系 :: 聚合

:: 管理

164 Posts :: 141 Stories :: 94 Comments :: 0 Trackbacks

flex和后端的數(shù)據(jù)交互(二)－－和

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

Xml代碼

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

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

其中txtPara是發(fā)送到服務器端參數(shù)的名城，標簽體是參數(shù)值，而標簽體的值就是下方文本框的值。
以下是完整的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參數(shù)的值，這里沒有做過多處理，只是在后端取到這個值又通過xml形式返還到客戶端。
這是例子運行的截圖：

mx:request組件一般是結(jié)合mx:form組件一起使用，flex提供了完備的數(shù)據(jù)校驗功能，如對字符串的校驗mx:StringValidator、
對電話號碼驗證的mx:PhoneNumberValidator、對日期驗證的mx:DateValidator、對電子郵件驗證的mx:EmailValidator、對郵編驗證
的mx:ZipCodeValidator等等。下面這個示例來自Flex的在線文檔，主要展示flex的form驗證功能，沒有數(shù)據(jù)的提交。

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>

示例運行的截圖：

posted on 2009-07-28 13:55 小菜毛毛閱讀(357) 評論(0) 編輯收藏所屬分類: FLEX

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: Flex與IE緩存的問題 flex多module切換問題 flex模塊加載問題 Flex DataGrid從XML文件中加載數(shù)據(jù) flex和后端的數(shù)據(jù)交互(二)－－和 flex和后端的數(shù)據(jù)交互(一)－－XML和HTTPService(最常用的哦) 整合Flex和Java—配置篇 Flex Builder 3 Help 中文版 (CHM/PDF)下載 FLEX概述

小菜毛毛技術分享

常用鏈接

留言簿(15)

我參與的團隊

隨筆分類

隨筆檔案

文章分類

文章檔案

新聞檔案

收藏夾

搜索

最新評論

閱讀排行榜

評論排行榜