Adobe

Products

Acrobat

Creative Cloud

Creative Suite

Digital Marketing Suite

Digital Publishing Suite

Elements

Photoshop

Touch Apps

Student and Teacher Editions

More products

Solutions

Digital marketing

Digital media

Education

Financial services

Government

Web Experience Management

Streamlining Flex and PHP development with Flash Builder for PHP

by Mihai Corlan

corlan.org

Content

Installing Flash Builder for PHP
Creating a new project
Creating a Flex client that consumes a PHP service
Debugging Flex and PHP code

Created

3 May 2011

Requirements

Prerequisite knowledge

To make the most of this article, it is best if you are familiar with Flash Builder, ActionScript 3.0, and PHP.

User level

Beginning

Required products

Flash Builder 4.5 for PHP Premium (Download trial)

Sample files

AuthorsService.zip

Developers who work with Flex and PHP can boost their productivity by using a new tool developed by Adobe and Zend: Flash Builder for PHP. This IDE lets you create a combined project with Flex and PHP natures and reap the benefit of coding in both languages. (In Eclipse, natures link a project with specific builders and other settings.) The setup also enables you to debug your Flex and PHP code at the same time. This might not seem to be an important point, but trust me when I say it is huge. I’ve been working with and writing about Flex and PHP, Flash Builder, and Zend Studio integration since 2008 and before now it was quite complicated.

In this article, I will show you how to install Flash Builder for PHP, create Flex and PHP projects, create a Flex client that uses a PHP service, and debug the Flex and PHP code.

Besides, you can also watch the accompanying video by me to learn how to streamline the development process with Flex applications that integrate tightly with PHP.

Additional required other products (third-party/labs/open source)

Zend Server

Download

Installing Flash Builder for PHP

Flash Builder for PHP is the result of work done by Adobe and Zend to integrate their Eclipse-based IDEs together. There is a single installer that will install Flash Builder 4.5 with Zend Studio 8.0 as a plug-in along with some new plug-ins that enable the new integration. This product is available for Windows and Mac OS. Without a license, you can still use it for 60 days (there is a 60-day trial period).

You can install this product along with Flash Builder 4.0/4.0.1 or Zend Studio 8. But, if you already have Flash Builder 4.5 installed, then you should uninstall it before running the installer for Flash Builder for PHP.

Follow these steps after downloading the installer:

Start the installer and click Next in the first step (see Figure 1).

Figure 1. Starting the Flash Builder for PHP installer.

In the second step, License Agreement, agree with both the Flash Builder and Zend Studio agreements and click Next.
The third step lets you choose the location of the installation folder (see Figure 2). By default, it will be installed in C:/Program Files/Adobe/Adobe Flash Builder 4.5/ on Windows and /Applications/Adobe Flash Builder 4.5 on Mac OS.
Once you choose a destination folder, click Next.

Figure 2. Choosing the installation folder.

In step four, review the settings and then click Install. It is a good idea to close all your browser windows at this point.
Shortly, you will see be presented with a confirmation of the installation and you can start using the program.
Run Flash Builder for PHP.

The first time you run it, you’ll have the option to key in your licenses for Flash Builder / Zend Studio or to go with the trial (see Figure 3).

Figure 3. The first run of Flash Builder for PHP.

Next you can enter you existing Adobe ID credentials, create and Adobe ID if you don't have one, or skip the step all together (see Figure 4). (It is useful to have an Adobe ID if you want to interact on the Adobe forums, for example.)

Figure 4. Creating or entering your Adobe ID information.

When Flash Builder for PHP opens, you’ll see the welcome screen (see Figure 5).

Figure 5. The Flash Builder for PHP default workspace.

As a final setup step, I recommend adding two perspectives: Debug and PHP.

Click the top-right icon with the "+" mark (see Figure 6) and add both perspectives.
Right-click the same icon and deselect the Show Text option if you want to hide the text of the perspective icons.

Figure 6. Adding Debug and PHP perspectives.

Creating a new project

If you choose File > New in Flash Builder for PHP (see Figure 7) you will see two new options:

Flex and PHP project
Flex Mobile and PHP project

These two new options represent the second point of integration between these two IDEs (the first point is the combined installer for both IDEs). When you use either one of these options, you will get two projects—a Flex project and a PHP project–that are aware of each other.

Figure 7. The new options for creating new projects.

The Flex project has its output folder configured inside the PHP project. Thus when you are ready to move to production you have all the code (SFWs and PHP files) in a single place, which is located on your server. The output folder will be in a public folder on your server. The PHP project source will be in a private folder on your server.

The PHP project is preconfigured to use Zend AMF–part of the Zend Framework–for connecting the Flex client with the PHP back end.

Before you start creating your new project, I recommend installing Zend Server. Even if you don’t plan to use it in production, it is a good idea to have it installed on your development machine because it will streamline the project setup. It is OK to have another PHP enabled web server, but you will have to install Zend Debugger and enable it for your alternate PHP web server if you want to debug the PHP code. In this article, however, I will use Zend Server.

Follow these steps to create new Flex and PHP projects:

Choose File > New > Flex And PHP Project.
Type a name for the project, for example PHP-project.
Specify the location of your Zend Server installation (see Figure 8). If you have it installed on your machine, Flash Builder for PHP will automatically detect it and fill in the path and Root URL for you.
Click Validate Configuration to verify that the server is started and the paths are correctly set.
Click Next.

Figure 8. Configuring PHP project details.

Next, you set the details for the Flex project.

Type a name for the Flex project, for example Flex-project.
Leave the other settings at their default values (unless you have some reason to change them).
By default the Flex project will be created inside your Flash Builder workspace folder.
Click Finish (see Figure 9).

Figure 9. Configuring Flex project details.

Flash Builder for PHP will create one Flex project and one PHP project (see Figure 10). The PHP project is placed in the htdocs folder of Zend Server. Inside this project you will find the Flex output folder (public/bin-debug/>/kbd>). The SWF file is wrapped in an HTML page and a PHP page; you can use either one.

Figure 10. The two projects in the workspace.

The main Flex application file should be opened in the editor. You are now ready to create the Flex and PHP code.

Note: Flash Builder for PHP supports a number of workflows in addition to creating new projects. For example, you can attach a PHP project to an existing Flex project. You can also detach a PHP project from a Flex project. To explore these features, check out the Flex project's properties, Flex/PHP Support.

Creating a Flex client that consumes a PHP service

In this section you’ll create a Flex client that consumes data from a PHP service. First, however, you need to set up the PHP code.

This example uses Flex remoting to connect the Flex client to the PHP code. Flex remoting basically lets you call a remote PHP class from the Flex code, as if it were a local class. You can execute any of the public methods of the PHP class and listen for the response. If you are new to remoting, I encourage you to read my introductory article on this topic, Flex and PHP: remoting with Zend AMF

Creating the PHP service

To keep things simple, you can use a basic PHP class that has the data hard coded. With this approach you can copy and paste this class in your code and you are ready to go. Of course, in a real application, you will usually have PHP classes that connect to databases. The steps and principles for consuming the service remain the same when using MySQL and PHP.

Here is the code for AuthorsService.php class:

        <?php
class AuthorsService {
    
    public function getData() {
        //in a real world application you would use a database 
        //and return the result set for example
        $ret = array();
        $ret[] = array('id'=>1, 'firstname' => 'Dantes', 'lastname' => 'Aligherie');
        $ret[] = array('id'=>2, 'firstname' => 'Niccolo', 'lastname' => 'Machiavelli');
        $ret[] = array('id'=>3, 'firstname' => 'William', 'lastname' => 'Shakespeare');
        $ret[] = array('id'=>4, 'firstname' => 'Kevin', 'lastname' => 'Hoyt');
        $ret[] = array('id'=>5, 'firstname' => 'Paul', 'lastname' => 'Trani');
        $ret[] = array('id'=>6, 'firstname' => 'Renaun', 'lastname' => 'Erickson');
        $ret[] = array('id'=>7, 'firstname' => 'Ryan', 'lastname' => 'Stewart');
        $ret[] = array('id'=>8, 'firstname' => 'Mark', 'lastname' => 'Doherty');
        $ret[] = array('id'=>9, 'firstname' => 'Mihai', 'lastname' => 'Corlan');
        $ret[] = array('id'=>10, 'firstname' => 'Terry', 'lastname' => 'Ryan');
        return $ret;
    }

    //update the entry 
    public function updateData($author) {
        return $author;
    }
    
    //add a new entry
    public function addData($author) {
        return $author;
    }
    
    //delete the entry
    public function deleteData($author) {
        return $author;
    }
    
}
?>

    

This PHP service basically implements the Read operation. Of course in a real application you would implement the other CRUD operations (Create/Update/Delete) as well.

Follow these steps to set up the PHP service:

Create a new file called AuthorsService.php inside the PHP-project/src/ folder (see Figure 11).
Open the file and copy the above code into it.
Save the file.

Figure 11. The AuthorsService.php file.

Setting up the service in Flash Builder

Now, that you have a mock-up PHP service in place, you are ready to create the Flex code.

Go back to the Main.mxml file in the editor and click the Connect to Data/Service link in the Data/Services view (see Figure 12). (If you don’t see this view, Choose Window > Show View and select Data/Services).

Note: Alternatively, you can start the Service wizard by right-clicking the PHP service file and selecting Create PHP Service For Flex.

Figure 12. The Data/Services view.

Flash Builder for PHP can introspect a PHP service for you and generate a Flex wrapper around it so you can use it in the Flex code.

When the Service wizard starts, select PHP By Zend (see Figure 13) and click Next. The wizard also supports remoting with PHP/ColdFusion/Java, Web Services, and REST Style Services.

Figure 13. The Flash Builder Service wizard

To configure the Zend Studio PHP service, click Browse (see Figure 14) and select the AuthorsService.php file from the src folder PHP-project project (this is the service you want to consume) and click OK.

Figure 14. Selecting the AuthorsService.php file.

The service name and package will be automatically filled in (see Figure 15); you can change them if you want.

Click Finish.

Figure 15. Service details (name and package) are set automatically.

Flash Builder for PHP creates the service wrapper class in the Flex project and displays its methods in the Data/Services view (see Figure 16).

Figure 16. The AuthorsService ActionScript service wrapper.

Configuring the return type

The getData() method of the AuthorsService PHP class returns an array of associative arrays. But currently the ActionScript wrapper returns an array of anonymous Objects. The next step is to define a custom type for the data returned. Why should you bother with this step? It is matter of best practices when using remoting. When you define custom types for your services, Flash Builder can help you with code completion and compile time error checking. For example, in a real application, the deleteData() method would expect one argument of type VOAuthor. If you pass some other object, the compiler will indicate the error.

Note: If your PHP service uses typed data (that is, if you have PHP entities defined and the service methods, instead of returning anonymous objects, return strongly typed data), then you don't have to configure the return type using the steps that follow. Instead, you will define the return type when you import the PHP service.

In the Data/Services view, right-click the getData() method and select Configure Return Type.
When asked how to configure the return type, select Auto-detect The Return Type From Sample Data and click Next (see Figure 17)

Figure 17. Selecting auto-detect.

On the next screen you provide the name for this custom type (for example, type VOAuthor) and check the property types. In this case, the PHP class returns an array of associative arrays, each one having three keys (id, lastname, and firstname), which Flash Builder for PHP automatically detects (see Figure 18).

Click Finish.

Figure 18. Configuring the return type.

In a real application you’d want to use the same type for the delete, update, and insert operations as well (see Figure 19). For these operations you would define the input and return type by selecting the existing data type, VOAuthor.

Figure 19. The AuthorsService Flex wrapper configured to use custom type VOAuthor for data.

Using the service

Next, I’ll show you how to consume the getData() method of this wrapper to populate a data grid with the data returned by the method.

Switch to Design view for the Main.mxml file.
Drag a Data Grid component from Components view (in the bottom left) to the design area (see Figure 20).

Figure 20. Adding a data grid to the Flex application.

Drag the getData() method from the Data/Services view and drop it on the data grid.
When asked if you want to replace the binding with one to a new service operation, click OK.
In the Bind To Data dialog box, verify the service name and operation you want to use as the source for data (see Figure 21) and click OK.

Figure 21. Confirming the operation and service names.

Save the file (choose File > Save).

To run it, switch back to Source view, right-click the file in the editor, and select Run As > Web (PHP) Application (see Figure 22).

Figure 22. Running the Flex application.

This will launch the Flex application using the configuration you set up when creating the project (the root URL and port number). The Flex application displays the data from the PHP service in the data grid component (see Figure 23).

Figure 23. Running the Flex application in a browser.

To get a better understanding of how the Flex service wrapper is used and how the operation is bound to the data grid, take a minute to explore the code that was generated by dragging getData() to the data grid.

Debugging Flex and PHP code

Before Flash Builder for PHP, debugging the Flex and PHP code together was a fairly complicated task. Now, it couldn’t be much easier.

Why is it important to have a good debugging workflow? Because with any rich client (Flex or Ajax), a bug in your application can be due to the server-side code, the client-side code, or the network. When you can debug the code end-to-end—from making the call from the client side to executing the server-side code and back again to receiving the results at the client side—then you can more efficiently pinpoint the root cause of the issue.

Follow these steps to debug your Flex PHP project:

Set breakpoints in the Flex and PHP files where you want the debugger to stop. For example, set a break point in the Main.mxml file in the dataGrid_creationCompleteHandler() function (around line 14) and one in the AuthorsService.php file in the getData() method (line 7). (To set a breakpoint, right-click the line number in the left margin of the editor and select Toggle Breakpoint.)
Right-click the Main.mxml file and choose Debug As > Web (PHP) Application to automatically set up a debugging configuration for these projects and launch the project in debug mode.
The project is loaded and the Flex code is executed to the point at which the dataGrid_creationCompleteHandler() method is called. When you hit the break point you for the first time you will be asked to confirm the perspective switch.
Select Remember My Decision and click Yes (see Figure 24).
The Debug perspective will be displayed (instead of the Flex perspective you’ve been using so far). This perspective displays both Flex and PHP debugger information.

Figure 24. Confirming the switch to the Debug perspective.

In the Flex debugger you can introspect variables and the application state, check the stack trace, and continue line by line–whatever you are used to doing with the Flex debugger (see Figure 25).

Figure 25. The Flex debugger in action.

Choose Run > Resume to continue.

The Flex application will makes the call to the gateway.php file in the PHP-project project, which executes the getData() method from the AuthorsService.php. When your second breakpoint (the one on the PHP side) is reached. the PHP debugger will be invoked.

If you are presented with dialog boxes asking for the location of various Zend Framework source files (see Figure 26), select the bottom option and click OK.

Figure 26. Defining the source path for the Zend Framework files.

As with the client-side code, you can introspect variables and proceed line by line (see Figure 27).

When you are done with the PHP debugger, press F8 or click the Resume button to resume normal execution.

Figure 27. The PHP debugger in action.

Where to go from here

This article provided a short introduction on how to use Flash Builder for PHP to streamline Flex and PHP development. To learn more about Flex and PHP development I encourage you to have a look at my blog and the Adobe Developer Connection page for PHP.Where to go from here This article provided a short introduction on how to use Flash Builder for PHP to streamline Flex and PHP development. To learn more about Flex and PHP development I encourage you to have a look at my blog and the Adobe Developer Connection page for PHP.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Streamlining Flex and PHP development with Flash Builder for PHP

by Mihai Corlan

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files

Additional required other products (third-party/labs/open source)

Installing Flash Builder for PHP

Creating a new project

Creating a Flex client that consumes a PHP service

Debugging Flex and PHP code

Where to go from here

More Like This

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company