When using Flex you often need to transfer data to a backend server, and one option to do this is to use XML; this tutorial is going to explain the basics of sending XML data to PHP. I am going to show how to build XML data using Flex's built in classes and then we will send the data over to PHP to be handled however you would like. The code for this tutorial is arranged slightly different than earlier tutorial, all the ActionScript code is in separate files that are included into the mxml. This technique is very similar to one used for ASP.Net pages (basically a code behind) - and helps to separate the logic code from the display.

Well what's a tutorial without a working example, so below we have the example application for the day. A simple contact manager which allows you look at the details on each contact and add new contacts. The add contact button at the bottom will pop up a new window to fill out the contact information. Once filled and the "Add Contact" button has been pressed on the pop up, the client XML information is built and send off to PHP. The PHP doesn't do much in this example except parse the XML and build an object from the data. At that point you can do what ever you would like with the data.

Setting up the basic interface

We are going to start by building the interface for the our application. The main screen doesn't have anything particularly complex. We start with a simple panel and inside the panel we add a list for our contacts, several labels and textareas for the different pieces of information available about the contact, and a control bar for an "Add Contact" button. All these come together to create our simple example UI. All this is in the code below.






You might notice that I have included the view source link, which is using the nice view source code. This will allow you to look around at all the source and also the PHP code used in the example.

Creating main application ActionScript

Next we are going to start building the actionscript behind the main mxml file. The first thing we do is create a new actionscript file, mine is named "XMLAddressBookTutorialScript.as" because my main mxml file happens to be "XMLAddressBookTutorial.mxml". I follow the same pattern for all my files.

The first item to be added to the script file is a couple variables that we are going to use. The first is an XMLListCollection, which we use to hold all of our contacts and the second is a single XML item for the currently selected contact from our list. Another item we are going to build here is a initialization function for the application. This function sets a couple static parameters on the XML object (more on this in a second) - I also setup the initial names in the list here but that code is unimportant.


The two properties that I set on the XML class are above. The first, ignoreWhitespace, will ignore space characters at the beginning or end of any text nodes. The second is prettyPrinting which is much more important because it will make sure that when we use toXMLString() that the XML is simply printed without any added formatting (that would screw up parsing it in PHP). Now we need to add our script file to our mxml file and also hook up the initialization function.

We first add a tag to our application, directly under the opening application tag. Inside this tag we set a property named source equal to the path to our script file, which should be in the same directory. Also done at this time is the hooking into the creation complete event of the main application tag. Both snippets can be found below.


The new script tag.


With that done we can now start building new contacts. The next item of business is to hook up the Add Contact button at the bottom of our panel. This is done by simply adding a click event to the button. The function is then added to our script file. The following code is our new button.


Inside the actionscript file we add the addContact function which does a couple things. But before we get too far we add a new private variable named addContactPopUp. This variable will hold an AddContactForm, which we will get to building in just a moment. Back to the addContact function - inside this function we popup a new window and then center it. For more information about building and using pop ups check out our pop up menus tutorial. The new function which is added to our actionscript file follows:

Building the Add Contact pop up window

So now we are going to switch gears a little bit and build a quick pop up window. For the pop up I built a class that extended TitleWindow. The mxml file, "AddContactForm.mxml" for this window doesn't have a lot to it - just a couple labels and text inputs to enter the contact information. Again we have a control bar with a button for adding the contact.


A few items to note are the Event metatag which is added to the metadata. This defines a custom event for this class of type flash.events.Event, more on Event metatag can be found here. When the close button is pressed we remove the pop up using PopUpManager Also you can see we included an actionscript source file "AddContactFormScript.as" and finally we have a click event for our button.

We now create the actionscript file we have included into the mxml file. Inside this file is almost nothing; all we do is dispatch the custom event we created when the add contact button is clicked.

Producing the contact XML object

In our pop up window we throw an event when the user clicks the add contact button. Well, we are going to add an event listener for this custom event. We attach the event listener when we create the pop up, so in our main script file we are going to add the following to our addContact function.


Next we need to create the function that is defined in the addEventListener call. This function is going to do most of the heavy lifting for the application. So I will show it off real quick then go through the pieces.


The function is started by creating a new XML object for our new contact. We initialize the XML to be a simple XML structure of:


Once that is in place we can start adding attributes and child nodes using E4X XML processing standard, more info here. We first add two attributes to our XML root node using .@ syntax; this allows us to just use .@name to reference the "name" attribute. Then we can simply set the attributes to the value we want. There are also functions to handle setting attributes.

To add the address and notes we append a child node to the our new contact XML. We first do this by creating an XML object for the address and setting it equal to a simple xml structure holding the address in the text of a

node. This is then appended as a child to our new contact XML. The second method we use is much easier and take advantage of E4X processing; this time we can just use . (dot) syntax to access and set child nodes. That pretty much takes care of creating the XML.

Last we add it to our contact list and also remove the pop up window.

Displaying the XML data

We use the same E4X syntax to display the data by doing some nice data binding to our visual components and the list. The first item to bind is our contact list variable which we created earlier in the tutorial. We bind this to our list component's dataProvider property. Also we want to keep a current reference to the selected contact in the list which can be done by using a tag. The updated list and new tag are below.


The new tag.


To display the correct information in our list though we need use a label function, which is also added to our list component. This label function takes in the row data and returns the string to be displayed; in our case we are just going to return the value of the name attribute. This gives us our final list component and a new function to go in our main script file.


New function for the script file:


Now that we have a reference to the currently selected contact we can update the labels and textareas to bind their text to values in the current contact. In our panel we update the labels to reflect the data binding. The new items are below.

Sending XML data to PHP

The final thing we need to do in Flex is send our XML data to PHP to be handled. We are going to do this using a simple HTTPService which will send our XML data as a GET variable to a PHP script to parse and handle the data. We define the http service just under our script tag in the main mxml file like so:


Sending it is just as easy, we do this by simply adding a tiny bit of code to the end of our function to build the XML object. This code just creates a parameter object and sets the property contact equal to the return of our new contact object calling toXMLString. The following code is added to the end of the addContactToList function.

Parsing XML in PHP

Now that data has been sent to PHP we still need to parse it and then it can be handled. Below is the entirety of PHP file I used. You first will see a small class to hold details about a contact, and the rest is there to parse the XML data (we will go over this in just a second).


Well the first thing we do is create an XMLReader object (only available in php 5+). This is used to parse the xml easily. We also set a couple parse properties on the XMLReader object. These tell the XMLReader to ignore trying to validate the XML or apply a DTD to it.

We then loop through the XML document reading each node; while doing this we check to see if it is an opening node, and if it is one we then switch on the name (yes we don't need to do this in this particular case but I was making it more general). If the name is "contact" we know we have a new contact to add. We then build a new contact object by getting the attributes. Once the attributes are gotten we then read to get to the address text node (there might be a better way to do this depending on your situation) and the final notes text node. Once the contact information is added to the contact object we add it to an array of contacts.

Just to double check things I printed out the contents of my array, which would only have one contact for this application. I used FireBug - which I highly recommend - to make sure I get the correct response from PHP.

Wrapping up

That pretty much takes care of the basics of handling XML in Flex and sending it over to PHP to be handled. I am not including all the source in one big box because, well, there is a lot of it, but you can browse the source here. If you interested in some other PHP/Flex stuff we have several other tutorials and the Adobe Dev Center has some like this one. If I was unclear about anything let me know or if you just want to leave a comment go for it.