Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Data paging with Flex and PHP using Flash Builder 4

DZone's Guide to

Data paging with Flex and PHP using Flash Builder 4

· Web Dev Zone
Free Resource

Prove impact and reduce risk when rolling out new features. Optimizely Full Stack helps you experiment in any application.

Flash Builder 4 has a built-in data paging feature that generates ActionScript code to retrieve data from the database incrementally on demand. For example, suppose your database has thousands of records and you want to fetch only 20 rows at a time and display them in a data grid. When you enable paging for an operation and bind the operation result to a DataGrid control, the first 20 records will be retrieved initially and the next page of records is fetched only when the user requests them—that is, when he or she scrolls the vertical scroll bar of the DataGrid control.

Flash Builder 4 lets you enable paging for any type of data service operation including operations on a Remoting service, web service, or HTTP service. This article explains how to enable data paging for a PHP-based Remoting service. After you set up the server environment required for the sample application, you’ll use Flash Builder 4 to generate ActionScript service classes and build a Flex application that incrementally retrieves data sets from a database table using the PHP class on the server.

Requirements

In order to make the most of this article, you need the following software and files:

Flash Builder 4


Apache, MySQL, PHP


Sample files:

 

Prerequisite knowledge

Knowledge of Adobe Flex and PHP will be helpful, as will knowledge of setting up a MySQL database from a SQL file.

 

Setting up the server environment

The first step is to create a database table with sample data. The sample application for this article uses the customer table in the demo database. After downloading the sample files for this article, use the customer.sql file in the <SampleZipFile>/database folder to create the database and the tables.

Next, you need to create a PHP class to fetch records from the database. To enable data paging your data service (PHP class) must implement two required functions. The first function returns the total number of records in the database table; it doesn’t take any arguments. The second function takes a start index (startIndex) along with the number of rows to retrieve (numItems) as arguments and returns database records as a collection of objects, for example an Array or ArrayList. You can give the functions any valid name you want.

The sample PHP application for this article implements the CustomerService class. This class has two functions, getItems_paged and count, which will be used for fetching records from the database incrementally and returning the total number of database records, respectively.

class CustomerService 
{
public function count()
{
//returns number of records in the table as int
}
public function getItems_paged($startIndex, $numItems)
{
//startIndex – Initial index of the records
//numItems – Number of records to retrieve
//returns records in the table as array of objects
}
}

 

To create a web application that uses the class file, follow these steps:

  1. If you don’t already have a web server with PHP and MySQL set up, I recommend that you install MAMP on Mac OS X or WAMP on Windows. MAMP lets you install Apache, PHP, and MySQL for Mac OS X with just a few clicks. See http://www.mamp.info for download information and more details. Windows users can download and install WAMP. See http://www.wampserver.com for download information and more details.
  2. Navigate to the document root folder of your web server; for example, /Applications/MAMP/htdocs.
  3. Create a folder named pagingsample under the document root folder to create the new web application; for example, /Applications/MAMP/htdocs/pagingsample.
  4. Copy the PHP class file CustomerService.php in the <SampleZipFile>/php_src folder to the pagingsample folder you just created.
  5. Edit the file in a text editor, and change the username, password, server, and port variables as necessary to match your MySQL setup. The default MySQL port is 3306.

 

Creating the new Flex project

Now that the server is set up, you are ready to use Flash Builder 4 to generate code for fetching records from the database incrementally on demand. Start by creating a new project; later you’ll generate a service for the PHP class using the Flash Builder 4 Data/Services panel and enable paging for the getItems_paged operation.

Follow these steps to create the new Flex project:

  1. Choose File > New > Flex Project.

    Figure 1. Setting project properties

  2. For the Project Name, type PagingSample.
  3. Select Web (Runs In Adobe Flash Player) as the Application Type.
  4. Select PHP as the Application Server Type (See Figure 1).
  5. Click Next to continue.

    Figure 2. Configuring server settings

    Because you set the server type to PHP, Flash Builder 4 will prompt you for server settings.

  6. To configure the PHP server, set the Web Root to the path of the document root folder of your web server; for example /Applications/MAMP/htdocs.
  7. Set the Root URL to the URL of the root of the web server; for example, http://localhost:8888.
  8. Set the Output Folder to the path of the pagingsample web application created earlier; for example /Applications/MAMP/htdocs/pagingsample (see Figure 2).
  9. Click Validate Configuration to check if the server configuration is valid. If it is not valid, verify your settings and try again.
  10. When your server configuration is valid, click Finish to create the project.

Creating a new service

The data-centric development features in Flash Builder 4 enable you to generate a proxy ActionScript class (service) for a PHP class so that you can invoke functions in the PHP class on the server by invoking the functions in the generated proxy ActionScript class.

Follow these steps to create a new service in Flash Builder 4:

  1. Locate the Data/Services view in Flash Builder 4; if the view is not open, select Window > Data/Services.
  2. Click Connect to Data/Service in the Data/Services view (or choose Data > Connect to Data/Service).

    Flash Builder 4 displays list of service types that can be consumed from the current Flex project.

    Figure 3. Selecting the service type

  3. In this sample, you are using a PHP service, so select PHP (see Figure 3).
  4. Click Next.

    Figure 4. Selecting the PHP class

  5. For the PHP class, click Browse and select the CustomerService.php file deployed in the pagingsample web application (see Figure 4).
  6. Click Next.

    Flash Builder 4 uses the Zend AMF Framework to introspect the PHP classes on the server. If you don’t already have Zend AMF installed, Flash Builder 4 will install it. If you are prompted, click Yes to install Zend AMF. Once the installation completes and Flash Builder 4 introspects the service, it will display the list of functions available in the selected PHP class (see Figure 5).

    The Zend AMF Framework installed on the server is also used by the Flex application to invoke functions in the PHP class on the server during runtime.

    Figure 5. List of public functions in the selected PHP class file

  7. Click Finish to create the service.

Flash Builder 4 exposes the selected PHP class as a Remoting service using Zend AMF on the server so that the functions in the PHP class can be invoked from the Flex application. Flash Builder 4 also generates an ActionScript class that acts as proxy for the PHP class selected. In this case, Flash Builder 4 generated a class named CustomerService in CustomerService.as, which has functions for each public method exposed in CustomerService.php. To invoke a function of CustomerService.php on the server, you simply invoke the corresponding function in the CustomerService instance. You can see the service (CustomerService.as) and its operations (representing functions in the service class) listed in the Data/Services view; you can also view the code using the Package Explorer.

Configuring the return type for the operations

In the Data/Services view, notice that the return type for the service operations is Object. This is because the PHP class doesn’t have the return types for the functions defined. To enable data paging, you need to configure the return types for the operations.

A return type of an operation is the data type of the object that will be the result of the operation call. If the class on the server has the return type of the function defined, Flash Builder 4 will automatically configure the return type of the operations. Alternatively Flash Builder 4 also lets you configure return type for an operation based on the actual response from the server.

Follow these steps to configure return type for the operations:

  1. In the Data/Services View, right-click the getItems_paged operation and select Configure Return Type (See Figure 6).

    Figure 6. Configuring the return type

    Flash Builder 4 will display a dialog box in which you can select the return type for an operation from a list of existing data types or send a request to the server and let Flash Builder 4 automatically detect the return the return type based on the response from the server.

  2. Select Auto-detect Return Type From Sample Data and then click Next.

    The getItems_paged operation requires parameters, and Flash Builder 4 lets you configure the parameter types and the values to be passed.

    Figure 7. Supplying parameters for the operation

  3. For the startIndex parameter, select int as the type and for the value type 1.
  4. For the numItems parameter, select int as type and for the value type 5 (see Figure 7).
  5. Click Next to send request to the server.

    Figure 8. Configuring detected data type

    Flash Builder 4 will analyze the response from the server and determine that the operation returns an Array of custom data type, which has several properties as shown in Figure 8. You can see that the data types for the properties are also detected and configured automatically.

  6. For the custom data type name, type Customer (see Figure 8).
  7. Click Finish.
  8. Use a similar procedure to configure the return type for the count operation. Right-click the count operation and select Configure Return Type.

    Figure 9. Configuring an existing data type

  9. The return type for the count operation is int. Since int is an existing data type, simply select Use An Existing Data Type and then select int (see Figure 9).
  10. Click Finish.

Now that the return types for the operations are configured you can enable paging.

Enabling paging

Follow the steps below to enable paging for getItems_paged operation:

  1. In the Data/Services view, right-click the getItems_paged operation in the Data/Services view and select Enable Paging.

    Figure 10. Selecting a unique identifier for data type

  2. You need to identify the properties that uniquely identify an instance of this data type. Select customerId from the list and click Next to continue (see Figure 10).

    Figure 11. Configuring the page size and count operation

  3. For the Page Size, type 10.

    The page size indicates the number of records to be fetched at a time and this can be any valid number of your choice. You’ll want to select a number that strikes a balance between getting too many records and too few. If you set this number too low, your application will be requesting more records from the server frequently. Conversely, if you set it too high, you may not see much of a benefit from paging, because your application is still fetching many records at once.

  4. For the Count Operation, select count() from the operations list (see Figure 11).
  5. Click Finish.

Note: After paging is enabled, invocation of getItems_paged operation will not require arguments to be passed because the values for the arguments will be automatically generated.

 

Binding a service call result to a UI control

You have created the service operation created and configured it for data paging. When the paging-enabled operation is bound to a List based control such as a DataGrid, the records will be fetched in pages and only when the records have to be displayed–for example, when the user scrolls the vertical scrollbar of a DataGrid control. Flash Builder 4 can also generate code to invoke a service call and bind the service call result to a UI control. In this section you will bind the result of the getItems_paged operation to a DataGrid control.

  1. nt Operation, select count() from the operations list (see Figure 11).

    . Add a DataGrid control to the application in Design view.
  2. Right-click the DataGrid and select Bind To Data.

    Figure 12. Selecting the service and operation

  3. In the Bind To Data dialog box that appears, select New Service Call.
  4. Select CustomerService from the services list and select getItems_paged():Customer[] from the list of operations.
  5. Select Customer[] as the Data Provider (see Figure 12).
  6. Click OK.

Because you selected New Service Call, Flash Builder 4 will create a new instance of the CustomerService class and a CallResponder class in the current MXML file. If an instance of CustomerService already exists only the CallResponder instance will be created. The CallResponder class helps you manage the results for asynchronous calls made to RPC-based services. You can find more details on CallResponder in the Flex Language Reference.

Note: If you already have a service call in the current MXML file and you want to bind its result to the UI control, then select Existing Call Result in the Bind To Data dialog box and choose the existing service call.

Save your application and run it. After the Flex application launches in a web browser, the getItems_paged() function in the CustomerService PHP class on the server is invoked and the Customer objects returned from the server are displayed in the data grid. Initially only 10 records will be retrieved; the next page of records are fetched only when you request additional data by scrolling down in the data grid. You can verify this by enabling the Network Monitor in Flash Builder 4 and rerunning the application. See Tracing network traffic with the Network Monitor in Flash Builder 4 for an introduction on using this feature.

 

Where to go from here

Now that you have used Flash Builder 4 to enable data paging for a PHP based Remoting service operation and developed a Flex application that fetches pages of records on demand to display in a data grid, you may want to look for opportunities to use this approach in your own applications. Similarly you can implement Remoting/HTTP/SOAP based data service operations with the required operations and enable data paging for those as well.

You can also use Flash Builder 4 to build Flex applications for HTTP services, web services, and the data management services in LiveCycle Data Services ES2. Learn more in the article Data-centric development with Flash Builder 4.

 

With SDKs for all major client and server side platforms, you can experiment on any platform with Optimizely Full Stack.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}