Integrating Flex & PHP - An Introductory Tutorial

The Flex Page
If you’ve never used Flex, you should read an introductory tutorial before going further, as the following code could at best be gibberish and at worst not work for you at all. I would also again recommend using the Flex Builder IDE, which greatly facilitates development. I want to first discuss on the graphical elements of the Flex application, which include the “Add a New Employee” form and the “Current Employees” DataGrid.
For the employee’s first and last names, simple TextInputs are used (the Flex equivalent of HTML text inputs, obviously), providing each with a unique id value:

 

echo "<employee>
    <first_name>{$row['first_name']}</first_name>
    <last_name>{$row['last_name']}</last_name>
    <department>{$row['department']}</department>
</employee>\n";

The department’s drop-down menu will be created in Flex using a ComboBox, which is like an HTML SELECT menu:

<mx:FormItem label="Department">
    <mx:ComboBox id="department_id" labelField="name"></mx:ComboBox>
</mx:FormItem>

 

The ComboBox also has a unique id value. The other notable attribute here is labelField, which is assigned a value of name. The compiled SWF file running in the browser will receive the list of departments as XML data and use that data as the options for this ComboBox. For this process to work, the ComboBox needs to be told which XML element to use for the label, or visible text, for each option. In this case, that should be the department’s name. (Alternatively, you could change the XML outputted by the PHP script so that the department’s name is within an element called label; in that case, the SWF application would know to use those values automatically.)

Similarly, the DataGrid that displays all the current employees receives that information as XML and also needs to be told how to handle the associations.

<mx:DataGrid x="416" y="100" id="employees" width="45%" height="338">
    <mx:columns>
        <mx:DataGridColumn headerText="Department" dataField="department"/>
        <mx:DataGridColumn headerText="Last Name" dataField="last_name"/>
        <mx:DataGridColumn headerText="First Name" dataField="first_name"/>
    </mx:columns>
</mx:DataGrid>

Within the columns subelement, each DataGridColumn is given a heading and is told which XML element’s values should be used to populate that column.

Finally, the visible page has an Add button for submitting the form. An event handler needs to be added to this element so that when it’s clicked, the data is sent to the add_employee.php script. That Flex code is
<mx:Button label="Add" id="submit" click="postAddEmployeeService.send();"/>
The last part of that says that when the button is clicked, the send() method of the postAddEmployeeService object should be called. I’ll explain that next…

Using HTTPService Objects
There are a couple of ways to communicate between Flex and an outside resource, with HTTPService being an easy and lightweight option. This is essentially a regular HTTP request, but is just being made by Flex instead of a Web browser. The application needs a unique HTTPService object for each Flex-PHP interaction, which means there are three in this example. Two are GET requests (for XML data); one is a POST request (for adding new employees). The first two are defined similarly:

<mx:HTTPService id="getDepartmentsService"
    url="http://localhost:8888/flex/departments_xml.php"
    result="handleDepartmentsXml(event)"
    contentType="application/xml" />
<mx:HTTPService id="getEmployeesService"
    url="http://localhost:8888/flex/employees_xml.php"
    result="handleEmployeesXml(event)"
    contentType="application/xml" />

Both HTTPServices…
•    Are given a unique and descriptive id value.
•    Are assigned a URL that points to the PHP script already created (change your URLs accordingly).
•    Names the function to be called after the service request is completed.
•    Identifies as XML data the content type expected in return.

Attachment	Size
leu_flex_php_1.1.png	69.58 KB
leu_flex_php_1.2.png	10.2 KB
leu_flex_php_1.3.png	14.37 KB
leu_flex_php_1.4.png	13.05 KB
leu_flex_php_1.5.png	9.63 KB
leu_flex_php_1.6.png	7.71 KB
larry_ullman_flex_php1_code.zip	382.27 KB