Flex 3 with PHP

I’ve recently started to develop with the Linux alpha version of Flex Builder and was looking around for a decent introduction for using Flex 3 with PHP. Unfortunately there was nothing basic and the majority of articles related to Flex 2 and simply didn’t work. So here is an article ground down to the bare basics.

Conceptualisation

The basic concept for interacting with PHP from Flex is to make our PHP script output XML data. We will then use Flex’s HTTP Service to read and manipulate the XML data.

PHP Script

Create a simple PHP script that will output XML markup. Here’s an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
header('Content-type: text/xml');
 
echo "<database>";
    echo "<employee>";
        echo "<name>John Smith</name>";
        echo "<age>21</age>";
    echo "</employee>";
 
    echo "<employee>";
        echo "<name>Joe Bloggs</name>";
        echo "<age>52</age>";
    echo "</employee>";
echo "</database>";
?>

You can expand this to do whatever you please. You aren’t even limited to PHP but the main thing to remember is we need a valid XML document parsed.

Flex’s HTTP Service

Here is the full code for using the HTTP service.

1
2
3
4
5
6
7
8
9
10
11
12

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="xmlRequest.send();">
	<mx:HTTPService id="xmlRequest" url="http://localhost/test.php" />
		<mx:DataGrid 
			paddingLeft="10" paddingTop="10"
			dataProvider="{xmlRequest.lastResult.database.employee}">
			<mx:columns>
				<mx:DataGridColumn headerText="Employee Name" dataField="name" width="100" />
				<mx:DataGridColumn headerText="Age" dataField="age" width="100" />
			</mx:columns>
		</mx:DataGrid>
</mx:Application>

The first thing to take note of is the HTTPService component we create. You must give it a unique id and, in this case, provide the correct URI.

Next we need to make the connection actually take place. Inside the application component we use creationComplete and then send the HTTP request by using ourcomponentID.send(). If you want to create multiple connections you can use multiple requests inside the application component like below.

1

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="xmlRequest.send(); anotherRequest.send();">

For each request you send you must, obviously, create a new HTTPService component.

Next we create a dataProvider so we can manipulate the data. Inside the data we’ve used {xmlRequest.lastResult.database.employee} which corresponds to the XML file we outputted. This provides us with all the data under the employee tree in our XML document.

Finally in the data grid we use dataField=”age” to get the relevant information from inside the XML markup.

The code should be self explanatory. Hope that helps.

Bookmark or share this page:

MSN Contact: contact [at] danielgibbs.net