Experienced ColdFusion developers are familiar with using the Adobe ColdFusion application server to provide both data and HTML generation functionality for their web application development. In this article, you will learn how ColdFusion Components (CFCs) can provide back-end data services to front-end Adobe Flex applications. You will also learn about Adobe Flash Builder 4 tools that can help you work with CFCs during Flex application development.

To learn more about the new Eclipse-based ColdFusion Builder development tool, read Ben Forta's article "Introducing Adobe ColdFusion Builder".

Encapsulating business logic in CFCs

Many ColdFusion developers program their applications so that database queries and other business logic are inline with user interface content. The following code represents a typical CFML directive to query the database and output the values in an HTML table:

        <cfquery datasource="F4CF_FictitiousSalesPlanner" name="qEmployees">
   SELECT FirstName, LastName, Email, Phone, Region
   FROM SalesTargets
</cfquery>
    

        <table border="1" cellpadding="10">
  <tr>
    <td>FIRST NAME</td>
    <td>LAST NAME</td>
    <td>EMAIL</td>
    <td>PHONE</td>
    <td>REGION</td>
  </tr>
  <cfoutput query="qEmployees">
  <tr>
    <td>#qEmployees.FIRSTNAME#</td>
    <td>#qEmployees.LASTNAME#</td>
    <td>#qEmployees.EMAIL#</td>
    <td>#qEmployees.PHONE#</td>
    <td>#qEmployees.REGION#</td>
  </tr>
  </cfoutput>
</table>

    

Keep in mind that ColdFusion is being used for two purposes:

To facilitate the return of data from the database (and to perform other server-side services if necessary)
To dynamically generate HTML code for the application user interface

For ColdFusion and Flex development, you will need to more fundamentally separate the front-end user interface code from the back-end business logic: the user interface will be created with the Flex framework and the business logic will be encapsulated in CFCs.

The first step to create a CFC is to analyze your server-side needs into logical units. In this case, the application will display employee information so a logical name for the business logic CFC is Employee.cfc.

Next, you create one or more functions in the CFC, nested within cffunction tags as shown in the following code:

        <cfcomponent>
  <cffunction name="getEmployees">
    <cfargument name="region" type="string" />
    <cfquery datasource="F4CF_FictitiousSalesPlanner" 
      name="qEmployees">
      SELECT FirstName, LastName, Email, Phone, Region
      FROM SalesTargets
      <cfif isDefined("arguments.region")>
        WHERE Region = '#arguments.region#'
      </cfif>
    </cfquery>
    <cfreturn qEmployees>
  </cffunction>
  <cffunction name="insertEmployee">
    ...
  </cffunction>
  <cffunction name="updateEmployees">
    ...
  </cffunction>
  <cffunction name="deleteEmployee">
    ...
  </cffunction>
</cfcomponent>
    

The query in the getEmployees function of the CFC is the same query from the inline code except it now accounts for an optional argument named region. You can see that the function returns the query results, using the cfreturn tag, when it is called.

To use this CFC function in a CFM page, simply replace the inline query code with an invocation to the function using the cfinvoke tag as shown in the following code:

        <cfinvoke component="Employee"
   method="getEmployees"
   returnvariable="qEmployees" />
    

        <table border="1" cellpadding="10">
  <tr>
    <td>FIRST NAME</td>
    <td>LAST NAME</td>
    <td>EMAIL</td>
    <td>PHONE</td>
    <td>REGION</td>
  </tr>
  <cfoutput query="qEmployees">
    <tr>
      <td>#qEmployees.FIRSTNAME#</td>
      <td>#qEmployees.LASTNAME#</td>
      <td>#qEmployees.EMAIL#</td>
      <td>#qEmployees.PHONE#</td>
      <td>#qEmployees.REGION#</td>
    </tr>
  </cfoutput>
</table>
    

The cfinvoke tag references the Employee.cfc component without the .CFC file extension and calls the getEmployees method. The returnvariable argument names the data that is returned from the CFC method invocation. This name can then be used in the CFM page to reference the data. Since the returnvariable argument in this case is named the same as the inline query, the HTML and CFML code in the UI table display does not need to change.

Note: See the resources at the end of this article for more information about creating CFCs.

You can access this CFC from a Flex application by simply adding the access property to the cffunction tag as shown in the following code:

        <cffunction name="getEmployees" access="remote">
 ...
</cffunction>
    

Now this CFC function can be used to drive server-side business logic processing for both HTML and Flex applications.

Developing against CFCs using Flash Builder 4

Once you have your CFCs built, you can use them to provide data to your Flex applications.

Although you can use the free, open-source Flex framework SDK (www.adobe.com/products/flex) to build your Flex application, you will find better efficiency in the commercial Adobe Flash Builder 4 tool, formerly known as Adobe Flex Builder. Using this tool, you can connect to remote data services, like ColdFusion CFCs, and simply drag-and-drop the requested data onto UI controls (see Figure 1).

Figure 1. Using CFCs in Flex application development

First, you create the CFC function and set its access property to remote. Then you use the Flash Builder Data Services wizard to connect to the CFC.
The wizard actually goes out, retrieves the CFC, and introspects it by reviewing all of its functions and arguments. It then makes the CFC functions available to you as a data service in a convenient panel in Flash Builder.
Connecting the returned data from the service call is simple. You use the Flash Builder Design mode to lay out your user interface and then simply drag the service from the Data/Services panel and drop it onto the UI element.
Every time you save the MXML file, which is the Flex application source file, Flash Builder will automatically generate a compiled SWF file. This SWF file is the asset that actually goes onto the server and is referenced in the HTML code of your CFML file.
Using your favorite ColdFusion development tool, you embed a reference to the SWF file in the HTML code.

Where to go from here

In this article, you learned why CFCs are a necessary and powerfulpart of the Flex application architecture. You can put this knowledgeinto practice by following the tutorials on the Flex and ColdFusion learning page.

For more information about creating ColdFusion components, refer to the ColdFusion Developer Center and the following resources:

Understanding the role of CFCs in Flex application development

by Trilemetry

Modified

Page tools

Requirements

User level

Encapsulating business logic in CFCs

Developing against CFCs using Flash Builder 4

Where to go from here

More Like This

Tutorials & Samples

Tutorials

Samples

Products

Download

Support & Learning

Buy

Company