Data-centric Adobe Flash Builder development with the Zend Framework

The recent release of Adobe Flash Builder 4 Beta (formerly Adobe Flex Builder) includes an impressive lineup of features aimed at enterprise PHP development—in large part because of a strategic partnership between Adobe and Zend Technologies. Zend Technologies is well known for focusing on enterprise development with PHP, and the company is a strong advocate of open source software. The company’s flagship open source product is the Zend Framework, which has become the most widely used framework for development with PHP in the enterprise.

The first part of the strategic alliance between Adobe and Zend was adding support for Adobe Action Message Format (AMF) for high-speed data communication between the client and server. This was done by developing and deploying the Zend_Amf module as part of the Zend Framework.

The second facet of this alliance is tight integration between the Zend Framework and Flash Builder. In this article, you learn how to take advantage of the new data-centric features of Flash Builder and the seamless integration with the Zend Framework.

Setting up for Flex and Zend development in Flash Builder

Two main setup configurations are possible for Flex and PHP development. Unless you are already working with Zend Studio, you can either install Flash Builder first, then the PHP Development Tools (PDT) Eclipse extension (also from Zend Technologies), or you can install the PDT version of Eclipse, then the Flash Builder plug-in. If you are already working with Zend Studio, you can simply integrate the Flash Builder plug-in into it and use Zend Server for the server side. The most significant advantage to you is being able to do all of your development within a single integrated development environment (IDE).

If your goal is to use more than just the Zend_Amf module for data communications, you have the option of installing the Flash Builder plug-in to Zend Studio. However, you don’t need Zend Studio to do Zend development. The Zend Framework is open source and can be integrated into any PHP environment running on Apache.

Connecting to the server

The Flash Builder Project Setup Wizard isn’t terribly different from Flex Builder 3. The important thing is to make sure that you select PHP as your application server type. When you click Next, you should see the window shown in Figure 1. Of course, you will need to fill in the respective fields based on your local configuration and validate your configuration before you can continue.

alt="Example PHP server configuration" src="/images/articles/4705/image01.png" />

Figure 1. Example PHP server configuration

When you click Finish, if Flash Builder recognizes that the Zend Framework is not installed on your local machine, it asks you if you would like it to install the framework for you. If you see this message, let Flash Builder perform the installation. You will never see this message again unless you remove the framework from the install path.

Now, the application MXML file is displayed in the main window, as you might expect. However, a couple of new tabs have been added to the bottom panel of the IDE. You may also notice some other features at this point, such as class introspection within the Project Explorer and advanced code hinting that is reminiscent of the Eclipse IDE for Java development.

Working in the Data/Services view

Click the Data/Services tab, and then click the Connect to Data/Service link. The first window that appears provides three options: HTTPService, PHP, and WebService. Click the PHP icon, and then click Next.

As Figure 2 shows, you let Flash Builder generate a PHP stub for your service code, so make sure you select Generate sample PHP class. Additionally, select the Use default location check box, enter a name for the service in the Service Name field, and then click Finish.

Chances are you noticed quite a few things happen after you clicked Finish. These changes are an example of the new data-centric automation features of Flash Builder. First, a package was added to your src folder, a services folder appeared under the libs folder, a PHP file was generated and opened in the main window, the class was introspected by Flash Builder, and all of class’s methods were displayed in the Data/Services tab.

Figure 2. Settings for a new service that Flash Builder will generate

Code the service

As you can see in Figure 2, the service has been named Contact. When the stub class is generated, uncomment the code that has been placed within the service methods for your convenience. The great part about the way services are generated is that they are capable of handling both standard data types as well as strongly typed objects. The strongly typed object that will be used for the Contact service will be automatically generated for you in the next step.

The important thing to understand is that the old paradigm used with previous versions of the Flex software development kit (SDK)—where value objects were created on the server side to correspond with value objects on the client side—has changed significantly. More specifically, you do not need to create a strongly typed PHP object that corresponds with your Adobe ActionScript objects. That said, for basic Create, Replace, Update, and Delete (CRUD) services, very little coding is needed in the auto-generated PHP service beyond what is already there. Simply configure your database connection parameters and table names according to the specific MySQL database you want it to communicate with.

Configuring return types

You will save yourself a considerable amount of time by making note of two very important points when it comes to configuring return types. The first point is more a matter of convenience than necessity: Configure the return types in the following order:

1. getAllItems
2. createItem
3. updateItem
4. count
5. getItem
6. getItems_paged
7. deleteItem

Getting into the habit of configuring the return types in this order saves time by speeding up your workflow.

Note: Before you configure the return types, make sure that you have created the table in your database along with all the necessary fields. Also, make sure you have entered a few records into the database.

Start by right-clicking the getAllItems method in the Data/Services tab, and then click Configure Return Type. Click Invoke Operation. The window should now look similar to Figure 3.

Figure 3. Operation return type configuration

The second important point has to do with the previously mentioned paradigm shift for value objects—namely, you do not have to code your own value objects anymore. You can simply auto-generate the necessary code when you invoke the getAllItems method. In the past, when an array of strongly typed objects came back in the response from the server, it was standard practice to type the data as a bindable ArrayCollection declared at the top of the class, then bind the list or data grid to that ArrayCollection variable. You can still do things this way if you really want to, but I strongly suggest letting Flash Builder handle this for you, because it makes the workflow so much faster.

As seen in Figure 4, the response is an object with a bunch of objects in it. However, the return type is still ContactVO, even though it is essentially an array of contact objects. When you click Finish, a good deal of code is generated and placed in the services.contact package. When the getAllItems call is made, the method that handles the result behind the scenes will see that it got a collection of objects of type ContactVO and will automatically create the collection and wrap all the objects in the collection for you.

Figure 4. The response from the server is still typed as a ContactVO, even though it is a collection of ContactVO objects.

Binding in Design view

Make sure you are in Design view with your main application MXML file selected in the main window. First, drag a VDividedBox to the stage. Set its X and Y values to 0, then set the height and width properties to 100%. Next, drag a DataGrid component from the components list to the stage so that it is inside the VDividedBox. Set its X and Y values to 0, as well. Then, set its width to 100% and its height to 30%. Now, select the getAllItems method in the Data/Services tab, and drag it onto the DataGrid. You should see the column headers auto-populate with the field names, and the number of columns should change based on the number of fields, respectively. Assuming that you have data in your database, you should be able to run the application at this point, and the DataGrid will display the data from your database when the application is initialized, as seen in Figure 5.

Figure 5. The DataGrid now displays all the items from the database.

You might be wondering how that was possible with such ease. First, the getAllItems method is called when the client application is first instantiated, which was the result of dragging and dropping the method onto the grid. When you did this, Flash Builder was smart enough to know that you were telling it that the service method being dragged over needs to be called when the creationComplete event of the component is fired. As mentioned earlier, when the server responds to the call, it sends back an object full of objects, which the abstracted result handler knows is actually a collection of your value objects.

If the application didn't work as expected when you ran it, you may want to skip ahead to the section on using the new debugger and Network Monitor, then come back when you have things working. I must note that based on my experience so far, nine times out of 10, if it doesn't work as expected, it is because of an error in the PHP service code; so, that might be a good place to start.

Another good way to pinpoint errors is to go back and invoke the methods through the return type configuration for each operation again. The error responses that come back are surprisingly detailed and will usually tell you exactly what and where the error is. I managed to find and fix a couple of forgotten semi-colons in less than a minute simply by re-invoking the operations. Network Monitor will also come in handy during your experimentation endeavors, which will be discussed shortly.

How to generate a master details form

Drag-and-drop data binding is pretty cool, but generating a master details form without having to write a single line of code is even cooler.

Start by right-clicking your DataGrid component in Design view, then click Generate Details Form . In the window that appears, select Master control from the Generate Form for drop-down list, then select the Make form editable check box if you want the form to be editable. (Clear this check box if you want the details of the selected item to be displayed as text fields but not as editable text inputs.) Next, select the Make a new service call to get details check box. The proper service should already be selected, assuming that you only have one right now. For the Operation, select the getItem method, as seen in Figure 6, then click Next.

Figure 6. Master detail form configuration window

In the Generate Form window, you can select the fields that you want displayed and clear those you do not. For example, you may want to clear the id field, because it is the unique identifier that is auto-incremented in the database, and you may not want it displayed or changed. Now, click Finish and switch to Code view. In the DataGrid declaration, you may need to modify the change event code, replacing: contact.getItem(itemID)with contact.getItem(myGrid.selectedItem.id), where myGrid is the id property assigned to the DataGrid component. The full DataGrid declaration code should read as follows:

<mx:DataGrid x="0" y="0" width="100%" height="30%" id="grid" editable="false"
 creationComplete="getAllItemsResult.token = contact.getAllItems()" dataProvider = 
"{getAllItemsResult.lastResult}" change="getItemResult.token =
 contact.getItem(grid.selectedItem.id)">

Network Monitor

Before testing the application, take a moment to enable Network Monitor. Click Project on the main toolbar (or right-click the project in the Project Explorer window), and then click Properties > Flash Builder Compiler. Next, select the Enable Network Monitor check box, and click Finish.

Now, try running the application with the debugger. With the application running, click the Network Monitor tab so that the respective window displays in the IDE. Select an item from the DataGrid. You should see two entries in Network Monitor now. Additionally, the application should look similar to Figure 7, with the selected item's details auto-populated in the master details form.

Figure 7. The master detail form is auto-populated
with data when an item is selected from the DataGrid.

As Figure 8 shows, selecting one of the entries in Network Monitor displays additional information about the service call—very useful for debugging remote services. Additionally, you can save the output to an Extensible Markup Language (XML) file by clicking the Save icon in the window's toolbar.

Figure 8. Selecting a service call displays additional
information about the call.

Conclusion

Flash Builder doesn't just expand on Flex Builder 3: It takes development for the Flash Platform to a whole new level. Furthermore, it is both interesting and pleasantly surprising to point out that this article barely scratches the surface of the new features and functionality. This article only touched on the new data-centric features of Flash Builder for PHP development. However, when combined with other enhancements, such as theme support, an overhauled Cascading Style Sheets (CSS) engine, an enhanced component framework called Spark, and a fully integrated FlexUnit engine for unit testing, it is clear that Flash Builder marks a giant leap forward for rich application development.

Additional Resources

• Adobe Flash Builder 4 beta download page on Adobe Labs
• More information on the Zend Platform
• Whatís new in Flash Builder 4 beta by Time Buntel
• Differences between Flex 3 SDK and Flex 4 SDK beta by Joan Lafferty
• What's new in Flex 4 SDK beta by Matthew Chotin
• Building a data-centric application using Flash Catalyst beta and Flash Builder 4 beta by Andrew Shorten
• Tutorial and Demonstration Videos on Adobe Labs
• Lee Brimelow's Flash Builder 4 beta and Flash Catalyst beta video tutorial
• Adobe Flash Builder 4 beta and Flex SDK user forum
• Adobe Flash Builder 4 beta and Flex SDK documentation on Adobe LiveDocs

About the Author

Dan Orlando is a recognized Flash Platform Architect and Consultant in the enterprise. 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.