Built in Data Paging using Flash Builder 4

Updated for Flash Builder release version🙂

Flash Builder 4 lets you enable data paging with just few clicks for any server technology. It can be enabled for any service type (Including HTTP Service). Continue reading this article to know how.

For data paging to work you just need to implement 2 functions on the server and leave it to the generated Flex code by Flash Builder to invoke these functions when data has to be fetched.

Functions to implement:

  1. Returns number of rows in the database “count()”
  2. Takes two input arguments and returns the data collection. The two input arguments are startIndex and numberOfItems “getItems_paged($startIndex, $numItems)”

Data paging can be enabled for any type of service with any server technology. In this sample we will be using CustomerService.php which has the 2 required functions implemented and retrieves data from customers table. You can enable paging for any service similarly.

Install Flash Builder 4

Download and install Flash Builder 4 from this URL http://www.adobe.com/products/flashbuilder/

Create a new Flex project

Create new Flex project from File -> New -> Flex Project

Enter project details as shown in the image above and explained below

In this screen:

  1. Set the project name to “PagingSample”
  2. Set the Application type to “web (run in Adobe Flash Player)”
  3. Use default Flex SDK (Flex 4.0)
  4. Set the Application server type to “PHP”
  5. Click next to continue

In this screen:

  1. Set the Web root to the root folder of your PHP server. Its c:\apacheserver\htdocs in this sample
  2. Set the root URL to the root URL of your PHP server. Its http://localhost:9292 in this sample
  3. Set the output folder to root folder of your web application where you your PHP file is deployed
  4. Click the “Validate Configuration” to validate the server details entered
  5. Click on finish to continue

Using DCD to consume data returned by the PHP file

DCD or Data-Centric Development is one of the advancements to the Flash Builder 4. Let’s see how this is making developers productive. We will use DCD to generate Flex applications to consume the data from the PHP file.

Creating a service

  1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
  2. Click on “Connect to Data/Service” (Highlighted in the image) in the Data/Services window
  3. Window as shown in the image below will be launched

Selecting service type

Since we want to communicate with the PHP class we created, select PHP and click on next to continue.

Selecting PHP file for the service

In this screen:

  1. Browse and select the CustomerService.php file or the PHP file which has the required functions implemented.
  2. Click on next button to continue

You will see a window displayed, saying Zend AMF library will be installed as shown in the image below. Just click on OK and continue will the set up. Flash Builder will deploy the Zend AMF on your PHP server.

ZendInstallScreen

Once the installation completes, Flash Builder will display a message. Clicking OK will display the functions in the PHP class. Functions are referred as “operation”. Image below shows the window with operations exposed.

Click on finish to continue. Service created above can be seen in the services explorer as shown in the image below.

Configuring return type

In this step we will test the operation and configure the return type on the client i.e. we will specify what type of object to create with the response from the server. This will make it easy for us to develop, since it is easier to deal with strong typed objects.

Right click on the “getItems_paged()” operation in the services explorer and select “Configure return type” as shown in the image below.

A window as shown in the image below will be launched with options to configure the return type. You can chose an existing data type or let the Flash Builder generate VO classes based on the response from the server. Let’s leave it to the Flash Builder to generate required VO classes based on the server response as shown in the image below.

Invoking the operation and introspecting the response

Flash Builder sends request to the server and get the response and lets you configure the return type based on the response from server.

Operation requires two integer values as input arguments. Enter those two values as shown in the image above. You can see the response from the server in the window as shown in the image below.

Set the name of the data type to “Customer” as shown in the image above. Click on finish to continue.

You can see the return type of the operation changed as shown in the image below. When we invoke the “getItems_paged()” operation, response will be object of the type “Customer”, in our case ArrayCollection containing Customer objects.

Similarly configure return type for “count()” operation to “int” as shown in the image below.

“int” is an existing data type, so select the same from the existing data types list as shown in the image below.

Enabling paging

We have configured the two operations required for paging. To enable paging right click on “getItems_paged()” operation and select “Enable paging” as shown in the image below.

You will see a window as shown in the image below, where you need to select the unique identifier for the Customer class.

Select the unique identifier and click next to continue. customerId is the unique identifier in our case.

In this screen, select the operation (count() in this sample) to use for getting total count of records in the database and number of items to retrieve at a time. Click finish to continue.

Binding service results to UI controls

We usually write code to display the response from the service in a DataGrid or any other control. Flash Builder 4 has an awesome option which allows you to bind a service response to a UI control.

Switch to design view as shown in the image below.

In this screen:

  1. Change the Application layout to “spark.layouts.VerticalLayout” using the properties panel
  2. Drag and drop a “DataGrid” from the “components” panel on to the design area
  3. Set the width and height properties of the “DataGrid” to 100%

Right click on the DataGrid and select “Bind to Data …” as shown in the image below.

A window as shown in the image below will be launched.

In this screen:

  1. We select a “New service call” because there are no existing services in the current application.
  2. Select the “CustomerService”
  3. Select “getItems_Paged():Customer[]” from the operations list
  4. Set the Data provider to “Customer[]”
  5. Click OK

You can see the DataGrid in the design updated with properties of the Customer object as shown in the image below.

Save the application and run.

Paging is enabled and the data will be retrieved in chunks and only when it is required, for example when you scroll the DataGrid the data for the rows which are not retrieved will be retrieved. You can observe data paging by enabling Network Monitor in Flash Builder

More articles on using new features in Flash Builder 4 https://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we have data paging enabled with just few clicks. Flash Builder 4 rocks🙂

7 Responses to Built in Data Paging using Flash Builder 4

  1. Calv says:

    Hi – nice tutorials you’re doing🙂

    Don’t suppose you know how to get the return types correct on the response from the php do you?
    eg. look at your 2nd picture for 3.1 (https://sujitreddyg.files.wordpress.com/2009/06/3-32.jpg) – all the types are String. Flex won’t let you change them to, say for customer_id, to int.

    If you try it gives a message saying you have to ‘change server side code’ to give type information…
    Any idea how you do that?

    Thanks,
    C.

  2. Hi Calv,

    Flash Builder depends on the AMF message returned from the PHP server to identify the data type. The AMF library (Zend AMF) used on the server doesn’t seem to be handling the mysqli objects properly. Try using mysql library instead of mysqli as in this php file.

    http://www.sujitreddyg.com/fb4articles/CustomerService2.php.txt

  3. Calv says:

    Hi Sujit,

    Thanks for that – yeah it looks like mysql sorts out the data types fine – pretty weird that mysqli doesn’t do it, but there you go!

    Cheers!

  4. aaron says:

    Hi Sujit,

    Nice tutorial. Can provide the paging tutorial it’s running java.
    thanks

  5. Jeff W says:

    Hi Sujit,

    Thank you for the tutorial. I was wondering how to achieve paging with the same approach, but using a link bar style rather than a scrollbar.

    Thanks!

    Jeff

  6. sanka says:

    Following for java request( @aaron )
    that was work for me

    @Override
    public List listPage(int startIndex,int numItems)
    {
    List listPage(int startIndex,int numOfItems)”);
    List lst=em.createNamedQuery(“listCustomer”).setFirstResult(startIndex).setMaxResults(numItems).getResultList();

    return lst;
    }

    @Override
    public int count()
    {
    int count=(Integer)(em.createNativeQuery(“SELECT COUNT(*) AS COUNT FROM customer”).getSingleResult());
    return count;
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: