Requirements |
||
Prerequisites
|
Sample files
|
User level
|
Additional Requirements
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.
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.
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 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.
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).
Figure 3. XDebug configuration information in phpinfo() output
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
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.
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).
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
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
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.
License type: Attribution Non-commercial Share Alike (by-nc-sa) +Adobe Commercial Rights