XML and sending variables

One great feature of Flex is its ability to parse XML in a simple way, enabling Flex developers to easily take advantage of external XML files or web services. Coincidentally, PHP makes it incredibly simple to create XML data from many sources. The next example highlights this feature by sending data from Flex to PHP as POST variables, and then having PHP return that data in XML format. The Flex application displays the resulting XML data in a datagrid.

To begin, create a new PHP file under your helloWorld project by right-clicking the project folder icon and choosing New > PHP File. Name the file xml.php. Next, add the following code between the initial PHP tags:

$title = $_POST['title'];
$instructor = $_POST['instructor'];
$description = $_POST['description'];
$xml_output  = "<?xml version=\"1.0\"?>\n";
$xml_output .= "<courses>";
$xml_output  .=  '<course>'; 
$xml_output  .=  "<title>".  $title . "</title>";
$xml_output  .=  "<instructor>". $instructor . "</instructor>";
$xml_output  .=  "<description>". $description . "</description>";
$xml_output  .=  "</course>";
$xml_output  .=  "</courses>";
 
echo $xml_output;

This script accepts three variables via POST: a course title, an instructor name, and a course description. The script then places those variables inside XML element tags, and sends the result to the client. Figure 18 depicts a sample version of the resulting XML.

Figure 18. A simple XML file

Next, you need to modify your Flex application's helloWorld.mxml file to create a few more controls. The form below creates an MXML form to accept a course title, an instructor name, and a description from the user. Add the following code just above your <mx:Button> control:

<mx:Form>
      <mx:FormItem label="Course Title:">
            <mx:TextInput id="titleInput"/>
      </mx:FormItem>
      <mx:FormItem label="Instructor:">
            <mx:TextInput id="instructorInput"/>
      </mx:FormItem>
      <mx:FormItem label="Description:">
            <mx:TextArea id="descriptionInput"/>
      </mx:FormItem>
</mx:Form>

Now, you need a datagrid to display the result returned by PHP. The following code creates a datagrid with appropriate headers and dataField property entries, which correspond to the elements beneath <course> in the XML code that returns from PHP. Insert the following code near the bottom of the helloWorld.mxml file, just above the closing </mx:Application> tag:

<mx:DataGrid id="myDG">
      <mx:columns>
            <mx:DataGridColumn headerText="Title" dataField="title"/>
            <mx:DataGridColumn headerText="Instructor" dataField="instructor"/>
            <mx:DataGridColumn headerText="Description" dataField="description"/>
      </mx:columns>
</mx:DataGrid>  

You now have the necessary user controls, but you need to modify the application to use them. For instance, the <mx:HTTPService> you used earlier doesn't send any variables, and returns a generic object. It also points to helloWorld.php instead of your new xml.php. To correct your <mx:HTTPService>, replace it with this code:

<mx:HTTPService id="phpService" url="http://localhost/helloWorld/xml.php" resultFormat="e4x" method="POST" result="showResult()">
      <mx:request xmlns="">
            <title>{titleInput.text}</title>
            <instructor>{instructorInput.text}</instructor>
            <description>{descriptionInput.text}</description>
      </mx:request>
</mx:HTTPService>

The code above specifies a resultFormat of ECMAScript for XML (E4X). Using E4X makes parsing the XML very simple. In this code, you have also specified a method of POST, because that is what your PHP script expects to receive. Finally, there is a new <mx:request> element, with three sub-elements for your POST variables. These values are bound to the input fields on the MXML form, and are submitted via POST to the PHP script.

However, the result function is still set to showResult(), so you need to modify this function now. Replace the function with the following code:

private function showResult():void {
      var myXML:XML = new XML(phpService.lastResult);
      myDG.dataProvider = myXML..course;
}

The function now creates a new XML object, myXML, using the lastResult of the call to PHP. Then, the datagrid's dataProvider property is set to myXML..course. The double-dots are E4X syntax. Instead of navigating down to the element to display using single dot notation, the double-dot notation simply parses the XML object and returns all the elements named "course."

Save and run the application. Type in relevant information—similar to what is shown in Figure 19—and then click Call PHP.

Figure 19. The finished sample application

Where to go from here

With Flex Builder and Zend Studio for Eclipse working together, your Flex/PHP development projects can be more organized, and you can spend less time on development housekeeping. With only a couple of clicks, you can edit your PHP backend, switch to the Flex frontend, then build and run the application. If you use Subversion to manage your projects, you can easily checkout, edit, and commit both PHP and Flex project files from within a single IDE.

For more information on Flex and PHP, visit the Learn Flex and PHP page on Flex Developer Center.

Page 5 of 5

Previous Page