Debugging Flex and PHP

As your projects grow in size and more people get involved you’ll find yourself fixing more and more bugs. When this happens, one of the best friends a developer has is the debugger. In this paper, I’ll talk about some of the workflows and tools you can use to debug Flex and PHP projects.

If you want to try the steps outlined here for yourself, you’ll need Flash Builder 4, a PHP and MySQL server (MAMP or WAMP will do just fine), Eclipse PDT, and XDebug.

On March 24th I did a webinar on this subject. You can watch the recording over here.

  1. Installing the sample project
    1. Adding the Zend Framework
    2. Importing the sample project
    3. Setting up the PHP service files
    4. Setting up the database
    5. Configuring paths
    6. Configuring the output folder
  2. Using Flash Builder 4 features for debugging
    1. Network Monitor
    2. Test Operation
    3. Flash Builder 4 debugger
  3. Debugging the PHP code
  4. Using XDebug, Eclipse PDT, and Flash Builder 4 to debug Flex and PHP code
    1. Installing and configuring XDebug
    2. Installing Eclipse PDT and Flash Builder 4 together
    3. Using XDebug, Eclipse PDT, and Flash Builder
  5. Other techniques
  6. Where to go from here

Installing the sample project

In this article I’ll use a simple Flex and PHP project that displays data from a MySQL database. The data is retrieved via remoting using the Zend AMF part of the Zend Framework. If you don’t know what remoting is, see Flex and PHP: remoting with Zend AMF.

On the server side I have a simple PHP class (MyService.php) that implements CRUD operations for a single database table. I wrap each record into a PHP data object (VOAuthor.php). On the client side, I have a simple UI for displaying the data (in a data grid) and editing a record (in a form). Most of the Flex client was created using the data-centric development (DCD) features from Flash Builder 4. (For more on DCD, see Working in Flash Builder 4 with Flex and PHP.)

Download the project from here: http://corlan.org/downloads/flex_project.zip.

If you don’t already have Flash Builder 4, download the plug-in or standalone version from here.

[top]

Adding the Zend Framework

As a first step, you’ll need to add the Zend Framework to your server.

  1. In Flash Builder 4, choose File > New > Flex Project.
  2. Give the project a name and select PHP for the Application Server Type.
  3. Click Next.
  4. On the next screen specify the path to your web root and the root URL.
  5. Click Finish.
  6. After Flash Builder 4 creates the project, click Connect to Data/Service in the Data/Services view.
  7. Select PHP as the Service Type and click Next.
  8. For the PHP class select a PHP file from your webroot (see Figure 1). For example, if you have a WAMP installation, you should have an index.php file in your www folder.
  9. Click Finish and a confirmation window opens asking you to install the Zend Framework(see Figure 2). Click OK.
  10. Another confirmation window will confirm the installation of the Zend Framework. Click OK.
  11. You can then cancel the Connect to Data/Service wizard and you can delete the project too.

Figure_3

Figure 1. The Connect to Data/Service wizard

Figure_4

Figure 2. Installing the Zend Framework

If you open up your web root folder, you should now see a ZendFramework folder.

[top]

Importing the sample project

You’re now ready to import the sample project.

  1. In Flash Builder 4, choose File > Import  > Flash Builder Project.
  2. Click on the Browse button and navigate to the flex_project.zip file you downloaded earlier.
  3. Click Open and then click Finish.

[top]

 

Setting up the PHP service files

Now that you have the project imported, you’ll need to make some changes in order to make it run.

  1. Using Explorer (Windows) or Finder (Mac OS X), move the zendamf_remote folder from the project directory to your web root folder.
  2. Back in  Flash Builder 4 delete the zendamf_remote folder.
  3. Choose File > New > Folder.  Click Advanced and then select Link To Folder In The File System. Click Browse and select the zendamf_remote folder from your web server root (see Figure 3).

Figure_1

Figure 3. Creating a linked resource to the zendamf_remote folder

Next you need to define the linked resource to the MyService.php file.
4.    In Flash Builder, open the services folder and delete the MyService.php node.
5.    Right-click the services folder and choose New > File.
6.    Click Advanced and then select Link To File In The File System.
7.    Browse to select the MyService.php file from the zendamf_remote folder in your web root folder.

[top]

Setting up the database

Inside the project you’ll find a file called sql_dump.txt. Use this file to create the authors_aut table and to populate it with data.

Next edit the zendamf_remote/MyService.php file and update the credentials used for connecting to the database (at the top of the file you’ll find constants for server host, database name, user, and password).

[top]

Configuring paths

Now you’ll need to configure the paths used by this project for web root and the Zend Framework. In Package Explorer double-click the bin-debug/amf_config.ini file. Edit the following lines and make sure the values point to your web root and Zend Framework. For example, on a Windows machine with WAMP, these lines may look like this (make sure they do not start with “;”):

 

webroot =C:/wamp/www
 
zend_path = c:/wamp/www/ZendFramework

 

[top]

Configuring the output folder

  1. Lastly, you need to set the output folder of the project.
  2. Right-click the project name in the Package Explorer and select Properties.
  3. Select the Flex Server node from the list.
  4. For the Output Folder add the path to your webroot followed by “\flex_project-debug”.
  5. On my WAMP configuration the path is C:\wamp\www\flex_project-debug.
  6. Click Validate Configuration and then Apply and OK.

Figure 4 shows the project after these steps.

Figure_2

Figure 4. The flex_project project in Flash Builder 4.

Now you are ready to run the project (choose Run > Run flex_project). Once the application is loaded in the browser, you should be able to see the records displayed in the data grid and to edit them.

FIgure_5

Figure 5. Running the application

[top]

 

Using Flash Builder 4 features for debugging

There are (at least) three different ways to  debug your code using Flash Builder 4 (please note that I use the term debugging here in a broad sense).

Two new views in Flash Builder 4 help you to debug your code: the Network Monitor and Test Operation views. If don’t see these you views you can add them by choosing Window > Other Views and expanding the Flash Builder node (Network Monitor is available only in Flash Builder Premium).

[top]

Network Monitor

Using the Network Monitor view you can see all the communication between the Flex client and the server. You can see both the raw data and the objects. If you want to use it, you must enable it first by clicking on the Enable Monitor icon in Network Monitor view (see Figure 6).

Figure_6

Figure 6. Enabling the Network Monitor

Now, just run the application (you don’t have to run it in debug mode). As you use the application and data are exchanged with the server, you should see each request, how long it took, and all the data that was sent/received (see Figure 7).

Figure_7

Figure 7. Using the Network Monitor

[top]

 

Test Operation

The Test Operation view, as the name implies, lets you to test the available operations. In Test Operation view, select the getData() operation, and click Test. You should see the four VOAuthor objects (see Figure 8). If the operation expects arguments, then this view lets you define the arguments values.

Figure_8

Figure 8. Using Test Operation

[top]

Flash Builder 4 debugger

The most powerful way to detect bugs is, of course, debugging. The Flash Builder debugger is a powerful tool that can help you quickly pinpoint and resolve bugs.

Let’s see how you can debug the Flex and PHP code. First run the project in debug mode.  There are a number of ways to do this:

  • If you are in the Flash perspective you can click the Debug toolbar button.
  • You can also right-click flex_project.mxml and choose Debug As > Web Application.
  • Or, you can choose Run > Debug flex_project.

This will start the debugger. If you set a breakpoint inside the dataGrid_creationcompleteHandler() function and run in debug mode you should see the debugger in action (see Figure 9).

Figure_9

Figure 9. Flash Builder debugger in action

[top]

Debugging the PHP code

What about debugging the PHP code? First of all, you should check that you don’t have errors in your PHP services (classes). You might have misspelled a variable or function name, or used the wrong credentials for connecting to MySQL, and so on. Then, if you add some initialization code and make a call to the method you want to test you can test the execution of the code.

For example, with my setup I could load the following URL in a browser: http://localhost/zendamf_remote/MyService.php .

This is the URL to the PHP service. If there are no syntax errors, then I can check that getData() returns what I expect to by adding this code above the class definition:

$service = new MyService();  
print_r($service->getData()); 

 

PHP developers have been using a combination of var_dump() and die() for years in order to see what is happening with our PHP scripts. But how can you use this approach when you’re working with Flex and PHP? Instead of just dumping variables on the screen, you can have a logging function that dumps the variables into a text file. For example, I use this function:

function logMe($var) {
    $filename = dirname(__FILE__) . '/__log.txt';          
    if (!$handle = fopen($filename, 'a')) {
        echo "Cannot open file ($filename)";         
        return;
     }          
    $toSave = var_export($var, true);    
    fwrite($handle, "[" . date("y-m-d H:i:s") . "]");     
    fwrite($handle, "\n");    
    fwrite($handle, $toSave);     fwrite($handle, "\n");     
    fclose($handle); 
}

 

Then, if I want to log, for example, the argument that Flex sends when the saveData() method is called, I just add this line inside of the saveData() method, run the Flex application, and edit a row:

logMe($author);

If you try this, you’ll see something like this in the log file (you can find the log file in the zendamf_remote folder):

[10-02-18 14:20:01] stdClass::__set_state(array( 'lname_aut' => 'Corlan', 'fname_aut' => 'Mihai', 'id_aut' => '15', )) 

 

[top]

Using XDebug, Eclipse PDT, and Flash Builder 4 to debug Flex and PHP code

What about actually debugging the code using a PHP and Flex debugger? I think this is by far the most powerful and fast method to pinpoint issues in your application, especially when dealing with client-server applications.

For this part you’ll need some additional tools besides Flash Builder 4: XDebug for debugging the PHP code, and Eclipse PDT used as a client for XDebug (of course you can also use it for editing PHP files).

[top]

Installing and configuring XDebug

You can get Windows binaries of the XDebug from the project website. Unfortunately, if you need it for another platform you have to  grab the source and compile it for your platform or look somewhere else. After I searched a little bit, I found that you can find binaries for other platforms at the ActiveState website.

Once you extract the archive for your operating system, you’ll find XDebug versions for different PHP versions. On my machine I’m running PHP 5.2.6, so I used xdebug.so for PHP 5.2.

With my MAMP server I copied the xdebug.so file to /Applications/MAMP/bin/php5/lib/php/extensions/no-debug-non-zts-20050922/ and then I open up the php.ini file (from /Applications/MAMP/conf/php5/) and added these lines at the end of the file:

[xdebug]
zend_extension=/Applications/MAMP/bin/php5/lib/php/extensions/no-debug-non-zts-20050922/xdebug.so 

 

If you have configured the Zend debugger, then you’ll need to comment those lines. Save the php.ini file and restart the Apache server. If you run a phpinfo() script you should see an entry called XDebug.

Next, you need to configure the XDebug. Under the previous lines in php.ini, just add these lines:

xdebug.remote_enable=On
xdebug.remote_host="localhost"
xdebug.remote_port=9000
xdebug.remote_handler="dbgp"

 

Make sure you match the remote_host with your configuration, and make sure you set a remote_port that it is not used by other applications running on your machine.

Save the file and restart the server.

[top]

 

Installing Eclipse PDT and Flash Builder 4 together

I like using modern IDEs not only for writing code, but for debugging too. One good client for XDebug is Eclipse PDT (Eclipse PHP Development Tools). You can download PDT from here.

The beauty of using Eclipse-based IDEs is that you can install multiple products together in the same Eclipse environment. In this case, you have two choices: either install the Flash Builder 4 plug-in on top of Eclipse PDT, or grab the update link of Eclipse PDT and install it on top of your Flash Builder 4 standalone installation.

On my machine I chose the first option. If you are on a Mac, you have to grab the Mac OS X Carbon version of Eclipse PDT because Flash Builder 4 is available only for Carbon.

Once you have these two IDEs installed together you can have combined Flex and PHP projects (projects that have both Flex and PHP natures). The easiest way to create such a project is to start with a new PHP project and then apply Flex nature (Right-click the project name and choose Add/Change Project Type > Add Flex Project type. When the wizard starts make sure you select PHP as the application server type.)

Note: the project used for this article was created using this approach, so it has both natures.

[top]

Using XDebug, Eclipse PDT, and Flash Builder

Actually, the hardest part of setting up debugging for Flex and PHP projects is already behind you. The last step is the creation of a PHP debug configuration for your flex_project project.

But first, let’s make some changes in the Eclipse preferences. Open the Preferences for Eclipse and select the Debug option in the PHP node. For the PHP Debugger, select XDebug (see Figure 10). If you specified a port other than 9000 for XDebug in php.ini, then you have to select Installed Debuggers (extend the Debug node) and configure the port for XDebug. Click Apply.

Figure_10

Figure 10. Making XDebug the default option

Next, type browser in the search box of the Preferences window (top-left corner), select the Web Browser entry, and check Use External Web browser option (see Figure 11). This will make Eclipse start the debugging sessions in the default web browser instead of the internal one.

FIgure_11

Figure 11. Setting up the external web browser for debugging.

The next step is to create the Debug configuration for PHP. You’ll use this configuration to start the PHP debugger and thus once you start the Flex debugging session, the PHP debugger will connect to the same page. Click the arrow next to the Debug button (see Figure 12) and choose Debug Configurations.

Figure_12

Figure 12. Open Debug Configurations.

In the Debug Configurations dialog box, select PHP Web Page node from the left panel, and double-click it to create a new configuration. Type flex_project_php as the name, and then select XDebug as the Server Debugger option (see Figure 13). For the File entry select the MyService.php file from flex_project/zendamf_remote/MyService.php. Deselect the Auto Generate checkbox in the URL section, and for the URL, type the URL that points to the MyService.php file (on my machine this URL is http://localhost/zendamf_remote/MyService.php). Click Apply and then click Debug.

Figure_13

Figure 13. Creating the PHP debug configuration

Now that you have started the PHP debugger, place a breakpoint inside of the dataGrid_creationCompleteHandler() function from flex_project.mxml, and place another breakpoint in the flex_project/zendamf_remote/MyService.php inside of the getData() method.

Then run the Flex application in debug mode (with the Flash perspective selected, right-click flex_project.mxml and choose Debug As > Web Application). Once the application is launched in the browser you should see the Flex debugger in action and the code execution halted at the breakpoint from the dataGrid_creationCompleteHandler function (see Figure 14).

 

Figure_14

Figure 14. Flex debugger in action

Resume execution (or press F8) and you should see the PHP debugger stopped at the first line of flex_project/bind-debug/gateway.php. This is the script called by the Flex client when it uses remoting to call the MyService class. This script sets up some configuration parameters such as where the Zend Framework is installed, and then starts the Zend AMF remoting. After using Resume, you should hit the breakpoint from the getData() method of the MyService object (see Figure 15).

Figure_15

Figure 15. PHP debugger in action

Once you’ve done with the debugging in PHP, click Terminate (the red square button) to terminate the PHP debugging session.

[top]

Other techniques

Some people use tools like proxy sniffers (such as Charles) or Firebug to see the communication between the client and the server. These tools understand the AMF3 format, the messaging format used by remoting.

While there is nothing wrong with this approach, I feel that the new features of Flash Builder 4 (Test Operation and Networking Monitor) provide similar functionality but in an integrated package.

[top]

Where to go from here

Using Flash Builder 4 for Flex and PHP projects provides a great foundation. Add XDebug and Eclipse PDT to this and you have an even more powerful combination for development and debugging. As your projects grow in scope and complexity, you will be able to debug the Flex and PHP code more easily and at the same time.

Visit the Flex Developer Center – Learn Flex and PHP page for more articles on Flex, PHP, and AMF. And of course keep an eye on my blog. More Flex and PHP articles will come.

[top]

35 thoughts on “Debugging Flex and PHP

  1. Pingback: White Paper: debugging Flex and PHP projects : Mihai CORLAN

  2. Pingback: Flash Builder 4 – Flex et PHP (Zend), le guide de configuration complet - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3

  3. Pingback: How to debug Flex/AIR and PHP applications : Mihai CORLAN

  4. Pingback: Flash / Flex Israel Adobe group meeting « Flex Black Belt

  5. Pingback: Webs Developer » Mihai Corlan’s Blog: Debugging Flex and PHP

  6. Pingback: Working with Doctrine, Zend Framework, and Flex : Mihai CORLAN

  7. Pingback: ActionScriptHero.org » Blog Archive » Adobe User Group Flash and Flex Israel event

  8. Pingback: Deboguer avec Flex and PHP | traffic-internet.net

  9. Pingback: Flex and PHP webinar goodies : Mihai CORLAN

  10. @JhunC

    I think you can use the steps described in my tutorial on Windows as well. There is nothing in my tutorial that works only on a Mac.

  11. You recommend using Eclipse PDT and XDebug, but you don’t mention Zend Studio. Have you tried Zend Studio 7.x with Flash Builder 4? Or, are you recommending Eclipse PDT and XDebug because they are open source and free?

    Thanks for the always great articles about Flex and PHP development!

  12. @MTM

    Zend Studio is an amazing product. However it has a small issue when it comes to debugging Flex and PHP projects. And because you can not set up XDebug with Zend Studio, I think for debugging Eclipse PDT and XDebug is better for now.

    If you read my articles, then you should know I talk a lot about Zend Studio :)

    Thanks for the nice words!

  13. Thanks for the quick response.

    Right after I sent my message I read your article “Working with Flex and PHP in Eclipse” on the Adobe Developer site and sure enough you talk about Zend Studio 7.1 and Flash Builder 4.

    I commented too quick. But, thanks for the tip. I think I’ll purchase Flash Builder 4 Premium and use Eclipse PDT and XDebug as you recommend. I had been planning to purchase Flash Builder 4 Standard and use it with Zend Studio 7.2.

  14. @MTM

    I know that Zend is working to fix this issue, and I think it will be fix pretty soon.

  15. Hello, congratulation for your tutorial, is great!

    I´m working with FLEX and Adobe flash builder 4, and i have a lot of problemas with the php connection.
    Can u help me?

    The question is, that I have to make an application with users, folders and news. Each user have one or more folders, and each folder contains or no, some news.

    I have my DataBase (with wamp server), and i created the php document with the sample of the Flash Builder (but making changes in some functions).
    Functions same to be ok, because in Data/Service Panel, in the option “test operation”, the results are OK.

    My problem come when I make a call to any function of my php, for example, in my code:

    /********************************************/

    protected function getuser(event:MouseEvent):void
    {
    countResult.token=carpetaService.countResult(); pruebasal.text=countResult.lastResult;
    }

    /***********************************/

    /**********************************/

    First time I click in the button, the result of my TextArea “pruebasal” is “undefined”, and second time has de correct value.
    When I have more than one call in the function, I have to click more than 2 times to obtain the result.

    Why is that? I´m very TIRED! =(

    Thanks for your help and congratulations again.

  16. Mihail thanks a lot man! you’re great.
    please continue doing this amazing things

    thanks you again :D

  17. Pingback: Polish Adobe Flex User Group » Blog Archive » Testowa konfiguracja Zend AMF w kilku krokach

  18. Pingback: 50 resources to get up to speed with the Flash Platform : Mihai Corlan

  19. Pingback: 有助于Flash平台开发提速的50个学习资源 « echo "RenYuan's Blog"

  20. Pingback: 有助于Flash平台开发提速的50个学习资源 – 新闻资讯 – 9RIA.com天地会 – 论坛 | 谱曲

  21. Hi Mihai, I need help with this please:
    “Make sure that Zend Framework is installed correctly and the parameter “amf.production” is not set to true in the amf_config.ini file located in the project output folder. Unable to open WampServer’s config file, please change path in index.php file.”

  22. Hi Mihai, thanks for this tutorial, i just started but i’m a noob with flex/php and it helps me.

    Just a little thing, i think i found a little error (or maybe i missed something :D).
    In “Configuring paths”, you say
    “zend_path = c:/wamp/www/ZendFramework”
    but it only works with
    “zend_path = c:/wamp/www/ZendFramework/library”
    like said in the file amf_config.ini itself.

    Best Regards

  23. hi and thanks for the recording. Only two things. Use the recording session is painful! Any other way is it not possibile to record a movie (.mov or flv)? Second: Cau you point me to a good tutorial or video tutorial even better to “Zend database abstraction”?.
    thanks a lot.

  24. hi
    actually im working on a simple project where
    i have to do this

    i have a text area and put some text in that where it

  25. hi
    actually im working on a simple project where
    i have to do this

    i have a text area and put some text in that where it contains words…….

    when i select a word like association where i made the starting anchor position is at “a” and active positon is at letter “c” so im adding the selected letters in a array but if user selects half the word it should select the whole word and add to arraylist please help me in this . if any querys……..

  26. Hi Mihai,

    Nice tutorial! Just one thing. … when I try to configure the php executable it shows me the “zend debugger” option only.

    I tried to repeat the same action using a clean eclipse installation (without installing the FlashBuilder plugin) and it worked! Strange … isn’t it?

    Do you know how is it possible to solve this issue?
    Thank you in advance

    Marco

    PS. Please find my configuration next:

    – OS: Windows 7 x64
    – eclipse-php-helios-win32
    – XAMPP 1.7.4 [PHP: 5.3.5]

  27. I have noticed that expenses for internet degree gurus tend to be an excellent value. Like a full Bachelor’s Degree in Communication with the University of Phoenix Online consists of Sixty credits with $515/credit or $30,900. Also American Intercontinental University Online gives a Bachelors of Business Administration with a total program feature of 180 units and a tuition fee of $30,560. Online learning has made obtaining your education so much easier because you might earn your degree in the comfort of your house and when you finish from office. Thanks for other tips I have learned through your blog.

  28. Hi Mihai,

    I enjoyed your article. I did, however, run into a datawizard/flashbuilder problem that your techniques still left me blocked. Specifically, Section 2, there is a problem space between [2.1,2.2] and [2.3] that can leave someone blind and frustrated for days (me). It turns out that there may be a bug (jlumby found) that causes service calls to change the database to not work and no information is provided as to why. Specifically, I verified that the network monitor was seeing transactions to my database (through getAll) but saw no network activity when I attempted to write to the database (create or update) I further used technique 2.2 (test) and found that I could, in fact, change the database so I know that the php stuff was working. That left me with my only resources as technique 2.3. This was fine, until I got into the bowls of the mx.data. Once I stepped into a method called operationManager, I lost all visibility into the source making further debugging impossible.

    It turns out the problem is that my version of flashbuilder 4.5 wizards do not seem to ‘commit’ the changes resulting in no network traffic and no change to my database. jlumby discovered this (see forum topic on flashbuilder and php). I modified the _Super_.as file to include ‘commit’ statements after each of the methods that change the database and all is working now.

    It would be really nice if there was a way of verifying that a flashbuilder wizard functions were running correctly. The ‘test’ feature seems to circumvent something and does not emulate what actual code does. Even better would be sources for the mx.data classes so that an experienced developer could discover the problem.

    paula_ke

  29. @paula_ke

    Can you tell what version of Flash Builder are using? is there the release version available on Adobe.com or one from the pre-release group?

    Thanks!
    Mihai Corlan

  30. Hi Mihai,
    I had success building a test application using flex,php and zendframework.
    Thank You Very Much.
    But one confussion , like mickael i had to change the “zend_path” a little bit.
    In my case :
    This works: “D:/XAMP Backup/xampp/htdocs/ZendFramework/library”
    but this doesn’t : “D:/XAMP Backup/xampp/htdocs/ZendFramework”

    It will be great if you make it clear for me buddy :)

Leave a Reply

Your email address will not be published. Required fields are marked *