Requirements

User level
Intermediate

 
Additional Requirements

 
Flex Builder 3 Eclipse Plug-in
 
Zend Studio for Eclipse
As rich Internet applications (RIAs) built with Adobe Flex become more widely adopted, there is a growing demand for applications that can combine the user interface (UI), media, and client-side benefits of Flex with the power and versatility of a server-side language like PHP. Tight integration between Flex and a server-side language means that your users will have an intuitive, engaging user experience with all the functionality they need. For developers, tight integration between PHP and the Flex development environments can provide big benefits by ensuring a smoother workflow for coding, debugging, and managing a project. You can make the most of such a unified environment by using Adobe Flex Builder and Zend Studio for Eclipse together.
 
Because Zend Studio for Eclipse and Flex Builder are both based on the Eclipse integrated development environment (IDE), the workflows and interface will be a familiar sight to those with experience in any of the three. Both Zend Studio and Flex Builder also include similar coding features such as—code folding, highlighting, and completion—and similar project and folder structures. Thanks to this common ancestry, you can spend less time getting acclimated and more time developing.
 
The examples that follow use a Windows XP computer running a default installation of WAMPServer. Do not use the following samples on a production server; they have not been tested in such an environment and are intended only for informational purposes.
 

 
Installing the software

If you don't have Flex Builder or Zend Studio for Eclipse installed, you can download trial versions for free. To download Zend Studio for Eclipse, simply visit the Zend site.
 
On the web page that appears, click the Try link associated with Zend Studio for Eclipse, as shown in Figure 1. On the next page, click Studio for Eclipse, and then select your operating system from the drop-down box (Figure 2). Click Download.
 
Figure 1. Choose Zend Studio for Eclipse
Figure 1. Choose Zend Studio for Eclipse
 
Figure 2. Choose Studio for Eclipse, and then select your operating system
Figure 2. Choose Studio for Eclipse, and then select your operating system

After you click Download, a Zend user form opens. If you already have a Zend account, enter your details and click Log In. The download should begin automatically. If you do not have a Zend account, create one and repeat these steps.
 
Once the download is complete, run the installer. This article assumes a default installation. To complete a default installation, accept the Zend Studio License and choose Next through the installer steps. Before the actual installation begins, you will be presented with a pre-install summary. Figure 3 illustrates the pre-install summary for a default, complete installation on Windows.
 
Figure 3. The pre-install summary for a default installation
Figure 3. The pre-install summary for a default installation

Click "Install" at the pre-install summary screen, and the installation begins. Once Zend Studio installation is complete, you'll need to download the Eclipse plug-in version of Flex Builder 3.0.1. Flex Builder Plug-in 3.0 will not install alongside Zend Studio, so be sure to obtain version 3.0.1.
 
 
 
If you have an Adobe username and password, log in as prompted. If you do not have an Adobe account, you'll need to create one and return to this page. On the page that appears after login, choose your language and platform, then click the "Download" button. The download begin should automatically.
 
Once the download is complete, double-click the Flex Builder Eclipse Plug-in installer to launch the installation wizard. Again, this article assumes a default installation. To implement the default installation, accept the Flex Builder License and choose Next through the installer steps. When you get to the step which asks you to specify your existing Eclipse installation, choose the folder where you installed Zend Studio. In a default Windows installation, the path is C:\Program Files\Zend\Zend Studio for Eclipse – 6.1.0. Before the actual installation begins, you will be presented with a pre-installation summary. Figure 4 illustrates the pre-installation summary for a default installation on Windows.
 
Figure 4. The Flex Builder Plug-in Pre-Installation Summary
Figure 4. The Flex Builder Plug-in Pre-Installation Summary

Click "Install" to continue the installation, and after a few moments you will be presented with an error window titled "Product Extension not established automatically." This error is depicted in Figure 5.
 
Figure 5. The Flex Builder Plug-in Installation Raises an Error
Figure 5. The Flex Builder Plug-in Installation Raises an Error

You will resolve this error by configuring this extension manually in a few moments. For now, click "OK" and the installation will complete. Click "Done" to close the installer, then open Zend Studio.
 
Once inside Zend Studio, select "Help" from the main toolbar and choose "Software Updates → Manage Configuration..." as shown in Figure 6.
 
Figure 6. Choose "Manage Configuration..." to set up the Flex Builder Plug-in
Figure 6. Choose "Manage Configuration..." to set up the Flex Builder Plug-in

In the dialog box that appears, choose "Add an extension location" in the right pane, as depicted in Figure 7.
 
Figure 7. Choose "Add an Extension Location"
Figure 7. Choose "Add an Extension Location"

Zend Studio for Eclipse will then prompt you for the location of the extension to be added. Choose the folder where you installed the Flex Builder 3.0.1 Eclipse Plugin. In a default Windows install, this is C:\Program Files\Adobe\Flex Builder 3 Plug-in\eclipse or /Applications/Adobe Flex Builder 3 Plug-in/eclipse on OS X. Figure 8 depicts this selection.
 
Figure 8. Choose the folder where you installed Flex Builder Plug-in 3.0.1
Figure 8. Choose the folder where you installed Flex Builder Plug-in 3.0.1

Once you have selected your Flex Builder Plug-in 3.0.1 installation folder, click "OK." Zend Studio will then ask you to restart. Choose "Yes" and wait for the application to quit and launch again. You will now be able to access all the Flex Builder features within Zend Studio.
 

 
Hello World!

To experience the ease and speed of developing with these integrated tools, take a run through the inevitable "Hello world!" example. Begin by setting up a new PHP project with the Zend/Eclipse version of the IDE by selecting File > New > PHP Project, as shown in Figure 9.
 
Figure 9. Creating a new PHP project
Figure 9. Creating a new PHP project

In the PHP Project dialog box, type helloWorld in the project name box, and then clear the Use Default option. In the Directory field, type a path beneath the web root of your web server—in this case, [web root]/helloWorld, as shown in Figure 10.
 
Figure 10. Specifying a project directory
Figure 10. Specifying a project directory

Click Finish. Your PHP project is created and displayed in the upper left pane of the IDE.Now, you need to create a PHP file within your project. To do so, right-click the project folder icon in the upper-left pane, then select New > PHP File, as shown in Figure 11.
 
Figure 11. Adding a new PHP file to the project
Figure 11. Adding a new PHP file to the project

In the new PHP file dialog box, type the name of or browse to the source folder. In the file name box, type helloWorld.php, and then click Finish, as shown in Figure 12.
 
Figure 12. The New PHP File dialog box
Figure 12. The New PHP File dialog box

An empty PHP file opens in the main pane of the IDE. Beneath the <?php tag, type:
 
$msg = "Hello world! It's me, PHP!";echo $msg;
Your file should now look similar to the one depicted in Figure 13.
 
Figure 13. The timeless "Hello world!" application
Figure 13. The timeless "Hello world!" application

Save the file, and your PHP code for this example is complete.
 

 
The Flex side of Hello World!

Now that you have the PHP to output the "Hello world!" text, you need to create a client to request, accept, and display it. Create a new project in the Flex Builder IDE by selecting File > New > Flex Project. In the dialog box, type helloWorld as the project name, and specify a project directory called helloWorld under your web root—just as you did when creating the PHP portion of the example. Select Web application option as the application type, and then select an application server type of PHP. The appropriate settings for a Windows machine running a default WAMP installation appear in Figure 14. If your setup differs, enter the correct file path for your web server.
 
Figure 14. Creating a new Flex project
Figure 14. Creating a new Flex project

Click Next. Now you need to enter some information about your web server. Figure 15 shows the appropriate settings for a default WAMPServer installation on Windows.
 
Figure 15. PHP Server settings
Figure 15. PHP Server settings

Once you complete the first two fields, click Validate Configuration to test the settings. In the Output Folder field, type bin-debug, and then click Next.
 
In the New Flex Project dialog box, check that your output folder URL is under your web root and that it corresponds to the Output Folder value you entered in the previous step—as shown in Figure 16.
 
Figure 16. Entering the project's build path, source folder, and output folder UR
Figure 16. Entering the project's build path, source folder, and output folder UR

Click Finish. Your new project is generated and shows up on the list in the upper left pane of the IDE. The main pane of the window displays a new helloWorld.mxml file. If you are within the Design View, click the Source button in the upper left of the main pane. Inside the <mx:Application> tag, change layout="absolute" to layout="vertical".
 
Next, add an <mx:HTTPService> to the MXML code by placing the following code just below the <mx:Application> tag, on the third line:
 
<mx:HTTPService id="phpService" url="http://localhost/helloWorld/helloWorld.php" resultFormat="object" result="showResult()"/>
The code above creates an HTTPService and defines some of its properties. The service has an ID of phpService, a URL pointing to your helloWorld.php file, and a result format of a generic object. The service is also set to call the showResult() function when it gets a result.
 
To actually use the service, its send method needs to be called. Add an <mx:Button> control beneath your <mx:HTTPService> with this code:
 
<mx:Button label="Call PHP" click="phpService.send()"/>
The new button, Call PHP, calls the HTTPService's send method when clicked.
 
Now, you need to create the showResult() function in an <mx:Script> block. Place the following code below your <mx:HTTPService> tag.
 
<mx:Script> <![CDATA[ import mx.controls.Alert; private function showResult():void { Alert.show(phpService.lastResult as String,'Message from PHP'); } ]]> </mx:Script>
The above ActionScript code first declares an Import statement, which allows your application to use the Alert class from the mx.controls package. Secondly, it creates the showResult() function. This function displays an alert pop-up with the title "Message from PHP." The text within the alert box is the result from the HTTPService call to the helloWorld.php file. In this case, the result should be the string "Hello world! It's me, PHP!" Save the file, and click the green Run arrow to test the application. Figure 17 shows the alert that appears when the Call PHP button is clicked.
 
Figure 17. The alert showing the result of the call to PHP
Figure 17. The alert showing the result of the call to PHP

Now that you've established communication between Flex and PHP, it's time to take it to the next level.
 

 
XML and sending variables

One great feature of Flex is its ability to parse XML in a simple way, enabling Flex developers to easily take advantage of external XML files or web services. Coincidentally, PHP makes it incredibly simple to create XML data from many sources. The next example highlights this feature by sending data from Flex to PHP as POST variables, and then having PHP return that data in XML format. The Flex application displays the resulting XML data in a datagrid.
 
To begin, create a new PHP file under your helloWorld project by right-clicking the project folder icon and choosing New > PHP File. Name the file xml.php. Next, add the following code between the initial PHP tags:
 
$title = $_POST['title']; $instructor = $_POST['instructor']; $description = $_POST['description']; $xml_output = "<?xml version=\"1.0\"?>\n"; $xml_output .= "<courses>"; $xml_output .= '<course>'; $xml_output .= "<title>". $title . "</title>"; $xml_output .= "<instructor>". $instructor . "</instructor>"; $xml_output .= "<description>". $description . "</description>"; $xml_output .= "</course>"; $xml_output .= "</courses>"; echo $xml_output;
This script accepts three variables via POST: a course title, an instructor name, and a course description. The script then places those variables inside XML element tags, and sends the result to the client. Figure 18 depicts a sample version of the resulting XML.
 
Figure 18. A simple XML file
Figure 18. A simple XML file

Next, you need to modify your Flex application's helloWorld.mxml file to create a few more controls. The form below creates an MXML form to accept a course title, an instructor name, and a description from the user. Add the following code just above your <mx:Button> control:
 
<mx:Form> <mx:FormItem label="Course Title:"> <mx:TextInput id="titleInput"/> </mx:FormItem> <mx:FormItem label="Instructor:"> <mx:TextInput id="instructorInput"/> </mx:FormItem> <mx:FormItem label="Description:"> <mx:TextArea id="descriptionInput"/> </mx:FormItem> </mx:Form>
Now, you need a datagrid to display the result returned by PHP. The following code creates a datagrid with appropriate headers and dataField property entries, which correspond to the elements beneath <course> in the XML code that returns from PHP. Insert the following code near the bottom of the helloWorld.mxml file, just above the closing </mx:Application> tag:
 
<mx:DataGrid id="myDG"> <mx:columns> <mx:DataGridColumn headerText="Title" dataField="title"/> <mx:DataGridColumn headerText="Instructor" dataField="instructor"/> <mx:DataGridColumn headerText="Description" dataField="description"/> </mx:columns> </mx:DataGrid>
You now have the necessary user controls, but you need to modify the application to use them. For instance, the <mx:HTTPService> you used earlier doesn't send any variables, and returns a generic object. It also points to helloWorld.php instead of your new xml.php. To correct your <mx:HTTPService>, replace it with this code:
 
<mx:HTTPService id="phpService" url="http://localhost/helloWorld/xml.php" resultFormat="e4x" method="POST" result="showResult()"> <mx:request xmlns=""> <title>{titleInput.text}</title> <instructor>{instructorInput.text}</instructor> <description>{descriptionInput.text}</description> </mx:request> </mx:HTTPService>
The code above specifies a resultFormat of ECMAScript for XML (E4X). Using E4X makes parsing the XML very simple. In this code, you have also specified a method of POST, because that is what your PHP script expects to receive. Finally, there is a new <mx:request> element, with three sub-elements for your POST variables. These values are bound to the input fields on the MXML form, and are submitted via POST to the PHP script.
 
However, the result function is still set to showResult(), so you need to modify this function now. Replace the function with the following code:
 
private function showResult():void { var myXML:XML = new XML(phpService.lastResult); myDG.dataProvider = myXML..course; }
The function now creates a new XML object, myXML, using the lastResult of the call to PHP. Then, the datagrid's dataProvider property is set to myXML..course. The double-dots are E4X syntax. Instead of navigating down to the element to display using single dot notation, the double-dot notation simply parses the XML object and returns all the elements named "course."
 
Save and run the application. Type in relevant information—similar to what is shown in Figure 19—and then click Call PHP.
 
Figure 19. The finished sample application
Figure 19. The finished sample application

 
Where to go from here

With Flex Builder and Zend Studio for Eclipse working together, your Flex/PHP development projects can be more organized, and you can spend less time on development housekeeping. With only a couple of clicks, you can edit your PHP backend, switch to the Flex frontend, then build and run the application. If you use Subversion to manage your projects, you can easily checkout, edit, and commit both PHP and Flex project files from within a single IDE.
 
For more information on Flex and PHP, visit the Learn Flex and PHP page on Flex Developer Center.