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

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.

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