Building Flex applications for PHP based HTTP Services using Flash Builder 4

Updated for Flash Builder release version 🙂

Have a PHP application and want to create Adobe Flex front end?  With Data Centric Development feature in Flash Builder 4 it’s very simple. This article explains communicating with PHP classes on the server using HTTP Service.  Since its HTTP Service you will create a PHP file which will invoke the required PHP class and returns the data as either XML or JSON.

You can also invoke functions in PHP classes on the server from Flex application and get objects as response instead of invoking a JSP/Servlet which returns XML/JSON. Please find more details on invoking PHP methods from Flex application at this URL

In this article we will be using getallcustomers.php file which will invoke getAllCustomers() function in CustomerService.php class (getAllCustomers function returns Customer class objects for each entry in the database) and returns the entries in the database in XML format. We will use Flash Builder DCD to create a Flex application which will consume the XML data returned by the server.

Install Flash Builder 4

Download and install Flash Builder 4 from this URL

Create a new Flex project

Create a Flex project as shown in the image above.

Enter project details

In this screen:

  1. Set the project name to “SampleHTTPPHPProject”
  2. Set the Application type to “web (run in Adobe Flash Player)”
  3. Use default Flex SDK (Flex 4.0)
  4. Click on finish to continue

Using DCD to consume data returned by the PHP file

DCD or Data-Centric Development is one of the advancements to the Flash Builder 4. Let’s see how this is making developers productive. We will use DCD to consume the data from the PHP file.

Creating a service

  1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
  2. Click on “Connect to Data/Service” (Highlighted in the image) in the Data/Services window
  3. Window as shown in the image below will be launched

Selecting service type

Select HTTPService from the options and click on next button to continue.

Setting service properties

A service can have any number of operations. Each service will be a class and each operation of a service will be a function inside the class. There is an URL associated with an operation, when the operation is invoked a HTTP request is sent to the corresponding URL. We will create a service and a operation to consume the data from the PHP file created above.

In this screen:

  1. Change the operation name to “getAllCustomers”
  2. Set the URL of the operation to http://<server-name&gt;:<server-port>/<webapp-context>/getallcustomers.php in this sample it is http://localhost:9292/fb4/getallcustomers.php
  3. Since we are not expecting any parameters in the PHP file we will skip the parameters section
  4. Set the service name to “CustomerService”
  5. Click on finish button to create the service

Service will be created and listed in the services explorer as shown in the image below.

Configuring return type

We will configure service to create an AS3 VO class based on nodes in the XML data returned by the PHP file. The VO class will be the return type for the operation. This will make coding easier, since it is easier to deal with strong typed objects than parsing the XML data.

Right click on the “getAllCustomers” operation and select “Configure return type” as shown in the image below.

A window as shown in the image below will be launched with options to configure the return type. You can chose an existing data type or let the Flash Builder generate VO classes based on the response from the server. Let’s leave it to the Flash Builder to generate required VO classes based on the server response as shown in the image below.

Entering parameters required by the server

Our PHP class is not expecting any parameters, so we don’t have to pass any parameters in this step.

Flash Builder also allows you to give sample response rather than sending a request to the server to get the data. This will be useful when the server side code is not ready but you want to continue creating the Flex application without waiting for the server. Since we have the server ready in our case, let’s send a request to the server and configure return type. Click on next to continue.

You can see the response from the server in the window as shown in the image below.

Flash Builder parses the XML data returned by the server and displays the same as shown in the image above. You can select the XML node based on which you want the return type AS3 class to be generated. In this step, you can choose to create a new data type or merge the properties to existing AS3 class.

In this screen:

  1. Select the “customer” node
  2. Click on finish to continue

You can see the return type of the operation in the “data/services” panel changed as shown in the image below. When we invoke the “getAllCustomers” operation, response will be object of the type “Customer” will be created based on the response from the server and returned.

Binding data/service to UI controls

We usually write code to display the response from the service in a DataGrid or any other control. Flash Builder 4 has an awesome option which allows you to just bind a service response to a control.

In this screen:

  1. Switch to design view
  2. Change the Application layout to “spark.layouts.VerticalLayout” using the properties panel
  3. Drag and drop a “DataGrid” from the “components” panel on to the design area
  4. Set the width and height properties of the “DataGrid” to 100%

Right click on the DataGrid and select “Bind to Data …” as shown in the image below

A window as shown in the image below will be launched.

In this screen:

  1. We select a “New service call” because there are no existing services in the current application.
  2. Select the “CustomerService”
  3. Select “getAllCustomers():Customer[]” from the operations list
  4. Click OK

You can see the DataGrid in the design updated with properties of the Customer object as shown in the image below.

Save and run the application, you can see the data retrieved from the Remoting service and displayed in the DataGrid as shown in the image below.

More article on using Flash Builder 4

That’s it we created a Flex UI for a PHP file exposed as HTTP Service using DCD features in Flash Builder. Flash Builder 4 rocks 🙂


14 Responses to Building Flex applications for PHP based HTTP Services using Flash Builder 4

  1. Vivian says:

    Excellent job Sujit. Keep it up!!!!

  2. Tomulus says:

    i use blazeds with dcd, i see some limitation, a class herited aren’t introspected correctly, it’s not cool 😦

  3. Hi Tomulus,

    Thank you for bringing this to our notice. This is a known issue, please find below URLs to bug. I am sure these will be fixed.
    If you have problem with super class properties, when you are configuring return type select your data type and select the checkbox which says update existing data type and let the Flash Builder introspect the actual response from the server. This will make sure all the properties are created in the AS3 data type class.

    Please vote for the bugs.

    Hope this helps.

  4. anonymous says:

    What about sending XML to the server?
    Assume you consume a service, get an object array of a defined type.. how is a XML request rebuilt from the created object type and sent by http POST?

  5. duewusenteete says:


    What are the cheapest web hosting company?

    I’m need to set up a web site for my boss.

    Thank you,


  6. Hi Anonymous
    Are you asking how to use HTTPService to send a XML or Flash Builder 4 to achieve this?

  7. FrankFN says:

    I heard from several sources that people didnt recieve the product they bought from amazon
    is this true?

  8. Hi FrankFN,

    Which product are you referring to ?

  9. David says:

    I’m a Flash developer (who uses FBuilder to code AS only projects) and am trying to determine if a DCD has advantages in my work. Can you recommend resources for learning more about how to use the services once they are set up? Is the use of services in Builder 4 significantly different than in 3 (or is the configuration of them the primary difference)?

  10. eheuristic says:

    It’s nice
    it’s really nice i like it very much.
    this is very useful for me thank you.

  11. Hi David,

    Using services is not different with Flash Builder 4, Flash Builder 4 will create a lot of code, which developers write for accessing each service. You can use the classes created by Flash Builder 4 as a normal class. Most of the classes created by Flash Builder 4 are classes which make it easy for you to communicate with servers and the code generated is plain AS3 code.

    Hope this helps.

  12. Jeffrey Mason says:

    I have run through your tutorial on the Yahoo Weather and I get the following response: ASObject(10706822){}

    In addition I get a “Security Error Accessing URL” warning.

    Any suggestions.

    The only thing I didn’t do was retrieve all the elements, I only selected the City, Region, and Country because when I left the entire node selected I didn’t get back a response.

  13. a.baki says:

    hi, send http request to php that returns me an xml output. but adobe flash builder converts that xml into an object type, I just want xml object directly. what should I do? any help

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: