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