Pimp Your PHP App with Flex!

Spicing It Up

Because it’s so easy, let’s add a small piece of eye candy to the application and fade in the image. This is as simple as adding completeEffect="Fade" to the mx:Image tag:

<mx:Image id="image" height="150" completeEffect="Fade"/>

Now, run the application again—you should see that the duck image will fade in gently. There are a lot of predefined effects in Flex, and it’s very easy to customize them or to create your own. For more information take a look at Working with effects in the Adobe LiveDocs.

So, now we have the basic framework to provide the Flex application with data. Next, it’s time to provide that data in some more exciting ways: let’s use PHP to create some XML for our application to consume.

Working with XML Data

If your app can produce XML data, the next part of this tutorial will show you how to process that data in Flex. XML can be easily created, is readable by humans, and the Flex support for XML is neat. These are all good reasons to use it, so let’s have a look at the work involved to do so.

Before we start: It’s important to remember that Flash is extremely strict about accessing data from a different domain to the one where the SWF is kept. You’ll either need to run your Flex app from the same domain as your PHP scripts, or create a cross-domain policy file on the server where your PHP lives. For more information about cross-domain policy files and the Flash security model, check out this Adobe Developer Connection article.

Since we’re going to use HTTP to retrieve the data, we’ll use a Flex class called HTTPService, which will handle all the heavy lifting for us. We’ll tell the HTTPService where to connect to and what to do with the returned data.

To try it out, we’ll need to code up a simple PHP data provider. In a real-world situation, you’d be pulling the information from a database, but for this example we’ll keep it simple and hard-code these values. Here’s a PHP script that uses a function to fetch the data, creates a variable to hold that data, and then outputs the data in XML format:

<?php  
 header("Content-type: text/xml");  
 function getData() {  
   $data["productLabel"] = "Rubber duck";  
   $data["productLink"] = "http://www.sxc.hu/photo/638995";  
   $data["imageURL"] = "http://www.sxc.hu/pic/m/n/ni/nitewind23/638995_dead_rubber_ducky.jpg";  
   return $data;  
   }  
     
 $product = getData();  
?>  
<?php echo '<?xml version="1.0"?>'; ?>  
<data>  
 <product>  
    <label><?php echo $product["productLabel"] ?></label>  
    <link><?php echo $product["productLink"] ?></link>  
    <imageURL><?php echo $product["imageURL"] ?></imageURL>  
 </product>  
</data>

In our Flex app, we’ll define an HTTPService pointing to our PHP page by adding an HTTPService block to our code. Inside this block we need to define a unique name for our service (id) so that we can refer to it in our ActionScript code, the URL to call (url), and the result format (resultFormat).

One point to keep in mind is that the call will be asynchronous: the send method will return immediately and the service will be called in the background. So, how do we access the data? The HTTPService provides two callback methods for this purpose: one for when the result is successful (result), and one for when it fails (fault).

Here’s the code we’ll use to define our HTTPService block, which we’ll place before the mx:Script block:

<mx:HTTPService    
 id="productService"  
 url="http://www.example.com/service.php"    
 resultFormat="e4x"  
 result="serviceLoaded(event)"  
 fault="serviceError(event)"  
/>

When an HTTPService will retrieve XML, you should set the expected format, resultFormat, to e4x—ECMAScript for XML. Using this result type allows us to employ a lot of convenient JavaScript functions when working with the returned XML.

If you’re wondering why it’s called ECMAScript instead of JavaScript, well, the Ecma International group defines the JavaScript language standards. The idea is that different implementations of JavaScript (for example, different browsers) ought to define at least the functionality defined by the Ecma International group. This core scripting language is also called ECMAScript.

Next, we need to define what we’ll do with the data we receive from the HTTPService. We know the result format, so we simply treat the event result as XML. This allows us to access the data in the XML like a normal object. The top level element (data in our example) will be mapped to be the actual XML object (xmlData in our example), so we can access the product level by using xmlData.product. Since the XML could contain several product elements, we need to specify which one we want—in this example, it will always be the first one (xmlData.product[0]). The elements below the product can then be accessed via their element directly. Just passing the data to our existing setData function will do the trick for us. We’ll do all this in a function, serviceLoaded:

private function serviceLoaded(event: ResultEvent) : void  
{  
 var xmlData: XML = event.result as XML;  
 setData(  
   xmlData.product[0].imageURL,    
   xmlData.product[0].label,    
   xmlData.product[0].link    
   );  
}

We also need to define another function, serviceError, for when there is a problem with the HTTPService. Normally, you would want to retry or specify some other, more meaningful action, but for now we’ll simply add a trace:

private function serviceError(event: FaultEvent) : void  
{  
 trace("Unable to get XML:" + event.fault.message);  
}  


Listing 2 shows the complete source for the XML version, with our HTTPService and the related functions.

Next, we’ll investigate how to consume data provided in the JSON format.