Pimp Your PHP App with Flex!

Using JSON

We’ll now change our example to work with data provided in JSON—the JavaScript Object Notation format. If you’re new to the idea, there’s a good explanation of the JSON from the JSON web site:

To use JSON in Flex, we’ll need to incorporate a library called ActionScript 3 Corelib, which contains JSON support, MD5 hashing, and some other useful functionality that’s currently missing from Flex. You can download the library from its Google Code project page. Unzip the file, and note where you placed it. We need to tell Flex Builder where to find it in the next step.

Back in Flex Builder, right-click your ProductWidget project, and choose Properties from the context menu. Now click on the Flex Build Path item, and choose the Library Path tab. You should be in a window that looks like this:

Click on Add SWC and navigate to the place where you unzipped the file. The SWC file needed can be found in the library’s lib/ subfolder, and it should be called as3corelib.swc. After selecting that file, click OK, and Flex Builder will now happily work with JSON encoded data.

Let’s now examine the code we’ll use to create JSON-formatted data in PHP. PHP5 has integrated JSON support, but for older versions you’ll need an additional PHP library—I’d suggest you download and use the Services_JSON library from PEAR.

The PHP code for outputting JSON text is quite similar to the XML example. This time, we’ll define a class to hold the data first, then our getData function will create a new instance of this class and fill it with dummy data. Finally, we’ll output the JSON-encoded object:

   
<?php    
 class Data    
 {    
   public $imageURL;    
   public $productTitle;    
   public $productLink;    
 }    
   
 function getData()    
 {    
   $data = new Data();    
   $data->imageURL = "http://www.sxc.hu/pic/m/n/ni/nitewind23/638995_dead_rubber_ducky.jpg";    
   $data->productTitle = "Rubber duck";    
   $data->productLink = "http://www.sxc.hu/photo/638995";    
       
   return $data;    
 }    
   
 echo json_encode(getData());    
?>    


Fairly straightforward!

On the Flex side, we need to complete a few important steps: first, we must include the JSON class from the library we added; next, we’ll change the HTTPService block to point to the new service; finally, we’ll alter the serviceLoaded method to decode the JSON text.

First, at the top of our mx:Script block, we’ll instruct Flex to use the JSON class from the ActionScript 3 Corelib library:

import com.adobe.serialization.json.JSON;

We’ll also tell the HTTPService about the location of the JSON service. JSON results are returned as text, so we’ll also need to change the resultFormat to text:

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

Finally, we need to alter the serviceLoaded method so that it can decode the JSON text and turn it into a Flex object. Here’s a new version of serviceLoaded:

private function serviceLoaded(event: ResultEvent) : void    
{    
 var rawData:String = String(event.result);    
 var data:Object = JSON.decode(rawData);    
   
 setData(    
     data.imageURL,    
     data.productTitle,    
     data.productLink    
   );    
}

The complete source of our final example can be seen in Listing 3.

Using Parameters in HTTPRequests

So far, all of our examples requested data directly. In real-world examples, chances are that you’ll need to pass parameters to the services in question, such as a search term or a tag. To set parameters in the HTTPService you add a mx:Request tag containing the parameters to pass, and a method to use for the request. If we want to pass a parameter named search it would look like this:

<mx:HTTPService    
 id="personRequest"    
 url="http://www.example.com/service_json.php"    
 resultFormat="text"    
 result="serviceLoaded(event)"    
 fault="serviceError(event)"    
 method="GET"    
 >    
 <mx:Request>    
   <search>duck</search>    
 </mx:Request>    
</mx:HTTPService>

Start Pimpin’

As you can see, connecting Flex with PHP is quite easy. If your PHP app exposes a service returning XML or JSON data, Flex can grab this data in almost no time. Happy coding!

Quiz

Feeling confident? Test your knowledge of this article and take our quiz. Just for answering the quiz, you’ll be able to download Tour de Flex, a unique desktop application that lets you explore resources such as core Flex components, Adobe AIR documentation and data integration, and third-party plugins.

What’s more, everyone who submits their details by the 6th of May 2009 will go in the draw to win a copy of Adobe Flex Builder 3. There are three copies to give away, so give it a try!