CRUD - Dynamic - Flex 3 Getting Started

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.

Tip: Download and import a Flex Builder project that contains this application.

CRUD.MXML

In this example, a server-side PHP script is called using the HTTPService component. An included ActionScript file contains functions to retrieve data and insert new records.

<?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://examples.adobe.com/flex3/workingwithdata/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>

User rating?	1 2 3 4 5

Learn more

Download and import a Flex Builder project that contains this application.
Read about data retrieval basics in LiveDocs.
Try the Flex Builder Create Application from Database wizard.
For more information, see the Remote Data Communication chapter in O'Reilly's Programming Flex 2.
Using remote data providers
Developing A Login System For A Flex Application With A ColdFusion and Database Backend Part 1

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

Resources

CRUD - Dynamic

CRUD.MXML

Learn more

employees.as