flex与服务器端数据交互(创建,读取,修改,删除)
关键词:flex修改flex创建flex删除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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| 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 = "";
} |