Prerequisite knowledge

Some experience with Flash Builder and PHP is required. You should also complete the steps in Part 1 of this series before starting Part 2.

User level


Additional required other products

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

Part 1 of this series covered the basics of working with data using the data-centric development features of Flash Builder and introduced Flash Remoting and Zend AMF to exchange data with a PHP back end.

In Part 2, I provide an overview of some of the advanced data features in Flash Builder for PHP for implicit paging and data management, which you can use to improve the performance of your applications and make them more intuitive.

Implicit paging

Think about an application that will be dealing with thousands of database records. How should that data appear to the user? Does the user need to be able to see every row all at once? Could a DataGrid component fit thousands of rows? Does it make sense to send thousands of rows at a time to your application from the server? Implicit paging can help your application handle these issues.

With implicit paging, a Flex application requests only the rows from the server that the user is going to see. As the user scrolls down a data grid, for example, the Flex framework automatically figures out which records are visible and requests those from the server. To the user, it appears that all of the data is already in the application. Your application, though, is only requesting exactly what the user sees.

Looking through the forests

Take a look at the methods from the PHP ForestService class you used in Part 1. You'll see that some of the methods correspond to basic CRUD (create, read, update, delete) operations. You'll also notice a couple of extra methods, including getForestsPaged() and count(). The getForestsPaged() method takes two parameters that help request the correct records: startIndex and numItems. This method allows you to specify a starting point and a specific number of records to bring back. When you bind this method to a Flex DataGrid control, it will automatically be called with the correct parameters based on how the user scrolls through the data.

Enabling implicit Paging

Starting where you left off in Part 1, follow these steps to set up implicit paging:

  1. Choose Window > Data/Services to display the Data/Services view.
  2. Right-click the getForestsPaged() method and select Enable Paging.
  3. Select id as the Identity Property.
  4. Click Next.
  5. Select count() as the Count operation; this function provides the total number of records.
  6. Set the page size to 5 and click Finish (see Figure 1).

Connecting to a data grid

You can now bind the getForestsPaged() operation to a user interface element.

  1. Switch to Design view.
  2. Drag a DataGri control from the Components view to the Design area.
  3. Drag the getForestsPaged() operation from the Data/Services view to your DataGrid control.
  4. In the Bind To Data dialog box, click OK to generate a new service call.
  5. Choose File > Save to save your project changes.
  6. Choose Run > Run MyFirstFlexApplication to run the application.

When you run your application and scroll through the data, your server will send only the rows that you're currently viewing.

Note: If you want to verify this you can use the Network Monitor to see the traffic going back and forth between your Flex application and the server.

Your application will be much more responsive because it is not dealing with (potentially) thousands of rows. Another bonus is that this works with any of the data-centric development service types, including HTTPService.

Introducing data management

There are many situations in which a user may want to manipulate the data before actually sending it to the server. For example, the user may be offline or they may simply want to test some ideas out with different data sets. This is where data management can help. Flash Builder for PHP makes it easy to add client-side data management to a Flex application. You can let your users make changes to data within the Flex application and then submit those changes in a batch or roll back changes to the data from the server.

This can also be an advantage in terms of reducing network traffic. When the user has to make a request to the server and receive a response each time they want to change the data that can add up to heavy network traffic. Data management makes it possible to make multiple changes in one batch.

It can also take a lot of code to manage multiple objects. Not only do you have to write the code for the CRUD methods for each object, you also have to write the code that handles the operations. This can be tedious, especially when you consider the code needed to deal with the results and faults with each operation. The data management features in Flash Builder for PHP simplify much of this. Instead of thinking about handlers, the UI components bind to the objects themselves and the operations map to specific tasks for those objects.

Follow these steps to enable data management for your application:

  1. In the Data/Services view, right-click the getForestsPaged() operation and select Enable Data Management.
  2. In the Data Management dialog box, select id as the identity property and click Next.
  3. You’ll now to need to map the operations of the service to the typical CRUD operations. It should be fairly obvious which operations map to each item in the list (see Figure 2).
  4. Click Finish.

One handy feature of the Flex DataGrid control is the ability to edit data directly in the grid. Combining this feature and data management, you enable the user to edit data directly in the data grid and then send all the record changes at once. You can also allow them to revert any changes. One of the benefits of data management is that users can make a series of changes on the client and then decide whether or not to actually save them to the server.

  1. In Design view, select the DataGrid control. Then, in the Property Inspector, set its Editable property to true (see Figure 3).
  1. Drag two buttons from the Component view to the Design area and place them under the data grid.
  2. Using the Property Inspector, label one button Save and the other one Discard.
  3. Right-click the Save button and select Generate Click Handler.
  4. Tab through the selection until you get to the //TODO marker
  5. Add this code in the event handler:
protected function button1_clickHandler(event:MouseEvent):void { forestServiceTyped.commit(); }
  1. Right-click the Discard button and select Generate Click Handler.
  2. Tab through the selection until you get to the //TODO marker.
  3. Add the revert code to the event handler:
protected function button2_clickHandler(event:MouseEvent):void { forestServiceTyped.revertChanges(); }

Now run the application. You can make changes to the data grid but nothing will be sent to the sever until you click Save. If you click the Discard button at any time, notice that all of the changes you made to the data grid will be undone and the items will revert back to their original values.

Where to go from here

Now you have an application that provides more responsiveness with implicit paging as well as a more robust way to handle data with data management. These are two of the most powerful data-centric development features of Flash Builder for PHP. I encourage you to explore some of the code that Flash Builder for PHP generated and examine some of the methods that were created as part of enabling data management. That will give you a head start on customizing this sample application for your own purposes.