Querying a database



When you access a remote service, you typically retrieve records from a database and display them in the client application. This tutorial shows how to access a remote database and display retrieved records in a DataGrid.

The tutorial illustrates the following concepts:

  • Using a ColdFusion component (CFC) to implement service operations that query a database.

  • Binding a CFC service operation to a Flex data control, such as a DataGrid.

  • Sampling the data returned from a service operation to configure a data type for the returned data.

  • Running the application and viewing the returned data in the DataGrid.

Listing records from a database

This tutorial accesses the cfbookclub database that is provided with a ColdFusion installation. It lists the contents of the Books table in the database. However, you can modify this tutorial to select records from any database you might have access to.

  1. In your favorite ColdFusion editor, create the following CFC.

    This CFC selects all the records from the Books table in the cfbookclub database.

    <cfcomponent> 
        <cffunction name="getBooks" access="remote" returntype="query"> 
            <cfquery name="qBooks" datasource="cfbookclub"> 
                SELECT * FROM Books 
            </cfquery> 
            <cfreturn qBooks> 
        </cffunction> 
    </cfcomponent>
  2. Save the CFC as BookService.cfc in your web root. Place it in a folder named books.
    <CF Web Root>/books/BookService.cfc
  3. Test the CFC before implementing it in an application.

    It is always a good idea to test a service before importing it into a Flex project.

    1. Create the following ColdFusion script to test the CFC. This script uses cfdump to view the results of the service operation.

      Testing getBooks()... 
       
      <cfinvoke component="BookService" method="getBooks" returnvariable="books"/> 
       
      <p> <cfdump var="#books#"/>
    2. Save the script as bookservicetest.cfm in the books folder next to BookService.cfc.

    3. From a web browser, run the script to test the service:

      http://localhost:8500/books/bookservicetest.cfm
  4. In Flash Builder, create a ColdFusion server project and name it Books.

    Be sure to set the Application Server Type to ColdFusion. Enable Use Remote Object Access Service and select ColdFusion Flash Remoting.

    Set the output folder to the books folder containing the service.

  5. In Design View, add a DataGrid control to the application.

    The DataGrid component is available under Data Controls in the Components view.

  6. With the DataGrid selected, in the Properties view, click the Bind to Data button.

    The Bind to Data button is next to the Data Provider field in the Properties view.

  7. In the No Services Defined dialog, click Yes to connect to a service.

  8. In the New Flex Service wizard, select ColdFusion. Click Next.

    Flash Builder provides multiple ways to connect to a data service. In this scenario, you first create the user interface. Then from a user interface component, you can connect to a service and specify the remote operation.
  9. Click Browse and navigate to the BookService.cfc you created previously. Click Finish.

    Provide authorization credentials as needed for your system.

    The Data Services View now displays the BookService.

  10. With the DataGrid selected, click the Data Provider button in the Properties view.

    The Bind to Data dialog opens with New Service Call selected.

    BookService is the only service available in the Flex project.

    getBooks() is the only operation available in the service.

  11. In the Bind to Data dialog, select Configure Return Type to define the data type for returned data.

    Flex needs to know the return data type to access service operations. The BookService service does not define the data type for returned data. Flash Builder uses client-side typing to define a custom data type for the returned data.

  12. In the Configure Return Type dialog, Auto-Detect the Return Type is selected by default. Click Next.

  13. Specify Book in the Array Of field to define a custom type for returned data. Click Finish.

    The BookService returns an array of records from the data service. Each record is a complex data type representing a database record for a book. The custom type Book provides access to each field of the record.

    The Configure Return Type dialog displays the properties of the data type returned by the service. Click Finish.

    When Flash Builder configures a return type it accesses the database to create a value object. The properties of the custom data type are derived from the value object. You can view and modify the properties of the data type before proceeding.
  14. In the Bind to Data dialog, click OK.

    Flash Builder binds the data returned from the service call to the DataGrid component. It modifies the columns of the DataGrid, binding the value returned for each Book property to a column in the DataGrid.

  15. Make sure the DataGrid is still selected. In the Properties view, click Configure Columns and then do the following steps:

    1. Select the ISSPOTLIGHT column. Click Delete to delete the column.

    2. Delete all columns except TITLE and GENRE.

    3. Select the TITLE column. Edit the Header Text field to rename the column Title.

    4. Rename the GENRE column to Genre.

    5. With the GENRE column selected, click Down to rearrange the order of the columns.

    6. Click OK.

  16. In Design View, resize the DataGrid to a more normal shape, then save and run the application.