Platinum Partner
ria,coldfusion,flex & air,flash builder 4

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

Because of its built in support for Flash Remoting ColdFusion has always been an excellent choice for powering Flex applications, but with the recent release of ColdFusion 9 and upcoming releases of Flash Builder 4 and ColdFusion Builder, Adobe is looking to re-define how developers create data-centric applications. In particular the powerful introspection and code generation tools in Flash Builder 4 greatly simplify the work flow for creating data driven applications. In this tutorial we will walk through the creation of a simple contact manager application demonstrating many of these new data-centric development features in the process.

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 from Adobe at http://www.adobe.com/products/coldfusion. The latest Flash Builder 4 Beta is available on Adobe Labs, http://labs.adobe.com. 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.

Database Setup

To begin we will create an Embedded Derby ColdFusion data source to hold our sample contact data.

  1. Create a new ColdFusion template in the root of the ColdFusion built in web server with the contents of Listing 1. (i.e. /Applications/ColdFusion9/wwwroot/dzoneDBSetup.cfm)

    Listing 1 - Database Setup Template (dzoneDBSetup.cfm)

    <cfparam name="form.cfAdminPwd" default="" />
    <cfparam name="form.dbName" default="" />
    <cfparam name="form.dbFolder" default="" />

    <cfif len(form.dbName) and len(form.dbFolder)>

    <!--- use the administrator api to set up a new datasource --->
    <cfset adminObj = createObject("component","cfide.adminapi.administrator").login(form.cfAdminPwd) />
    <cfset dsObj = createObject("component","cfide.adminapi.datasource") />
    <cfset dsObj.setDerbyEmbedded(name=form.dbName,
    database=form.dbFolder,
    description="Sample database for DZone ColdFuison 9 Flex integration tutorial.",
    isnewdb="true") />

    <!--- add the example table --->
    <cfquery name="createTable" datasource="dzone">
    CREATE TABLE CONTACT (
    CONTACTID INT NOT NULL GENERATED ALWAYS AS IDENTITY,
    FIRSTNAME VARCHAR(50),
    LASTNAME VARCHAR(50),
    EMAIL VARCHAR(255),
    PRIMARY KEY(CONTACTID)
    )
    </cfquery>

    <!--- add example data--->
    <cfloop from="1" to="5000" index="i">
    <cfquery name="insertContact" datasource="dzone">
    INSERT INTO CONTACT (FIRSTNAME, LASTNAME, EMAIL)
    VALUES ('FirstName#NumberFormat(i,'0000')#','LastName#NumberFormat(i,'0000')#','user#NumberFormat(i,'0000')#@test.com')
    </cfquery>
    </cfloop>

    <!--- confirm example record count --->
    <cfquery name="getContacts" datasource="dzone">
    SELECT COUNT(*) AS CONTACTCOUNT FROM CONTACT
    </cfquery>

    </cfif>

    <cfoutput>
    <html>
    <head>
    <title>Database Setup</title>
    </head>
    <body>
    <h1>Database Setup</h1>

    <cfif len(form.dbName) and len(form.dbFolder)>

    <p>Database created with #getContacts.contactCount# example records.</p>

    <cfelse>

    <form method="post"/>
    <p>This template will create a new Derby ColdFusion data source named "dzone."
    The template will also create a new table in the database and populate it with sample data.
    Depending on your server setup, you may need to adjust the default </em>Database Folder</em> value below.</p>

    <label for="cfAdminPwd">Administrator Password:</label>
    <input type="password" name="cfAdminPwd" id="cfAdminPwd" /><br/>

    <label for="dbFolder">Database Name:</label>
    <input type="text" name="dbName" id="dbName" value="dzone" /><br/>

    <label for="dbFolder">Database Folder:</label>
    <input type="text" name="dbFolder" id="dbFolder" value="#ExpandPath('../db/dzone')#" size="50" /><br/>

    <input type="submit" value="Create Data Source" />
    </form>

    </cfif>
    </body>
    </html>
    </cfoutput>
  2. Browse to the template. (i.e. http://localhost:8500/dzoneDBSetup.cfm)

  3. Enter the following information:

  4. Click Submit.
    The template will create a new ColdFusion data source with sample data for use in this tutorial. This process may take several seconds.
  5. You will see a confirmation message when the data source and sample data are created.

Project Setup

Next we will create the Flex project in Flash Builder.

  1. In Flash Builder select File > New > Flex Project.
  2. Enter the following settings for the New Flex Project - Create a Flex project wizard:


  3. Click Next.
  4. Enter the following setting for the New Flex Project - Configure ColdFusion Server wizard:

     
  5. Click Validate Configuration.
  6. Click Finish.

The ColdFusion Service

Now that the basic Flex project is set up, the next step is to create the ColdFusion service component we will use to power our application. While there are many new options in Flash Builder 4 for importing existing services and creating new services, for this tutorial we will explore generating the service from a template.

  1. Click the Data/Services tab in Flash Builder.

  2. Click the "Connect to Data/Service..." link.
  3. Select ColdFusion in the Connect to Data/Service - Select Service Type wizard.

  4. Click Next.
  5. On the Connect to Data/Service - Configure ColdFusion Service wizard, click the "click here to generate a sample" link.
  6. Enter the following settings for the Generate Sample CFC Service wizard:


  7. Press OK.
  8. Read the security information.

  9. Press OK.
  10. Confirm the service settings on the Connect to Data/Service - Configure ColdFusion Service wizard.

  11. Press Finish.
  12. Enter the ColdFusion RDS in the Authentication form:


  13. Press OK.
    At this point Flash Builder creates a sample service CFC and introspects it to generate a ActionScript service class. The generated ActionScript service, ContactService.as, can be seen in the services.contactservice package while the ColdFusion CFC can be seen as a linked file under the services folder in the Package Explorer.


    Additional details about the generated service can be seen in the Data/Services tab.

  14. Modify the ContactService.cfc template for use with the Derby ColdFusion data source.
    Listing 2 shows the generated service CFC which contains sample code specific to the MySQL database engine.

    Listing 2 - The generated ContactService.cfc with sample code.


    <cfcomponent output="false">

    <!---
    README for sample service

    This generated sample service contains functions that illustrate typical service operations.
    Use these functions as a starting point for creating your own service implementation. Modify the
    function signatures, references to the database, and implementation according to your needs.
    Delete the functions that you do not use.

    Save your changes and return to Flash Builder. In Flash Builder Data/Services View, refresh
    the service. Then drag service operations onto user interface components in Design View. For
    example, drag the getAllItems() operation onto a DataGrid.

    This code is for prototyping only.

    Authenticate the user prior to allowing them to call these methods. You can find more
    information at http://www.adobe.com/go/cf9_usersecurity

    --->

    <cffunction name="getAllItems" output="false" access="remote" returntype="any" >

    <!--- Auto-generated method
    Retrieve set of records and return them as a query or array.
    Add authorization or any logical checks for secure access to your data --->

    <!--- Sample Code

    <cfset var qAllItems="">
    <cfquery name="qAllItems" datasource="YOUR DATASOURCE NAME HERE">
    SELECT * FROM TABLENAME
    </cfquery>
    <cfreturn qAllItems>

    --->
    </cffunction>

    <cffunction name="getItem" output="false" access="remote" returntype="any" >
    <cfargument name="itemID" required="true" />

    <!--- TODO Auto-generated method
    Retrieve a single record and return it as a query or array.
    Add authorization or any logical checks for secure access to your data --->

    <!--- Sample Code

    <cfset var qItem="">
    <cfquery name="qItem" datasource="YOUR DATASOURCE NAME HERE">
    SELECT *
    FROM TABLENAME
    WHERE ITEMID = <CFQUERYPARAM CFSQLTYPE="CF_SQL_INTEGER" VALUE="#ARGUMENTS.itemID#">
    </cfquery>

    <cfreturn qItem>

    --->
    </cffunction>

    <cffunction name="createItem" output="false" access="remote" returntype="any" >
    <cfargument name="item" required="true" />

    <!--- TODO Auto-generated method
    Insert a new record in the database.
    Add authorization or any logical checks for secure access to your data --->

    <!--- Sample Code
    <cfquery name="createItem" datasource="YOUR DATASOURCE NAME HERE" result="result">
    INSERT INTO TABLENAME (FIELD1, FIELD2, FIELD3)
    VALUES (<CFQUERYPARAM cfsqltype="CF_SQL_VARCHAR" VALUE="#item.FIELD1#">,
    <CFQUERYPARAM cfsqltype="CF_SQL_VARCHAR" VALUE="#item.FIELD2#">,
    <CFQUERYPARAM cfsqltype="CF_SQL_VARCHAR" VALUE="#item.FIELD3#">)
    </cfquery>

    <!--- The GENERATED_KEY is valid for mysql database only, you can modify it for your database --->
    <cfreturn result.GENERATED_KEY/>

    --->
    </cffunction>

    <cffunction name="updateItem" output="false" access="remote" returntype="void" >
    <cfargument name="item" required="true" />

    <!--- TODO Auto-generated method
    Update an existing record in the database.
    Add authorization or any logical checks for secure access to your data --->

    <!--- Sample Code
    <cfquery name="updateItem" datasource="YOUR DATASOURCE NAME HERE">
    UPDATE TABLENAME SET FIELD1 = <CFQUERYPARAM cfsqltype="CF_SQL_VARCHAR" VALUE="#item.FIELD1#">,
    FIELD2 = <CFQUERYPARAM cfsqltype="CF_SQL_VARCHAR" VALUE="#item.FIELD2#">,
    FIELD3 = <CFQUERYPARAM cfsqltype="CF_SQL_VARCHAR" VALUE="#item.FIELD3#">
    WHERE ITEMID = <CFQUERYPARAM CFSQLTYPE="CF_SQL_INTEGER" VALUE="#item.itemID#">
    </cfquery>

    --->
    </cffunction>

    <cffunction name="deleteItem" output="false" access="remote" returntype="void" >
    <cfargument name="itemID" type="numeric" required="true" />

    <!--- TODO Auto-generated method
    Delete a record in the database.
    Add authorization or any logical checks for secure access to your data --->

    <!--- Sample Code
    <cfquery name="delete" datasource="YOUR DATASOURCE NAME HERE">
    DELETE FROM TABLENAME
    WHERE ITEMID = <CFQUERYPARAM CFSQLTYPE="CF_SQL_INTEGER" VALUE="#ARGUMENTS.itemID#">
    </cfquery>

    --->
    </cffunction>

    <cffunction name="count" output="false" access="remote" returntype="numeric" >

    <!--- TODO Auto-generated method
    Return the number of items in your table.
    Add authorization or any logical checks for secure access to your data --->

    <!--- Sample Code
    <cfquery name="qread" datasource="YOUR DATASOURCE NAME HERE">
    SELECT COUNT(ITEMID) AS itemCount FROM TABLENAME
    </cfquery>

    <cfreturn qread.itemCount>

    --->
    </cffunction>

    <cffunction name="getItems_paged" output="false" access="remote" returntype="any" >
    <cfargument name="startIndex" type="numeric" required="true" />
    <cfargument name="numItems" type="numeric" required="true" />

    <!--- TODO Auto-generated method
    Return a page of numRows number of records as an array or query from the database for this startRow.
    Add authorization or any logical checks for secure access to your data --->

    <!--- Sample Code

    <!--- The LIMIT keyword is valid for mysql database only, you can modify it for your database --->

    <cfset var qRead="">
    <cfquery name="qRead" datasource="YOUR DATASOURCE NAME HERE">
    SELECT * FROM TABLENAME LIMIT #startIndex#, #numItems#
    </cfquery>
    <cfreturn qRead>

    --->
    </cffunction>

    </cfcomponent>

    Update this file with the contents from Listing 3, which has updated code specific to the Derby data base engine.

    Listing 3 - Updated ContactService.cfc with Derby specific code.

    <cfcomponent output="false">

    <cffunction name="getAllContacts" output="false" access="remote" returntype="query" >
    <cfset var qAllContacts = "" />
    <cfquery name="qAllContacts" datasource="dzone">
    SELECT
    CONTACTID
    ,FIRSTNAME
    ,LASTNAME
    ,EMAIL
    FROM
    CONTACT
    </cfquery>
    <cfreturn qAllContacts />
    </cffunction>

    <cffunction name="getContact" output="false" access="remote" returntype="query" >
    <cfargument name="contactID" type="numeric" required="true" />
    <cfset var qContact = "" />
    <cfquery name="qContact" datasource="dzone">
    SELECT
    CONTACTID
    ,FIRSTNAME
    ,LASTNAME
    ,EMAIL
    FROM
    CONTACT
    WHERE
    CONTACTID = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.contactID#" />
    </cfquery>
    <cfreturn qContact />
    </cffunction>

    <cffunction name="createContact" output="false" access="remote" returntype="numeric" >
    <cfargument name="Contact" required="true" />
    <cfset var qCreateContact = "" />
    <cfset var qResult = "" />

    <cfquery name="qCreateContact" datasource="dzone" result="qResult">
    INSERT INTO CONTACT
    (
    FIRSTNAME
    ,LASTNAME
    ,EMAIL
    )
    VALUES
    (
    <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.Contact.firstName#" />
    ,<cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.Contact.lastName#" />
    ,<cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.Contact.email#" />
    )
    </cfquery>
    <cfreturn qResult.generatedKey />
    </cffunction>

    <cffunction name="updateContact" output="false" access="remote" returntype="void" >
    <cfargument name="Contact" required="true" />
    <cfset var qUpdateContact = "" />
    <cfquery name="qUpdateContact" datasource="dzone">
    UPDATE
    CONTACT
    SET
    FIRSTNAME = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.Contact.firstName#" />
    ,LASTNAME = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.Contact.lastName#" />
    ,EMAIL = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.Contact.email#" />
    WHERE
    CONTACTID = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.Contact.contactID#" />
    </cfquery>
    </cffunction>

    <cffunction name="deleteContact" output="false" access="remote" returntype="void" >
    <cfargument name="contactID" type="numeric" required="true" />
    <cfset var qDelete = "" />
    <cfquery name="qDelete" datasource="dzone">
    DELETE FROM CONTACT
    WHERE CONTACTID = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.contactID#" />
    </cfquery>
    </cffunction>

    <cffunction name="count" output="false" access="remote" returntype="numeric" >
    <cfset var qRead = "" />
    <cfquery name="qRead" datasource="dzone">
    SELECT COUNT(CONTACTID) AS CONTACTCOUNT
    FROM CONTACT
    </cfquery>
    <cfreturn qRead.CONTACTCOUNT>
    </cffunction>

    <cffunction name="getContacts_paged" output="false" access="remote" returntype="query" >
    <cfargument name="startIndex" type="numeric" required="true" />
    <cfargument name="numItems" type="numeric" required="true" />

    <cfset var endIndex = arguments.startIndex + arguments.numItems />
    <cfset var qRead = "" />

    <cfquery name="qRead" datasource="dzone">
    SELECT
    CONTACTID
    ,FIRSTNAME
    ,LASTNAME
    ,EMAIL
    FROM
    ( SELECT
    ROW_NUMBER() OVER() AS ROWNUM
    ,CONTACTID
    ,FIRSTNAME
    ,LASTNAME
    ,EMAIL
    FROM
    CONTACT
    ) AS TMP
    WHERE
    ROWNUM > <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.startIndex#" />
    AND ROWNUM <= <cfqueryparam cfsqltype="cf_sql_integer" value="#endIndex#" />
    </cfquery>
    <cfreturn qRead>
    </cffunction>

    </cfcomponent>

  15. Save the updated ContactService.cfc.
  16. Refresh the ContactService.
    In the Data/Services tab, right click on the ContactService and select Refresh.


Configuring Return and Input Types

One challenge that ColdFusion developers often face when beginning Flex development is the transition from the weakly typed CFML language to the strongly typed ActionScript language. Most ColdFusion developers work with queries, while it is much more productive to work with collecitons of specific object types in Flex. In order to pass strongly typed data from ColdFusion to Flex, developers previously had create value object components in ColdFusion which were then mapped to corresponding ActionScript classes in Flex. Queries then had to be converted to arrays of value objects in ColdFusion before sending the data to Flex. Flash Builder 4 replaces this time consuming work flow with the new client side data typing feature. With Flash Builder 4 you can actually generate a custom data type by introspecting the data returned from your ColdFusion service, thus eliminating the need for value objects in ColdFusion. In this section of the tutorial we will explore this new feature.

  1. In the Data/Services tab right click on the getContact service method.
  2. Select "Configure Return Type...".

  3. In the Configure Return Type wizard select the following:


  4. Click Next.
  5. In the Configure Return Type - Auto-Detect Return Type wizard enter the following:



  6. Click Next.
    At this point Flash Builder 4 will call your service using the parameters defined in the previous step.
  7. Enter the following information in the Configure Return Type - Return Type Detected Successfully wizard:


  8. Click Finish.
    At this point Flash Builder 4 creates several ActionScript classes in the valueObjects package to represent the new Contact custom data type. This new Contact data type can now be used throughout our Flex application.


    In addition to the new classes in the Project Explorer we can also see the new Contact custom data type in the Data/Services tab, as well as details on the newly configured getContact service method.


  9. In the Data/Services tab right click on the getAllContacts service method.
  10. Select "Configure Return Type...".
  11. In the Configure Return Type wizard select the following:


  12. Click Finish.
    The display of the getAllContacts service method will change to indicate its return type has been configured.

  13. Repeat steps 9 - 12 to configure the return type for the getContacts_paged service method.

  14. In the Data/Services tab right click on the createContact service method.
  15. Select "Configure Input Types..."
  16. In the Configure Input Types window enter the following:


  17. Press OK.
    In the Data/Services tab the createContact service method is updated to show the new input type.

  18. Repeat steps 14 - 17 to configure the input type of the updateContact service method.

 

Listing All Contacts

Next we will look at the new data binding features in Flash Builder 4 that allow us to easily list the results of a service call in a data grid component without writing a single line of code.

  1. In Flash Builder 4, open the main application file, dzone.mxml.
  2. Switch to Design view.
  3. In the Properties panel, change the Layout to spark.layouts.VerticalLayout.

  4. Swith to Source view and add the following padding attributes to the VerticalLayout MXML tag:


  5. Switch back to Design view.
  6. Drag a DataGrid control from the Components panel to the main dzone.mxml application.

  7. In the Properties panel, set the following properties for the DataGrid component:

  8. Bind the getAllContacts service call to the DataGrid component.
    This can be done by clicking on the getAllContacts service method and dragging it onto the DataGrid component. This will result in the columns of the DataGrid being updated to reflect the properties of the service call return type, the custom Contact data type in this case.



    If we switch to Source view we can see that Flash Builder 4 has generated code necessary to call the service and bind the results to the DataGrid.

  9. In Design view right click on the DataGrid component in the main dzone.mxml application.
  10. Select "Configure Columns..."
  11. In the Configure Columns wizard, select the CONTACTID column.
  12. Press Delete.
  13. Select the EMAIL column.
  14. Press Delete.
  15. Press OK.

  16. Select File > Save.
  17. 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 getAllContacts service call.

  18. Close your browser to terminate the debugging session.

Editing Contacts

Flash Builder 4 also allows you to easily create data entry forms based on custom data types. We will now look at creating a master-detail form for editing contacts listed in the DataGrid created in the previous section. We will also add a button to our application which allows us to save the updated data via a service call.

  1. In Flash Builder's Design view, right click on the DataGrid component in the main dzone.mxml application.
  2. Select "Generate Details Form...".
  3. Enter the following info on the Generate Form wizard:


  4. Click Next.
  5. Using the Up and Down buttons, adjust the properties on the Generate Form - Property Control Mapping form so the properties are ordered as follows:


  6. Uncheck the CONTACTID property in the Generate Form - Property Control Mapping form.
  7. Click Finish.
    Flash Builder adds a detail form to the application.

  8. Drag an HGroup layout component from the Components panel to the main dzone.mxml application.
  9. Set the following properties for the HGroup component in the Properties panel:

  10. Drag a Button control component from the Components panel into the newly created HGroup component.
  11. Set the following properties for the Button component in the Properties panel:


  12. Right click the Update button.
  13. Select "Generate Service Call...".
  14. In the Generate Service Call wizard select the following:


  15. Edit the generated service call.
    After generation of the service call code Flash Builder changes to Source view and highlights the arguments to the service call, which must be updated for your application.



    For this tutorial we can change "/*Enter value(s) for */ Contact" to "contact as Contact" as shown in Listing 4 below.

    Listing 4 - updated button_clickHander function

    protected function button_clickHandler(event:MouseEvent):void
    {
    updateContactResult.token = contactService.updateContact(contact as Contact);
    }
  16. Select File > Save.
  17. 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 getAllContacts service call as well as a form for editing contact data.

  18. Close your browser to terminate the debugging session.

Deleting Contacts

Next we will look at deleting contacts. This operation is slightly more complicated because it requires removing the data from the Flex DataGrid component. While this requires a small amount of programming on our part, the code generation features in Flash Builder 4 make this a fairly simple task.

  1. In Flash Builder's Design view, drag a Button control component from the Components panel into the newly HGroup component that holds the Update button.
  2. Set the following properties for the Button component in the Properties panel:


  3. Right click the Update button.
  4. Select "Generate Service Call...".
  5. In the Generate Service Call wizard select the following:


  6. Edit the generated service call.
    After generation of the service call code Flash Builder changes to Source view and highlights the arguments to the service call, which must be updated for your application.



    For this tutorial we can change "/*Enter value(s) for */ contactID" to "contact.CONTACTID as Number" as shown in Listing 5 below.

    Listing 5 - updated button2_clickHandler function

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

    At this point clicking the Delete button will remove the contact from the database, but we also need to remove the contact from the Flex DataGrid component.

  7. While in Source view, find the deleteContactResult CallResponder declaration.

  8. Add a result method and generate a result handler.
    After the id attribute in the CallResponder MXML tab, type a space followed by 'r'. Select the result method from the proposed methods.



    Then choose to generate a result handler.


    This will generate a method stub to be updated as needed by your application.

  9. Update the result handler method stub to remove the contact from the DataGrid.
    Listing 6 below contains the code of the new result handler.

    Listing 6 - updated deleteContactResult_resultHander function

    protected function deleteContactResult_resultHandler(event:ResultEvent):void
    {
    var contactCollection:ArrayCollection = dataGrid.dataProvider as ArrayCollection;
    contactCollection.removeItemAt(contactCollection.getItemIndex(contact));
    }


    Note you will need to import mx.collections.ArrayCollection in your Script block in order to compile your application with this result handler.
  10. Select File > Save.
  11. 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 getAllContacts service call as well as a form for editing and deleting contact data.

  12. Close your browser to terminate the debugging session.

Adding Contacts

To finish off this tutorial we will build a form to add contacts using another approach in Flash Builder 4 for generating forms linked to service calls.

  1. In Flash Builder's Design view, right click on the createContact service method in the Data/Services panel.
  2. Select "Generate Form...".
  3. In the Generate Form wizard, make the following selections:


  4. Press Next.
  5. Using the Up and Down buttons, adjust the properties on the Generate Form - Property Control Mapping form so the properties are ordered as follows:


  6. Uncheck the CONTACTID property in the Generate Form - Property Control Mapping form.
  7. Click Finish.
    Flash Builder adds a service call form to the application.



    At this point clicking the CreateContact button will add the contact from the database, but we also need to add the contact from the Flex DataGrid component.
  8. Switch to Source view and find the createContactResult CallResponder declaration.

     
  9. Add a result method and generate a result handler.
    After the id attribute in the CallResponder MXML tab, type a space followed by 'r'. Select the result method from the proposed methods.



    Then choose to generate a result handler.


    This will generate a method stub to be updated as needed by your application.

  10. Update the result handler method stub to add the contact to the DataGrid.
    Listing 7 below contains the code of the new result handler.

    Listing 7 - updated createContactResult_resultHander function

    protected function createContactResult_resultHandler(event:ResultEvent):void
    {
    var newContact:Contact = new Contact();
    newContact.CONTACTID = event.result as int;
    newContact.EMAIL = contact2.EMAIL;
    newContact.FIRSTNAME = contact2.FIRSTNAME;
    newContact.LASTNAME = contact2.LASTNAME;

    var contactCollection:ArrayCollection = dataGrid.dataProvider as ArrayCollection;
    contactCollection.addItem(newContact);

    contact2 = null;
    }
  11. Select File > Save.
  12. 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 getAllContacts service call as well as a form for editing and deleting contact data and a form for adding new contacts.

  13. Close your browser to terminate the debugging session.

Conclusion

Using ColdFusion 9 and the new data-centric development features for Flash Builder 4 we were able to quickly build a working contact manager. In the next part of this tutorial we will expand this example to explore some of the more advanced data-centric develpment features such as paging and client side data management.

 

About the Author

Nathan Mische is a Senior Programmer/Analyst for the Wharton Learning Lab, where he develops technology enhanced learning materials for The Wharton School of the University of Pennsylvania using ColdFusion and Flex. He is also an Adobe Community Expert for ColdFusion and blogs at http://www.mischefamily.com/nathan.



{{ tag }}, {{tag}},

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

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}