Configuring Flash Builder 4 and Eclipse PHP development tools

DZone 's Guide to

Configuring Flash Builder 4 and Eclipse PHP development tools

· Web Dev Zone ·
Free Resource

This article describes how PHP developers can get access to the best productivity features available for both PHP and Flex code in the same IDE. Adobe Flash Builder 4 and PHP Development Tools (PDT) can be set up to enable editing and debugging of PHP files along with the Flex application in the same instance of Eclipse. This setup provides access to all features of PDT such as PHP code coloring and auto completion in addition to Flash Builder 4 features.

Download the sample files for this article here 

Additional Requirements for this article

Flash Builder 4 Eclipse Plug-in

Eclipse PHP Bundle - (Learn more)

XDebug v2.0.4-5.2.8 (for Windows users) - (Learn more)

WAMP Server v2.0f (or any other PHP 5.2.8 enabled IIS/Apache server installation) (for Windows users) - (Learn more)

MAMP Server v1.9 (for Mac OS X users) - (Learn more)


Setting up Flash Builder with PDT

The set up process begins with installing the base copy of Eclipse.

  1. Unzip the Eclipse PHP distribution (PDT) at a convenient location (for example, C:\eclipse-php-galileo-SR1-win32).
  2. Next, start the Flash Builder 4 plug-in installer.
  3. When prompted to choose between bundled Eclipse and an existing copy of Eclipse, select Plug Into Another Copy of Eclipse (see Figure 1) and type the folder in which you installed the Eclipse PHP distribution (C:\eclipse-php-galileo-SR1-win32 , for example).
  4. Click Next and follow the rest of the on-screen instructions to complete the installation.

Figure 1. The Flash Builder 4 plug-in installer

That’s all there is to setting up PDT and Flash Builder to work together!

Enabling debug support on the PHP server

Enabling debug support on a PHP server involves adding a debugger library in the server’s path and then configuring it in the php.ini file. For the purpose of this tutorial you will be using XDebug. However, there are other options, such as Zend Debugger, which are equally simple to configure and use.

If you are using MAMP on Mac OS X, skip to step 5, since XDebug is bundled with MAMP.

If you are using WAMP on Windows, follow the steps below, which assume that the WAMP server is set up at D:\wamp.

  1. Download the XDebug DLL file and place it in a location accessible by the PHP installation. A good location is usually the ext directory of the PHP setup; for example: D:/wamp/bin/php/php5.2.8/ext.
  2. Next, locate the php.ini file being used by your PHP installation. In WAMP, the php.ini configured for use with the server is located in the bin folder of the installed apache folder, for example: D:/wamp/bin/apache/apache2.2.11/bin/php.ini.
  3. If you want to verify the location of the php.ini file being used by your PHP setup, you can run phpinfo() and note the value of the Loaded Configuration File (see Figure 2). For more information on calling phpinfo() see Setting up your PHP server environment using Linux, Apache, MySQL, and PHP.

Figure 2. Identifying the configuration file from phpinfo() output

4.    To configure PHP to use the installed debugger, add the following settings at the end of the php.ini file (edit the paths as necessary to match your setup):

; Changes to enable XDebug 

5.    If you are using Mac OS X, you don’t need to install XDebug separately, but you do need to edit the MAMP php.ini file. Open php.ini and you’ll notice that a commented entry for zend_extension is already available. Replace that entry with the following text:

zend_extension="/Applications/MAMP/bin/php5.3/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so" zend_debugger.allow_hosts= 

6.    Restart your server.

7.    To check if the configuration has been completed successfully, run phpinfo() again. The XDebug extension should show up in the output (see Figure 3).

Figure 3. XDebug configuration information in phpinfo() output

Configuring PDT

Now that you have the debugger configured, you’re ready to configure PDT to use this debugger.

1.    In Eclipse, choose Window > Preferences > PHP.

2.    To configure the PHP Executable click Add in the PHP Executables section of the Preferences dialog box; in the dialog box that appears, select XDebug as the PHP Debugger (see Figure 4) and click Finish.

Figure 4. Configuring the PHP Executable

3.    To configure the PHP server, click Add in the PHP Servers section of the Preferences dialog box, select XDebug as the PHP Debugger and click Finish.

Creating a common Flex/PHP Project

Finally, you’re ready to create a combined project, which will enable combined debugging of the Flex code as well as PHP code.

1. Create a new PHP Project, called PhpTest, in PDT

2. Add a new source folder and link it to a new folder in the www folder of wamp (see Figure 5). On Mac OS X, add the new folder in the htdocs folder of mamp.

Figure 5. Creating a new folder resource

3. Right-click the project and select Add/Change Project Type > Add Flex Project Type.

4. In the Server Technology section of the wizard page, select PHP.

5. Click next and configure the following values:

Web root: D:\wamp\www (or /Applications/MAMP/htdocs on Mac OS X)

Root URL: http://localhost:8080 (change the port, if necessary, based on your WAMP or MAMP server’s setup)

Output Folder: D:\wamp\www\PhpTest (or /Applications/MAMP/htdocs/PhpTest on Mac OS X)

6.    Click Validate Configuration and then click Finish once the configuration validates successfully.

7.    Right-click the PHP source folder named www (WAMP) or htdocs (Mac OS X) in the project and create a new PHP file named HelloWorld.php with the following content:

class HelloWorld { 
    public function sayHello() { 
            return "Hello"; 

8. Next, locate the Data/Services panel at the bottom of the window and click Connect To Data/Service.

9. Double-click the PHP icon

10. On the next page of the wizard, browse to the HelloWorld.php file and open it.

11. Click Finish.

Flash Builder has now set up the PHP file for use with the Flex project.

12. Copy the following code to PhpTest.mxml:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:helloworld="services.helloworld.*">  

                 import mx.controls.Alert; 
                 import mx.rpc.events.ResultEvent; 
                 protected function button_clickHandler(event:MouseEvent):void 
                          // TODO Auto-generated method stub 
                          sayHelloResult.token = service.sayHello(); 

                  protected function sayHelloResult_resultHandler(event:ResultEvent):void 
                        Alert.show(event.result as String); 


                   <helloworld:HelloWorld id="service"/>  
                  <s:CallResponder id="sayHelloResult" result="sayHelloResult_resultHandler(event)"/>     </fx:Declarations>  
 <s:Button id="button" label="Say Hello" click="button_clickHandler(event)"/> 

Place a breakpoint in PhpTest.mxml on line 18 in the sayHelloResult_resultHandler() function (see Figure 6).

Figure 6. Placing a breakpoint in PhpText.mxml

14.    Place another breakpoint in HelloWorld.php on line 4 (see Figure 7).

Figure 7. Placing a breakpoint in HelloWorld.php

Next, you need to create a new debug launch configuration for PHP.

15 .Open the Debug Configurations dialog box by choosing Debug > Debug Configurations

Figure 8. Creating a new debug launch configuration.

16.    Ensure that the Break At First Line option is deselected.

17.    For the URL, deselect Auto Generate and ensure the correct URL (for example, /PhpTest/HelloWorld.php) is specified.

18.    Click Debug to launch the PHP debugger.

19.    Right-click the MXML file and select Debug As > Web Application.

When you click the Say Hello button in the application, PDT will break on the line with the PHP breakpoint and display all the relevant variable values (see Figure 9).

Figure 9. Debugging the application

This setup can now be used to debug PHP and Flex applications in the same instance of Eclipse. Also note that PHP files created using the Services wizard in Flash Builder are opened in the PHP editor to provide complete code coloring and hinting.

Where to go from here

Now that you have a fully integrated development environment to develop and debug PHP and Flex applications, you can start writing new PHP classes that can be used with your Flex application.

Also, you can use the data-centric development features in Flash Builder 4 to import these services and then take advantage of code hinting for the PHP functions in the Flex code. This will also help you make the most of other advanced features for your Flex/PHP application such as paging and client-side data management.

You can learn more in the article Data-centric development with Flash Builder 4.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}