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

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

DZone's Guide to

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

·
Free Resource

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.

Data Management

Flash Builder 4 includes a new data management feature which allows you to synchronize client side changes with the server. Using data management additions and updates are made to objects in client side collections and then applied to the database in batches. All changes are managed on the client side until committed allowing users to rollback any uncommitted changes.

  1. In the Data/Services panel right click on the Contact data type.
  2. Select "Enable Data Managment..."

  3. In the Data Management - Select Identity Properties wizard select the CONTACTID property.

  4. Click Next.
  5. In the Data Management - Map Data Management Operation wizard enter the following:

    Service:
    ContactService
    Create (Add) Item:
    createContact(Contact:Contact):Number
    Get Item:
    getContact(contactID:Number):Contact[]
    Update Item:
    updateContact(Contact:Contact):void
    Delete Item:
    deleteContact(contactID:Number):void

  6. Click Finish.
    The icon for the Contact data type will update to indicate data management is enabled for this data type.


    We will now modify the application to use data management instead of explicit service calls.
  7. In Design view click on the "Update" button.
  8. Press the delete key on the keyboard to remove the button from the application.
    At this point contacts can still be edited in the Flex client, but changes will not be persisted in the database. Later in this tutorial we will add a "Commit Changes" button which will allow us to save all client side data changes.
  9. Next right click on the "Delete" button.
  10. Select "Edit Click Handler" to open the button2_clickHandler method in Source view.
  11. Remove the existing button2_clickHandler code.
  12. Add the code from Listing 1 below to the button2_clickHandler.

    Listing 1 - Button 2 Click Handler

    protected function button2_clickHandler(event:MouseEvent):void
    {
    contactService.deleteContact(contact.CONTACTID as Number);
    }
  13. Next right click on the "Create Contact" button.
  14. Select "Edit Click Handler" to open the button3_clickHandler method in Source view.

  15. Remove the existing button3_clickHandler code.
  16. Add the code from Listing 2 below to the button3_clickHandler.

    Listing 2 - Button 3 Click Handler


    protected function button3_clickHandler(event:MouseEvent):void
    {
    var contactCollection:ArrayCollection = dataGrid.dataProvider as ArrayCollection;
    contactCollection.addItem(contact2);
    contact2 = new Contact();
    }
  17. Switch back to Design view.
  18. Drag an HGroup layout component from the Components panel to the main dzone.mxml application.
  19. Set the following properties for the HGroup component in the Properties panel:

    Width
    300
    Height
    (blank)
  20. Drag a Button control component from the Components panel into the newly created HGroup component.
  21. Set the following properties for the Button component in the Properties panel:

    Label
    Commit Changes

  22. Right click on the "Commit Changes" button.
  23. Select "Generate Click Handler".
  24. In the generated button4_clickHandler method enter "contactService.commit();" as in Listing 3 below.

    Listing 3 - Button 4 Click Handler

    protected function button4_clickHandler(event:MouseEvent):void
    {
    contactService.commit();
    }
  25. Drag another Button control component from the Components panel into the HGroup component that holds the "Commit Changes" button.
  26. Set the following properties for the Button component in the Properties panel:

    Label
    Revert Changes
  27. Right click the "Revert Changes" button.
  28. Select "Generate Click Handler".
  29. In the generated button4_clickHandler method enter "contactService.revertChanges();" as in Listing 4 below.

    Listing 4 - Button 5 Click Handler


    protected function button5_clickHandler(event:MouseEvent):void
    {
    contactService.revertChanges();
    }
  30. Select File > Save.
  31. 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 as well as a form for editing and deleting contact data and a form for adding new contacts. Contact updates and additions are stored in the Flex client and not committed until the "Commit Changes" button is clicked while contact deletes are automatically committed.

  32. Close your browser to terminate the debugging session.

Clean Up


At this point the application has some leftover artifacts from previous revision. The dzone.mxml in Listing 5 below removes all extraneous event handler methods and CallResponder components. It also adds FormHeading components to better indicate the purpose of the two forms.

Listing 5 - dzone.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024"
minHeight="768"
xmlns:contactservice="services.contactservice.*"
xmlns:valueObjects="valueObjects.*">
<s:layout>
<s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" />
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;

protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
{
getContacts_pagedResult.token = contactService.getContacts_paged();
}

protected function button2_clickHandler(event:MouseEvent):void
{
contactService.deleteContact(contact.CONTACTID as Number);
}

protected function button3_clickHandler(event:MouseEvent):void
{
var contactCollection:ArrayCollection = dataGrid.dataProvider as ArrayCollection;
contactCollection.addItem(contact2);
contact2 = new Contact();
}

protected function button4_clickHandler(event:MouseEvent):void
{
contactService.commit();
}


protected function button5_clickHandler(event:MouseEvent):void
{
contactService.revertChanges();
}

]]>
</fx:Script>
<fx:Declarations>
<contactservice:ContactService id="contactService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
<valueObjects:Contact id="contact"/>
<valueObjects:Contact id="contact2"/>
<s:CallResponder id="getContacts_pagedResult"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Binding source="dataGrid.selectedItem as Contact" destination="contact"/>
<mx:DataGrid id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getContacts_pagedResult.lastResult}" editable="false" width="300">
<mx:columns>
<mx:DataGridColumn headerText="FIRSTNAME" dataField="FIRSTNAME"/>
<mx:DataGridColumn headerText="LASTNAME" dataField="LASTNAME"/>
</mx:columns>
</mx:DataGrid>
<mx:Form>
<mx:FormHeading label="Update/Delete Contacts" />
<mx:FormItem label="FIRSTNAME">
<s:TextInput id="fIRSTNAMETextInput" text="@{contact.FIRSTNAME}"/>
</mx:FormItem>
<mx:FormItem label="LASTNAME">
<s:TextInput id="lASTNAMETextInput" text="@{contact.LASTNAME}"/>
</mx:FormItem>
<mx:FormItem label="EMAIL">
<s:TextInput id="eMAILTextInput" text="@{contact.EMAIL}"/>
</mx:FormItem>
<s:Button label="Delete Contact" id="button2" click="button2_clickHandler(event)"/>
</mx:Form>
<mx:Form defaultButton="{button3}">
<mx:FormHeading label="Create Contact" />
<mx:FormItem label="FIRSTNAME">
<s:TextInput id="fIRSTNAMETextInput2" text="@{contact2.FIRSTNAME}"/>
</mx:FormItem>
<mx:FormItem label="LASTNAME">
<s:TextInput id="lASTNAMETextInput2" text="@{contact2.LASTNAME}"/>
</mx:FormItem>
<mx:FormItem label="EMAIL">
<s:TextInput id="eMAILTextInput2" text="@{contact2.EMAIL}"/>
</mx:FormItem>
<s:Button label="Create Contact" id="button3" click="button3_clickHandler(event)"/>
</mx:Form>
<s:HGroup width="300">
<s:Button label="Commit Changes" click="button4_clickHandler(event)"/>
<s:Button label="Revert Changes" click="button5_clickHandler(event)"/>
</s:HGroup>
</s:Application>

Conclusion

In this tutorial we configured paging and client side data management for our sample application. We also saw how Flash Builder's new Network Monitor allows us to easily see network requests as they are made by our application.

Finally, this tutorial series covered only one possible work flow for integrating ColdFusion 9 with Flex via Flash Builder's new data-centric development features. I encourage you to download ColdFusion 9 and the latest Flash Builder beta to experiment with these new features and discover what works best for you.

Topics:

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}