Log In  
 
  Getting Started  
----------------------------------------

Resources

 

CRUD - Dynamic

Note: The current release is Flex 4. This page is for Flex 3. To get started with Flex 4 and Flash Builder 4 (formerly known as Flex Builder), see the Getting Started page on the Flex Developer Center.

  • 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>
previous page next page
Learn more

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

When running this RIA, after adding an employee, how do I return to the main grid of employees?

Comment: Posted by Nicholas Wilson at Sep 10, 2009 14:23

you can control at the screens by viewstack1

 viewstack1.selectedIndex=1//for the grid screen

or you can  call

fill(); // to reload the data and open the grid

but it did not work too

the [employeesService] get an error

Fatal error:  Maximum execution time of 30 seconds exceeded in ...

so i couldnt complete the test

i think the proplem in the php server file ! are there any comment

Comment: Posted by ahmed abobakr at Oct 14, 2009 01:56 Updated by ahmed abobakr

Yeah, working with php isn't that easy

 You need to have wampserveur installed, u put the content of the "php" directorie to c:/wamp/www/ , and u replace the adress url="http://examples.adobe.com/flex3/workingwithdata/employees.php"

by
url="http://localhost/employees.php"
 
Now u must configure the data base
 
Clic on the wamp icone next to the hour on bottom left of ur taskbar (start menu ?) and then
clic phpmyadmin in the context menu that appears.
 
Then, clic type "employee" in the form, and clic "creat database"
 
Then create a table called "employees" with 4 colums :
ID (an INT with "auto increment" and the "primary" status)
firstName (a TEXT field)
lastName (a TEXT field )
officePhone (a TEXT field)
 
Then, last but not least, you have to comfigure the password of mySQL to "admin" and its ok

Comment: Posted by Renan Le Caro at Jan 25, 2010 17:41

Hi
This was very useful. However, I had to resolve a couple of issues before it would work for me.

Firstly, if the php directory is moved to c:/wamp/www/, then the new url should be url="http://localhost/php/employees.php" not url="http://localhost/employees.php".

The application wasn't working, so I ran http://localhost/php/employees.php in my browser and found a series of error messages:

 Deprecated:  Assigning the return value of new by reference is deprecated in C:\wamp\www\php\XmlSerializer.class.php on line 41



Deprecated:  Assigning the return value of new by reference is deprecated in C:\wamp\www\php\XmlSerializer.class.php on line 42



Deprecated:  Assigning the return value of new by reference is deprecated in C:\wamp\www\php\PEAR\PEAR.php on line 569



Deprecated:  Assigning the return value of new by reference is deprecated in C:\wamp\www\php\PEAR\PEAR.php on line 572



Deprecated:  Assigning the return value of new by reference is deprecated in C:\wamp\www\php\PEAR\XML\Parser.php on line 571



Deprecated:  Assigning the return value of new by reference is deprecated in C:\wamp\www\php\PEAR\XML\Unserializer.php on line 679



Deprecated:  Assigning the return value of new by reference is deprecated in C:\wamp\www\php\PEAR\XML\Unserializer.php on line 681



Deprecated:  Assigning the return value of new by reference is deprecated in C:\wamp\www\php\PEAR\XML\Unserializer.php on line 840

According to http://forums.whirlpool.net.au/forum-replies-archive.cfm/833742.html it seems that in php5 objects are always passed by reference, so that ampersand use is deprecated. So I changed all references of "&new" to "new" and it worked!

Hope this is helpful.

Comment: Posted by David Robinson at Mar 15, 2010 07:36
Added by Mark Nichoson, last edited by Randy Nielsen on Feb 23, 2011  (view change)

Labels:

Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.