Your First Application

OK - we're now ready to get some real work done!

If you downloaded the sample database file earlier, you will have two tables in your database:

• User
• Comment

Let's start off by learning how to insert and update records in the database. This tutorial assumes that you have some basic Flex knowledge

Inserting a Record

We're going to create a button with a label of "Create User" and when that button is clicked, it is going to create a new User model and insert it into the database. The following code is using Flex 4.x:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:services="org.aerial.services.*">

	
	<s:Button label="Create User" click="insertUserHandler(event)"/>
	
	<fx:Script>
		<![CDATA[
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.utils.ObjectUtil;
			
			import org.aerial.vo.UserVO;
			
			protected function insertUserHandler(event:MouseEvent):void
			{
				// create a new User model
				var user:UserVO = new UserVO();
				
				// set some of its properties
				user.firstName = "Danny";
				user.lastName = "Kopping";
				
				userService.insert(user)				// - insert the user into the "User" table
					.callback(resultHandler, faultHandler)		// - add "result" and "fault" handlers
					.execute();					// - execute the request
			}
			
			/**
			 * Result handler
			 */
			private function resultHandler(event:ResultEvent):void
			{
				trace("User saved.");
			}
			
			/**
			 * Fault handler
			 */
			private function faultHandler(event:FaultEvent):void
			{
				trace("Something went wrong!\n" + ObjectUtil.toString(event.fault));
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<services:UserService id="userService"/>
	</fx:Declarations>
</s:Application>

The relevant code here is this:

// create a new User model
var user:UserVO = new UserVO();

// set some of its properties
user.firstName = "Danny";
user.lastName = "Kopping";

userService.insert(user)					// - insert the user into the "User" table
		.callback(resultHandler, faultHandler)		// - add "result" and "fault" handlers
		.execute();					// - execute the request

Let's analyze this code... Essentially, what we're doing is creating a new UserVO object in memory, changes a couple of its properties and then passing it to a function in the UserService class. That service is going to send that UserVO instance to the server where it will be handled by the PHP version of the UserService, and saved to the database.

Don't believe me? Here's a screenshot from Charles Proxy (a great tool which monitors HTTP traffic)

Some important things to note about the generated ActionScript services:

• They all have a so-called fluid interface, which means you can do things like

userService.insert(user).callback(resultHandler, faultHandler).execute();

• If you do not want to use specific callbacks for each individual service call, you can create result and fault handlers on the service definition, like so:

<services:UserService id="userService" result="resultHandler(event)" fault="faultHandler(event)"/>

• If you do not call the execute() function, the service request will not be sent, so remember to put in! :)

Here's what we end up with:

> SELECT * FROM User;
+----+-----------+----------+
| id | firstName | lastName |
+----+-----------+----------+
|  1 | Danny     | Kopping  |
+----+-----------+----------+

Updating a Record

So, we have one User record in our database - but we've given him the wrong name! Let's correct that by doing the following:

var user:UserVO = new UserVO();
user.id = 1;

// set only the "lastName" property since that is the only property we want to change
user.lastName = "McDude";

userService.save(user)					// - update the user into the "User" table with an id of 1
	.callback(resultHandler, faultHandler)		// - add "result" and "fault" handlers
	.execute();					// - execute the request

The user has been updated! In the code above, we set the UserVO instance's id property to 1 (since that is the id of the record we want to change) and we only changed the lastName property. We then use the save function instead of the insert function as this will tell Aerial to update instead of creating a new record and voilà! Aerial will only update the properties that you set in ActionScript, and will ignore any properties that have either not been set or changed.

Evidence!

> SELECT * FROM User WHERE id = 1;
+----+-----------+----------+
| id | firstName | lastName |
+----+-----------+----------+
|  1 | Danny     | McDude   |
+----+-----------+----------+

Dropping a Record

Dropping (or deleting) a record is dead-simple too!

var user:UserVO = new UserVO();
user.id = 1;

userService.drop(user)					// - delete the user in the "User" table with an id of 1
	.callback(resultHandler, faultHandler)		// - add "result" and "fault" handlers
	.execute();					// - execute the request

And hey, no more User with an id of 1!

> SELECT * FROM User WHERE id = 1;
Empty set (0.00 sec)

Next Step: Relational Data and Data Retrieval