Data-Centric Development with ColdFusion 9 and Flash Builder 4 - Part 2

In the first part of this tutorial series we began to explore the new data-centric development (DCD) features available in ColdFusion 9 and Flash Builder 4. In this part of the series we will look at two of the more advanced DCD features, paging and client side data management.

Prerequisites

If you would like to follow along with this tutorial you will need to have both ColdFusion 9 and Flash Builder 4 installed. ColdFusion 9, including a free developer edition, is available here from Adobe. The latest Flash Builder 4 Beta is available on Adobe Labs. For this tutorial ColdFusion was installed in the server configuration, with RDS enabled, using the built-in web server. Flash Builder 4 was installed using the stand-alone installer. For more information on the installation of either product, please see the documentation. Finally, while not required to complete the tutorial, you may also want to download the latest ColdFusion Builder Beta from Adobe labs for editing the ColdFusion files created in this tutorial.

You will also need to have completed the first part of this series, Data-Centric Development with ColdFusion 9 and Flash Builder - Part I, as we will be continuing the development of contact manager project started in that tutorial.

Paging

When you run the project from the first tutorial you may notice that it takes some time for the contacts to be loaded into the DataGrid component.

This is because the DataGrid component is bound to the getAllContacts service method which loads all 5000 sample contacts at once. To avoid this slow loading scenario we can use the new paging functionality in Flash Builder 4. Paging allows you to load records incrementally on an as needed basis, greatly increasing the responsiveness of the application. We will now configure paging for the DataGrid component in Flash Builder.

1. Open the dzone project from the first tutorial in Flash Builder 4.
2. In the Data/Services panel, right click on the getContacts_paged service method of the ContactService service.
3. Select "Enable Paging..."
   
   

1. In the Enable Paging - Select Identity Properties wizard select the CONTACTID property.
   
   
2. Click Next.
3. In the Enable Paging - Confirm Paging Operation wizard enter the following:
   
   

   Number of items to fetch in each service call:	20
   Count operation	count()

   
   
   
   
4. Click Finish.
   The icon for the getContacts_paged service method will update to indicate paging is enabled for this method.
   
   
   
5. In Design view click on the DataGrid component.
6. Click on the data binding icon.
   
   

1. Click OK.
2. In the Bind To Data wizard enter the following:
   
   

   New service call	(select)
   Service:	ContactService
   Operation:	getContacts_paged() : Contact []

   
   
3. Click OK.
4. Right click on the DataGrid component.
5. Select "Configure Columns..."
6. In the Configure Columns wizard, select the CONTACTID column.
7. Press Delete.
8. Select the EMAIL column.
9. Press Delete.
10. Press OK.
    At this point the DataGrid component will display data from the getContacts_paged service call, however the DataGrid's creation complete handler is still making the getAllContacts service call in addition to the new getContacts_paged service call. We will fix this now.
11. Switch to Source view.
12. Find the dataGrid_creationCompleteHandler method and delete or comment out the contactService.getAllContacts() service call.
    
    
13. Select File > Save.
    Before we run the application we will enable the Network Monitor so we can see the paging service calls as they happen.
14. In the Network Monitor panel, click the Enable Monitor button.
    
    
15. Select Run >Debug dzone.
    At this point you should see the dzone application loaded in your default browser. The application should contain a DataGrid loaded with data from our getContacts_paged service call.
    
    
    
    Using the Network Monitor you can see calls to the count and getContacts_paged service methods.
    
    
    As you scroll the DataGrid you should see additional calls to the getContacts_paged service method.
    
    
    
16. Close your browser to terminate the debugging session.

Attachment	Size
Figure1.png	60.57 KB
Figure2.png	69.29 KB
Figure3.png	40.08 KB
Figure4.png	55.9 KB
Figure5.png	40.92 KB
Figure6.png	56.82 KB
Figure7.png	28.62 KB
Figure8.png	116.09 KB
Figure8.png	116.09 KB
Figure9.png	37.06 KB
Figure10.png	75.6 KB
Figure11.png	55.29 KB
Figure12.png	68.78 KB
Figure13.png	61.61 KB
Figure14.png	40.39 KB
Figure15.png	68.83 KB
Figure16.png	42.78 KB
Figure17.png	104.97 KB
Picture 18.png	167.51 KB
Figure19.png	77.97 KB