Building a data-centric application with Flash Builder for PHP – Part 1: Setting up and connecting

Additional required other products

• Apache with PHP installed
• MySQL (This tutorial uses MAMP.)

Flash Builder for PHP builds upon the features introduced in Flash Builder 4 to make it easy to connect to PHP servers and bring data into your Flex applications. Created in cooperation with Zend, Flash Builder for PHP brings the best of Flash Builder and Zend Studio together to streamline the process of connecting, debugging, and optimizing your Flex and PHP applications.

This is Part 1 of a two-part tutorial. In this part of the tutorial I’ll walk you through getting set up and bringing in data from a PHP server using Zend AMF. Flash Builder for PHP was optimized to work with Zend Server and you’ll get the best integration if you’re using the tool in conjunction with it. However this tutorial will walk you through the steps to set up a Flex and PHP application for any generic PHP server.

In Part 2, I’ll show you some of the advanced data features of Flash Builder for PHP, such as data management and paging, so you can add advanced functionality to your Flex application.

Before diving into the tutorial, it will help to have a basic understanding of Flash Remoting.

When you’re using XML or a similar format to send data to your client applications, much of the data you’re transferring is not absolutely necessary. Think of all of the extra characters that are in an XML document. Think of how many times you have to send the attributes and nodes, as well as the beginning tags and the end tags. XML is a great format but there is a great deal of overhead when you’re just trying to get data to your client.

Action Message Format

Action Message Format (AMF) works over HTTP, but instead of sending lots of extra information like XML, AMF essentially strips out the extra characters and reduces the data to a bare minimum. AMF serializes the data into a binary format that uses much less bandwidth and space than XML does for the same data. This is particularly important when you're sending large sets of data. Instead of sending multiple redundant tags in XML, you're sending the smaller, serialized AMF records. Another benefit of AMF is that it's a native data type for Flash Player. As a result, Flash Player doesn't have to parse the results to pull out the information; the data is available to Flash Player as native ActionScript objects as soon as it is received from the server.

Flash Remoting uses AMF to expose objects and web services on an application server as if they were local ActionScript objects. The only catch is that to use Flash Remoting with PHP you have to be working with PHP objects and classes. The AMF gateway helps translate those PHP objects into ActionScript objects in Flash Player. As a result you can create your own typed objects in PHP and work with those exact custom-typed objects in ActionScript.

Flash Remoting and the Zend Framework

Adobe partnered with Zend to provide support for Flash Remoting with AMF in the Zend Framework. There are other projects out there, including AMFPHP for other PHP frameworks, but Zend AMF has the most up-to-date support for Flash Remoting. The Zend Framework is a robust PHP framework that can be used for some very complex projects.

For some PHP developers who just want to connect PHP with Flex it may seem like a lot to chew off. But you don't have to use the entire Zend Framework or change the structure of your project to use Zend AMF. Zend AMF relies on a small but powerful subset of the Zend Framework that can be easily integrated into any PHP project.

The easiest way to get started using Flash Builder for PHP is with Zend Server, a complete, enterprise-ready Web Application Server for running and managing PHP applications. Flash Builder for PHP will recognize your Zend Server installation and configure itself accordingly. However, you can also use any server you want. I use a version of MAMP, which includes everything you need to connect Flex and PHP and I’ll use that in this tutorial.

To get started, download the sample file for this article and unzip it. You can use the included php_demos.sql file to create the database and table used in this tutorial. If you’re using MySQL, follow these steps:

1. From the command line type mysql -u root -p and type your password when prompted.

   To build the database, at the mysql prompt, type SOURCE php_demos.sql; and press Enter.

2. Type quit and press Enter.

Before creating the application, you’ll want to set up the server you’re going to use in Flash Builder.

1. Choose Window > Preferences and then expand PHP > PHP Servers.
2. Click New.
3. Type a name for the server (this can be whatever you want).
4. Type the server’s Base URL.
5. Specify the server’s Local Web Root.
6. Click Finish.
7. Click OK to close the Preferences dialog box.

The next step is to create linked Flex and PHP projects, which is exceptionally easy in Flash Builder for PHP.

1. Choose File > New > Flex and PHP Project.

   The PHP project is configured first.

2. Type MyFirstPHPProject as the name.
3. Select Create Project On A Local Server.
4. Leave the Zend Framework Version as its default value.
5. Specify the server you created above.
6. Click Validate Configuration.
7. Once your configuration has been validated, click Next (see Figure 1).

• Next, the Flex project is configured.

8. Type MyFirstFlexApplication as the name.
9. Select the Use Default Location option.
10. Leave the default Output Folder setting. This is automatically set based on the settings you created in the PHP Project.
11. Use the default Flex SDK.
12. Click Finish (see Figure 2).

Flash Builder for PHP will create both the PHP and Flex projects in your workspace. The two PHP files you are going to use in this tutorial are ForestServiceTyped.php and NationalForest.php. Both of these rely on a database named national_forests, which you created in Setting up.

1. Copy ForestServiceTyped.php and NationalForest.php to the services directory of your PHP project.
2. Open ForestServiceTyped.php and update the MySQL server location, port, and authentication settings for your setup.
3. Take a quick look at ForestServiceTyped.php and NationalForest.php.

You probably noticed that both PHP files have been commented using PHPDoc syntax. The new version of Flash Builder for PHP uses that documentation to help it introspect the classes. In the next step, the Service wizard will use PHPDoc comments to help it determine the types for specific functions and classes so it can map those to their corresponding ActionScript classes.

1. Select MyFirstFlexApplication.mxml in the Package Explorer.
2. Open the Data/Services view.
3. Click Connect To Data/Service.
4. Verify the PHP By Zend service is selected, and click Next.
5. For the PHP File Location, browse to and select the ForestServiceTyped.php file in your PHP project (see Figure 3).

6. Click Next.

   You’ll see that, using the PHPDoc syntax, Flash Builder for PHP has already detected some of the types for the functions (see Figure 4).

7. Click Finish.

For the getAllForests() and getForestsPaged() operations, you’ll want to define the return type.

1. Right-click getAllForests() in the Data/Services view.
2. Select Configure Return Type.
3. Select Use An Existing Data Type.
4. Select NationalForest[].
5. Click Finish.
6. Repeat steps 1 through 5 for the getForestsPaged() method.

Now that your service operations are defined, you can bind them to the user interface elements of the Flex application.

1. Open MyFirstFlexApplication.mxml and switch to Design view.
2. From the Components view in the lower left-hand, drag a DataGrid control to the Design area.
3. Drag the getAllForests method from the Data/Services view and drop it on the DataGrid control.
4. Click OK when Flash Builder for PHP notifies you the component is already bound.
5. In the Bind To Data dialog box, click OK to generate the service call and bind the result to the DataGrid control (see Figure 5).

6. Save your changes, build the project, and run the application.

   You should see your data grid loaded with the results from the database.

   The next step is to make the data editable.

7. Back in Flash Builder for PHP right-click updateForest() in the Data/Services view and select Generate Form.
8. Deselect Form For Return Type.
9. Click Finish (see Figure 6).

• Flash Builder for PHP will generate a form, which will likely overlap your data grid.

10. Move the form over by using the Arrow keys until it no longer obscures the data grid (see Figure 7).

• Next you want the item selected in the data grid to correspond to the form. The form is bound to a NationalForest object in the code, so by setting the NationalForest object to the selected item on the data grid, the form will automatically show the selected data.

11. Right-click the DataGrid control and select Generate Selection Change Handler.
12. Flash Builder for PHP will switch from Design view to Code view and highlight the data grid code.
13. Use the Tab key to tab through the selection handler properties until you get to the line right below // TODO Auto-generated method sub.
14. Edit the code so that it looks like this:

15. Save your changes, build the project, and run the application.

Now when you select an item it will show in the form. You can update the properties in the database by changing them in the form and clicking the update button.

In this tutorial, you learned how to connect a Flex application to a PHP service using Flash Remoting. In Part 2, you’ll build on these steps using the advanced data features in Flash Builder for PHP to make your applications more responsive and more intuitive.