flex与服务器端数据交互(创建,读取,修改,删除)

CRUD - Dynamic

Create, read, update and delete (CRUD) are the four basic functions of persistent storage.Flex applications can communicate with server-side scripts for data functionality.Any server-side technology can be used as long as the result format is known.Returned XML data can easily be handled using E4X.

 

curd.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ include "employees.as"; ]]> </mx:Script> <mx:HTTPService id="employeesService" url="http://www.flexmonkeys.com/F3GSE/PartIII/CRUD/employees.php" resultFormat="e4x" useProxy="false" /> <mx:ViewStack id="viewstack1" width="100%" height="100%" > <mx:Canvas label="Form View" width="100%" height="100%"> <mx:Form horizontalCenter="0" verticalCenter="0" backgroundColor="#FFFFFF"> <mx:FormItem label="Query Employees "> <mx:Button label="Submit" click="fill()" width="100"/> </mx:FormItem> </mx:Form> </mx:Canvas> <mx:Panel label="DataGrid View" width="100%" height="100%"> <mx:DataGrid width="100%" height="100%" dataProvider="{listData}"> <mx:columns> <mx:DataGridColumn dataField="firstName" headerText="First Name"/> <mx:DataGridColumn dataField="lastName" headerText="Last Name"/> <mx:DataGridColumn dataField="officePhone" headerText="Phone"/> </mx:columns> </mx:DataGrid> <mx:Form backgroundColor="#FFFFFF"> <mx:FormItem label="Add New Employee"> <mx:Button label="Add..." click="{viewstack1.selectedIndex = 2}" width="100"/> </mx:FormItem> </mx:Form> </mx:Panel> <mx:Canvas label="Add New Employee View" width="100%" height="100%"> <mx:Form horizontalCenter="0" verticalCenter="0" backgroundColor="#FFFFFF"> <mx:FormItem label="First Name"> <mx:TextInput id="inputFirst"/> </mx:FormItem> <mx:FormItem label="Last Name"> <mx:TextInput id="inputLast"/> </mx:FormItem> <mx:FormItem label="Phone"> <mx:TextInput id="inputPhone"/> </mx:FormItem> <mx:FormItem label="Add Employee "> <mx:Button label="Add" click="insertEmployee()" /> </mx:FormItem> </mx:Form> </mx:Canvas> </mx:ViewStack> </mx:Application> employees.as import mx.rpc.events.ResultEvent; import mx.collections.XMLListCollection; private var params:Object = new Object(); [Bindable] private var listData:XMLListCollection; public function resultHandler(event:ResultEvent):void { var result:XML = XML(event.result); var xmlList:XMLList = result.data.children(); listData = new XMLListCollection(xmlList); } public function insertItemHandler(event:ResultEvent):void { fill(); } public function fill():void{ employeesService.removeEventListener(ResultEvent.RESULT,insertItemHandler); employeesService.addEventListener(ResultEvent.RESULT,resultHandler); employeesService.method = "GET"; params['method'] = "FindAllEmployees"; employeesService.cancel(); employeesService.send(params); viewstack1.selectedIndex=1; } public function insertEmployee():void{ employeesService.removeEventListener(ResultEvent.RESULT,resultHandler); employeesService.addEventListener(ResultEvent.RESULT,insertItemHandler); employeesService.method = "POST"; params = {"method": "InsertEmployee", "id": NaN, "firstName": inputFirst.text, "lastName": inputLast.text, "officePhone": inputPhone.text}; employeesService.cancel(); employeesService.send(params); clearInputFields(); } private function clearInputFields():void{ inputFirst.text = ""; inputLast.text = ""; inputPhone.text = ""; }