Integrating Flex & PHP - An Introductory Tutorial

private function handleDepartmentsXml(e:ResultEvent):void {
    department_id.dataProvider = e.result.departments.department;
}
private function handleEmployeesXml(e:ResultEvent):void {
    employees.dataProvider = e.result.employees.employee;
}

Each function receives a ResultEvent object as its lone argument. The HTTP response is available through that object’s result property. Within the function, the specific element’s dataProvider property is assigned the received XML data, which is to say the ComboBox and the DataGrid are populated from that XML. But in each case, the specific subelement must be named (the individual department elements are to be used, not the root departments, and employee, not employees).

Those functions are called after the service request is completed. To actually invoke that request, the send() method must be called, which happens in an init() function:

private function init():void {
    getDepartmentsService.send();
    getEmployeesService.send();    
}

You’ve already seen this concept: clicking the Add button invokes the postAddEmployeeService.send() method. Let’s look at how that service is defined, as it’s a bit different:

<mx:HTTPService id="postAddEmployeeService"
    url="http://localhost:8888/flex/add_employee.php"
    method="POST"
    resultFormat="text"
    result="handleEmployeeAdd(event)">
    <mx:request xmlns="">
        <first_name>{first_name.text}</first_name>
        <last_name>{last_name.text}</last_name>
        <department_id>{department_id.selectedItem.id}</department_id>
    </mx:request>
</mx:HTTPService>

Again, a unique id is assigned and the appropriate URL is named. The method, which is GET by default, is here set as POST, and the resultFormat is plain text, which is what the associated PHP script returns. When the request is completed, the handleEmployeeAdd() function is to be called. As this request must also send data to the PHP script, an extra request element is added. Within it, an element is added for each piece of data. The name of the element will correspond to the $_POST array index in the PHP script (the id values in the form do not dictate the contents of $_POST). For each element value, refer to the page item’s id, then the text property for the TextInputs, and selectedItem.id for the ComboBox. For this last value, selectedItem identifies the user’s selection. This is followed by id, which is used because the values for the ComboBox will be the id elements from the XML data.

Finally, here’s what the handleEmployeeAdd() function looks like, which is called after this service request is made:

private function handleEmployeeAdd(e:ResultEvent):void {
    Alert.show(String(e.result));
    getEmployeesService.send();    
}

This function does two things. First, it uses an alert window (similar to, but nicer than a JavaScript alert) to display the PHP script’s response. Two earlier figures show this in action. The function also resends the getEmployeesService request, in order to update the contents of the DataGrid, thereby reflecting the added employee.

Going Forward
If you put the database, the PHP scripts, and the Flex all together, you should end up with a perfectly functioning and nice Rich Internet Application. As with any technological thing you do, there’s lots of ways you can expand this example or other directions you can go. One option would be to add validators to the Flex code to pre-validate the form data (you should still keep the server-side validations, of course). And one of the great side benefits to using Flex is that you can easily turn out both a Web-based application (i.e., Flash to be run in browser) or a desktop application (thanks to Adobe AIR).