The POST Solution for Flex, ActionScript & PHP

article by Srirangan

This document hopes to provide a minimalist yet comprehensive solution on how to send user input from your Flex application to your backend PHP application. Of course the Hosting application here is based on PHP, but it should work for ASP, ASP.Net, Perl or any other Server Side platform.

Please Note: I am assuming you understand the basics of the programming.

The Architecture

[1] Client Side Form (Flex, Mxml)
[2] Client Side Form Submit Handler (Flex ActionScript)
- Data Binding
- Data POSTing
[3] Server Side Application (PHP)

Client Side Form

First we'll create a basic New User Registration Form on Flex. This can either be done via the Adobe Flex Builder Design mode or simply by entering the Mxml Source. For the sake of simplicity I'll provide the Mxml source for the form.


<mx:TitleWindow top="50" left="100" title="New User Registration Form">
<mx:Form>
<mx:FormItem name="email" label="Email Address">
<mx:TextInput id="email"/>
</mx:FormItem>
<mx:FormItem name="username" label="Desired Username">
<mx:TextInput id="username"/>
</mx:FormItem>
<mx:FormItem name="password" label="Password">
<mx:TextInput name="password" displayAsPassword="true"/>
</mx:FormItem>
<mx:FormItem name="confirm" label="Confirm Password">
<mx:TextInput id="password2" displayAsPassword="true"/>
</mx:FormItem>
<mx:FormItem name="sex" label="Sex">
<mx:ComboBox id="sex">
<mx:dataProvider>
<mx:Array>
<mx:String>Not Mentioned</mx:String>
<mx:String>Female</mx:String>
<mx:String>Male</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem name="buttons">
<mx:Button label="Submit" click="handleSubmit()"/>
</mx:FormItem>
</mx:Form>
</mx:TitleWindow>

Client Side Form Submit Handler

The method handleSubmit() will be invoked when the Submit button is clicked. handleSubmit binds the form input into an Object (postVars). Then an HTTPService object is created (signupService) who's destination Url is set to "signup.php". The request property of signupService is set to our postVars object, this ensures the variables are sent to signup.php. Most of the other properties being set are self-explanatory and don't warrant a comment.

public function handleSubmit():void
{
var postVars:Object = new Object;
postVars.email = email.text;
postVars.username = username.text;
postVars.password = password.text;
postVars.password2 = password2.text;
postVars.sex = sex.selectedItem;

var signupService:HTTPService = new HTTPService;
signupService.showBusyCursor = true;
signupService.concurrency = "last";
signupService.url = 'signup.php';
signupService.method = 'POST';
signupService.request = postVars;
signupService.resultFormat = 'text';
signupService.send();
signupService.addEventListener(ResultEvent.RESULT , signupServiceHandler );

function signupServiceHandler(e:ResultEvent):void
{
Alert.show(e.result.toString());
}
}

We are also adding an Result Event handle for signupService which will simply Alert the result of signup.php once the complete service-event cycle is complete.

Server Side Application (PHP)

Accessing these variables on PHP is similar to how you'd access any POST variable. Here's an example:

<?php
print_r($_POST);

echo $_POST['email'];
echo $_POST['username'];
echo $_POST['sex'];

if( $_POST['password'] != $_POST['password2'] )
{
echo 'Passwords dont match';
}
?>


If you have any questions, please feel free to ask them here: http://programmerassist.com/topic/30