Building Flex application for a PHP class using Flash Builder 4

Updated for Flash Builder 4 release version🙂

If you have a PHP class, Flash Builder 4 allows you to create a Flex front end for it with just few clicks. Continue reading this article to find out how.

In this article we will be creating Flex application which will invoke functions in CustomerService class which will return Customer class objects for each entry in the database. We will use Flash Builder DCD to create a Flex application which will consume the Customer objects returned by the CustomerService class.

Install Flash Builder 4

Download and install Flash Builder 4 from this URL http://www.adobe.com/products/flashbuilder/

Create a new Flex project

Create new Flex project from File -> New -> Flex Project

Enter project details as shown in the image above and explained below

In this screen:

  1. Set the project name to “ExistingPHPSample”
  2. Set the Application type to “web (run in Adobe Flash Player)”
  3. Use the default Flex SDK (Flex 4.0)
  4. Set the Application server type to “PHP”
  5. Click next to continue

In this screen:

  1. Set the Web root to the root folder of your PHP server. Its c:\apacheserver\htdocs in this sample
  2. Set the Root URL to the root URL of your PHP server. Its http://localhost:9292 in this sample
  3. Leave the Output folder to default value
  4. Click the “Validate Configuration” to validate the server details entered
  5. 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

Since we want to communicate with the PHP we created, select PHP and click on next button.

Selecting PHP file for the service

In this screen:

  1. Browse and select the PHP class file to use. Make sure the PHP file is deployed in your web application
  2. Click on next button to continue

You will see a window displayed, saying Zend AMF library will be installed as shown in the image below. Just click on OK and continue will the set up. Flash Builder will deploy the Zend AMF on your PHP server.

Once the installation completes, Flash Builder will display a message. Clicking OK will display the functions in the PHP class. PHP class functions are referred as “operation”. Image below shows the window with operations available.

Click on finish to continue. Service created above can be seen in the services explorer as shown in the image below.

Configuring return type

In this step we will test the operation and configure the return type on the client i.e. we will specify what type of object to create with the response from the server. This will make it easy for us to develop, since it is easier to deal with strong typed objects.

Right click on the “getAllCustomers” operation in the services explorer 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.

Click next to continue. You can see the response from the server in the window as shown in the image below.

Flash Builder introspected the Customer object returned from the server. Just click on finish. You can see the return type of the operation changed as shown in the image below. When we invoke the “getAllCustomers” operation, response will be object of the type “Customer”, in our case ArrayCollection containing Customer objects.

Displaying or binding service results in 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. Select “Customer[]” as Data provider
  5. 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 https://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we created a Flex UI for an existing PHP class using DCD features in Flash Builder 4 in just few minutes. Flash Builder 4 rocks🙂

16 Responses to Building Flex application for a PHP class using Flash Builder 4

  1. jurlan says:

    Dear sir,

    thanks for all your examples .. they work just great.
    But I have a small problem .. my database is sql server 2000 but using mssql_functions in php gives no problem at all.
    The problem is there are some non english chars in my database, like é è, … So when defining a return type for the dataservice, it doesn’t work.
    When I remove those accents from the database, it does.
    Any suggestions on this issue?
    Thanks a lot in advance
    Kind Regards
    Jurlan

  2. Hi Jurlan,

    Thanks for bringing this to our notice. There is a bug logged on this at this URL https://bugs.adobe.com/jira/browse/FB-19088
    Please vote for the bug, we will be fixing this soon.

    Thanks again.

  3. JurLan says:

    Dear Sir,

    thank you for replying to this issue and filing it as a bug.
    I voted for the bug and posted some kind of workaround which does the trick for now ..

    Keep up the excellent work here😉

  4. Suresh says:

    Hi Sujit i could not sleep man i was waiting for your reply and trying hard to search for anysolution but i could not .. please help me

  5. dail says:

    thank you for replying to this issue and filing it as a bug.

  6. suresh kumar reddy says:

    i am getting such type of error database not connected help me to recover from this problem.

    Warning: PDO::__construct() [pdo.–construct]: MySQL server has gone away in C:\wamp\www\ZendFramework\library\Zend\Db\Adapter\Pdo\Abstract.php on line 129

    Warning: PDO::__construct() [pdo.–construct]: Error while reading greeting packet. PID=6036 in C:\wamp\www\ZendFramework\library\Zend\Db\Adapter\Pdo\Abstract.php on line 129

    Fatal error: Maximum execution time of 60 seconds exceeded in C:\wamp\www\ZendFramework\library\Zend\Db\Adapter\Pdo\Abstract.php on line 0

  7. Hi Suresh,

    Please check if your database is running and also check if the code to connect to the database from PHP is fine.

    Hope this helps.

  8. Kamran says:

    Hi

    I have stored image URL in the database. I want to display image in the datagrid. How can it be done?
    Kindly help me out..

    Thanks
    Kamran
    sm-kamran@hotmail.com

  9. Ravi Mone says:

    Hi sir,

    This example is great, as i am struggling from new days to bind data between flex and php, ur example made
    easy, but can u please post some more examples based on
    flex, php and mysql. examples like: on click of a slice of piechart have to open data grid with values of that particular values.

    Please give more examples of php and flex

    Thanks and Regards
    Ravi.M

  10. Kanupriya Surana says:

    hey can u give more details about the datasevices between flex and php as i am struggling through it alot and moreover i want to know ow can we create our own service class and use it for inserting and deleting the data entries.

    Thanks and regards
    kanupriya surana

  11. ddmm says:

    Thanks, it help me a lot. but one thing, i have no idea on creating calculation function in php in order to save in my sql database.

  12. Hi ddmm,

    What kind of calculations do you want to perform?

  13. Reqontx says:

    We are trying to figure out how to change one element from the datagrid to show an item from another table based on the value of the item. In our case the U.S. state list is on a table (states) with three columns: ID, state_name, and state_abbreviation. The datagrid displays the contact info and the state as an integer referring to the states table. We created a service to showStateByID but cannot figure out how to show the state name instead of the integer in the datagrid.

  14. Hi Reqontx,

    I think in your server side function which returns states by Id, you can chose to fetch the state name also and include it in the VO sent back to the server. On the client side, you can just add a DatagridColumn with appropriate dataField to display the state name.

    Hope this helps.

  15. Paul says:

    Hi Sujit Reddy G !!

    Thnak’s alot for this. Great job !
    But I got a probleme:

    I’ve created an auto-generated form tu update and to create new items to be addeded to the database. But when I click on the subbmit button, the datagrid changes, but not the database. When I refresh the page, the old version comes back.

    Could you helpe me plz ?

  16. Hi Paul,

    Please check if you are invoking the update/create function to make the changes on the server. You can also have a look at the article below:

    https://sujitreddyg.wordpress.com/2009/06/08/client-side-data-management-using-flash-builder-4/

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: