Requirements

   
Prerequisites
Knowledge of PHP server set up and Eclipse will be helpful.
 
 
Sample files
User level
Intermediate

   

 
Additional Requirements

 
Flash Builder 4.5
 
Eclipse PHP Bundle
 
XDebug v2.0.4-5.2.8 (for Windows users)
 
WAMP Server v2.0f (or any other PHP 5.2.8 enabled IIS/Apache server installation) (for Windows users)
 
MAMP Server v1.9 (for Mac OS X users)

 
Introduction

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.
 

 
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. You can find the installer in <Flash Builder 4.5 Installation Folder>/utilities. Execute "Adobe Flash Builder 4.5 Plug-in Utility.exe" to install Flash Builder 4.5 as plug-in to Eclipse PHP distribution.
 
3.    When prompted select the folder in which you installed Eclipse PHP distribution (C:\eclipse-php-galileo-SR1-win32 , for example) as shown in Figure 1.
 
4.    Click Next and follow the rest of the on-screen instructions to complete the installation.
 
fig1
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 extensions 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.
 
fig02
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 ; zend_extension_ts="D:/wamp/bin/php/php5.2.8/ext/php_xdebug-2.0.4-5.2.8.dll" zend_debugger.allow_hosts=127.0.0.1 zend_debugger.expose_remotely=always xdebug.remote_port=9000 xdebug.remote_handler=dbgp xdebug.profiler_enable=1 xdebug.profiler_output_dir="D:/wamp/tmp/xdebug" xdebug.remote_enable=On xdebug.remote_autostart=On xdebug.remote_host=127.0.0.1 xdebug.remote_mode=req xdebug.remote_log="D:/wamp/tmp/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:
 
[xdebug] zend_extension="/Applications/MAMP/bin/php5.3/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so" zend_debugger.allow_hosts=127.0.0.1 zend_debugger.expose_remotely=always xdebug.remote_port=9000 xdebug.remote_handler=dbgp xdebug.profiler_enable=1 xdebug.profiler_output_dir="/tmp/xdebug" xdebug.remote_enable=On xdebug.remote_autostart=On xdebug.remote_host=127.0.0.1 xdebug.remote_mode=req xdebug.remote_log=/tmp/xdebug
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).
 
fig03
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.
 
fig3
Figure 4. Configuring the PHP Executable

 
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 (c:\wamp\www\PhpTest for example. See Figure 5). On Mac OS X, add the new folder in the htdocs folder of mamp.
 
fig8
Figure 5. Creating a new folder resource
3. Right click on the project and select Add/Change Project Type > Add Flex Project Type. You will see a wizard where you can configure Flex project settings. Leave default values and click Next to continue.
 
4. In the Server Technology section of the wizard page, select PHP.
 
5. Enter 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:
 
<?php 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. (You will find this in Flash perspective)
 
9. Double-click the PHP icon
 
10. On the next page of the wizard, browse to the HelloWorld.php file and select it.
 
11. Click Finish. Flash Builder might prompt to install Zend AMF on your server, if it was not already installed. If prompted, click OK to let Flash Builder install Zend AMF on your server. Zend AMF will be used to introspect PHP classes by Flash Builder. Same Zend AMF can also be used by Flex applications to invoke functions in PHP classes.
 
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:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:helloworld="services.helloworld.*"> <fx:Script> <![CDATA[ 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); } ]]> </fx:Script> <fx:Declarations> <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)"/> </s:Application>
Place a breakpoint in PhpTest.mxml on line 18 in the sayHelloResult_resultHandler() function (see Figure 6).
 
fig06
Figure 6. Placing a breakpoint in PhpText.mxml
 
14.    Place another breakpoint in HelloWorld.php on line 4 (see Figure 7).
 
fig07
Figure 7. Placing a breakpoint in HelloWorld.php
14.    Place another breakpoint in HelloWorld.php on line 4 (see Figure 7).
 
Next, you need to create a new debug launch configuration for PHP.
 
15 .Open the Debug Configurations dialog box by choosing Debug > Debug Configurations
 
fig08
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).
 
fig09
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.
 
License type: Attribution Non-commercial Share Alike (by-nc-sa) +Adobe Commercial Rights