By: Dan Orlando
This article provides a complete demonstration of how to get up and running with Adobe Flash Builder 4 Beta (formerly Adobe Flex Builder) and PHP. Learn how to take advantage of the new data-centric features of Flash Builder to increase your workflow efficiency.
Setting Up the Right Environment
When developing Flash Builder applications that are complemented by PHP services, it's most effective to install either the PHP Development Tools (PDT) version of Eclipse or Zend Studio, then install the plug-in version of Flash Builder. Additionally, Zend Server is the ideal default server platform because of the ease of use you gain through its integration with Flash Builder. However, you can also use a Windows, Apache, MySQL, PHP (WAMP); Linux, Apache, MySQL, PHP (LAMP); Mac, Apache, MySQL, PHP (MAMP); or XAMPP environment setup, depending on your local desktop platform. Although this article uses MAMP, there are few differences between the various platform configurations.
If you follow the method recommended here, you will install the Flash Builder plug-in into its own folder. But you must also specify the instance of the Eclipse integrated development environment (IDE) that you want Flash Builder plugged into, as Figures 1 and 2 show.



Click here for larger image

Figure 1



Click here for larger image

Figure 2

When you first open Eclipse, from the Window menu, point to Open Perspective, and then click Other. Then, choose Flex Development. You should then see the Flash Builder start page, which includes links to various resources. If you have worked with Flex Builder before, you will also notice a couple of new tabs in Flash Builder: Data/Services and Network Monitor. You'll learn more about these new tabs and their respective functionalities shortly.
Setting Up the Project
To set up a new project, from the File menu, point to New, and then click Flash Builder Project. You can name your project whatever you like, but for the application server type, select PHP from the drop-down menu, then click Next. Your next step is to choose the root path and URL of your local Apache/PHP runtime. After entering these values, validate your configuration, and then click Finish. If Flash Builder sees that you do not already have the Zend Framework installed, it will ask you if you want it to be installed. This is a handy little feature that makes rapid data communications between Flash Builder and PHP a cinch through the Zend_Amf module, and I strongly suggest taking advantage of it. If your project is using Hypertext Transfer Protocol (HTTP) requests or SOAP, Flash Builder can easily accommodate these protocols, as well. Simply choose the respective protocol when the list of options appears.
The first thing you may notice when your main MXML application file is generated is that things have changed a bit architecturally specifically with regard to namespaces. You now have three namespaces instead of one: fx, mx, and s. The s stands for Spark, which is the new component and graphics library included in version 4 of the Flex framework. Many of the Flex 3 Halo components have been extended significantly for Spark. You may also notice that the Package Explorer has been enhanced. If you've ever done any Java development in the Eclipse IDE, you've probably seen the extensive level of code-hinting and class introspection that is available. Most of these features are now available for development in Flash Builder, as well.

Generating New Services

Whenever you want to connect to a PHP service, begin by clicking the Connect to Data/Service link in the Data/Services tab, as Figure 3 shows. The default location for this tab is at the bottom of the IDE.



Click here for larger image

Figure 3

In the first window that appears, you have the option of connecting to a PHP service, an HTTPService, or a Web Services Description Language (WSDL) service. These three types of services are made available, because you chose PHP for your server type when you set up your project. Click the PHP icon in this window, and then click Next. The Configure PHP Service dialog now appears, as shown in Figure 4.



Click here for larger image

Figure 4

For this example, Flash Builder generates the PHP stub for the service. Enter a name in the Service Name field, and select Generate sample PHP class as well as the Use default location check box. Then, click Finish.
After you finish configuring your service, you see a new folder called services in the Package Explorer at the root of your project. Additionally, a new services package should appear in the src directory. Finally, the PHP file that Flash Builder generated automatically opens, and the class outline appears in the Outline window in Eclipse. Flash Builder displays the Using Remote Services message, shown in Figure 5, which outlines your next steps.



Click here for larger image

Figure 5

Coding the Service

Make sure that the PHP service that was generated is currently selected in the main window. If you are working in the full version of Flash Builder without having installed a PHP editing plug-in, Flash Builder opens the generated service with a different application on your computer (most likely Adobe Dreamweaver, if it is installed on your local machine; otherwise, it defaults to the application that is associated with the PHP file format).
The PHP class that was generated for you is a stub for basic Create, Replace, Update, and Delete (CRUD) operations that are typically part of a remote service. Uncomment the code within the operations of the class. You can use this code as a template for your services, or remove the code entirely and create the code for the operations from scratch. However, if this is your first time testing the new data-centric features of Flash Builder, I strongly recommend sticking with the stub code for now. The service class used for this article was only slightly modified: Basically, I replaced item with user wherever it appeared. You will also need to change the database parameters accordingly as well as table names and fields where they appear so that they correspond with your actual database. The application built in this article pulls contact information from a table called User, so I had to modify the service stub accordingly.
When you are finished coding the service, you must configure the return types for each operation. However, before you do that, this is a good time to open the package that was added to the Package Explorer for your project earlier. The package is named services.UserService, where UserService is the name that you assigned to your service. In this package, you will find two classes. The one that holds the same name as your PHP service that is intended for customization. Notice that the class extends your service's super class. The name of the super class will have _Super_ attached to the beginning of the service name. Do not modify this class. You can override any of the methods in the super class as necessary.
Configuring Return Types
Your Flash application must know what to expect for the data type that will be sent and returned for each method. To configure your method return types, right-click one of the operations from the Data/Services tab, then click Configure Return Type.
This process can be a bit tricky if you aren't aware of a few things. First, it is best to configure the getAllUsers method first. Assuming that your service does not have any errors, you should get a response with an object that has more objects in the payload, provided that you inserted a few entries into your database for testing purposes. Next, enter a name, such as User, as shown in Figure 6.



Click here for larger image

Figure 6

This is the new process for creating value objects. You can still code value objects the way you did with Flex Builder, but it would be counterintuitive to use the same methodology with Flash Builder, considering the speedier workflow you gain by letting Flash Builder automate this process for you. Plus, the value objects that Flash Builder generates are more like value objects on steroids, in that they do a whole lot more than just wrap a bunch of values for strong data typing between the client and server. For example, the return type set for getAllItems is a User object, even though it is actually a collection of User objects. This is because the auto- generated result handlers are smart enough to know the difference between a single User object that is returned versus a collection of User objects. In other words, you don't have to type the result to an ArrayCollection and go through the whole typing, binding, and object-mapping process as you would have done with Flex Builder.
When configuring the getAllUsers and getUsers_paged methods, you'll have to shift the paradigm that you may have gotten used to with previous versions of Flex. In the past, you would have declared an ArrayCollection, typed the response data to it, and then bound your list or data grid to the variable. There were also things like class mapping, which made the process even more difficult. Luckily, that's all in the past.
So, the code that was generated when your value object was created is smart enough to figure out when it has a collection of User objects as opposed to a single User object. Therefore, as you can see in Figure 7, the return types for getAllUsers, getUser, and getUsers_paged are all of type User.



Click here for larger image

Figure 7

When you configure the updateUser operation, you could send the ID and user details as a single object or two separate objects' it really doesn't matter. The main thing to understand is that you are not sending a User object here. The PHP service does not care about the strongly typed User object you have on the client side, nor does it need to. Just send the data as an Object, as seen in Figure 8.



Click here for larger image

Figure 8

The reasoning for sending the new user data over as a generic Object is clear upon reviewing the Structured Query Language (SQL) statement that was auto- generated for the PHP service stub:
public function updateUser($userId, $user) {
  $this->connect();
  $sql = "UPDATE User SET last_name = '$user->last_name', first_name = '$user->first_name',
  email = '$user->email', phone = '$user->phone', company = '$user->company', job_title =
  '$user->job_title', person_type = '$user->person_type', lead_source = '$user->lead_source',
  tags = '$user->tags' WHERE id = $userId->id";
  mysqli_query($this->connection, $sql)
  or die('Query failed: ' . mysqli_error($this->connection));
    mysqli_close($this->connection);
}

As you can see, there is no reason for a User.php class that wraps all the associated variables and maps to a corresponding Adobe ActionScript class. The values are pulled directly from the $user variable that is sent over as a generic Object using the $user->value syntax.
Drag-and-Drop Data Binding
Make sure you have the Application MXML file open and the Design view selected. Next, drag a VDividedBox onto the stage. Then, drag a DataGrid into it from the Components window. Now select and drag the getAllUsers() method from the Data/Services tab and drop it on top of the DataGrid. Switch to the Source view, and take a look at the new code that was just generated for you.
Now, run the application. Hopefully, without having made any modifications, your browser window displays something similar to Figure 9. Of course, if you didn't bother to take the time to insert data into your database, now might be a good time to go back and do that; then, try running the application again.



Click here for larger image

Figure 9

Generating a Master Details Form
Next, auto-generate a Master/Details form. With the main MXML application file open, select the Design view again. Then, right-click on the data grid and click Generate Details Form. In the first window that appears, select the form options. Make sure you select Master control from the first drop-down list; the Make form editable check box should already be selected. (Clear this check box if you do not want the details of the selected item in the DataGrid to be editable.) Next, select the Make a new service call to get details check box. The service you created earlier should already be selected. In the Operation drop-down list, select the getUser(userId:String):User[] operation, as seen in Figure 10. When an item is selected in the data grid, the corresponding information will be displayed in the form that appears below it.



Click here for larger image

Figure 10

After clicking Next, you will see a window that looks like Figure 11. As you can see, the check box for the id property has been cleared so that no ID is displayed in the form. However, you also have the option of displaying the value of a field without making it editable by selecting Text instead of TextInput for the corresponding Control type. Now, click Finish.



Click here for larger image

Figure 11

When you switch to Code view now, you'll notice that your application file is starting to be somewhat lengthy. Figure 12 demonstrates what the application looks like when an item is selected from the DataGrid.



Click here for larger image

Figure 12

Using the Network Monitor
The Network Monitor is one of the most prolific features of Flash Builder. To give it a spin, from the Properties menu, click Project. Then, select Flash Builder Compiler in the left navigation pane of the project Properties dialog. Select the Enable Network Monitor check box, and then click Finish. Next, run the application debugger, and click the Network Monitor tab so that it becomes the selected tab in the bottom pane of the IDE. Now, move the browser window so that it is not covering the Network Monitor window, and select an item from the grid. A new service call should appear. Select the service call in the Network Monitor window to view more details. This is a very handy utility for troubleshooting issues with remote services.
Conclusion
The new data-centric features alone make Flash Builder one of the most prolific advancements for rich Internet application (RIA) development. Interestingly, we hardly scratched the surface of the features and functionalities built into Flash Builders' features such as support for themes, enhancements to Cascading Style Sheets (CSS), integrated unit testing with FlexUnit, an enhanced component kit, seamless integration with the up-and-coming Flash Catalyst program, as well as significant enhancements to the profiler and debugger. With so much left to be experienced, I encourage you to continue learning how to develop RIAs with Flash Builder. I have included a list of resources to help guide your research below.
Resources
About the Author
Dan Orlando is a recognized Flash Platform Architect and Consultant specializing in the enterprise space. As an advocate for RIA, Dan has been published in magazines and web sites such as PHP Architect, Flash and Flex Developer Magazine, IBM developerWorks, Amazon Web Services, and the Adobe Developer Connection.