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 beta tools that can help you work with CFCs during Flex application development.

Encapsulating business logic in CFCs

Many ColdFusion developers program their applications in a procedural manner. In other words, they write their CFML code so that the ColdFusion server processes it from top to bottom. The following code represents a typical procedural 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 procedural 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 procedural 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 procedural 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 beta

You can use any code editor to create your CFC. You can also create your Flex applications using the free, open-source Flex framework SDK and any code editor your prefer. However, Flash Builder 4 beta will greatly improve your efficiency for Flex application development, especially if you are using CFCs for the server-side logic.

Figure 1 shows the workflow for using CFCs in Flex application development.

Figure 1. Using CFCs in Flex application development

1. First, you create the CFC function and set its access property to remote. Then you use the Flash Builder beta Data Services wizard to connect to the CFC.
2. 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.
3. Connecting the returned data from the service call is simple. You use the Flash Builder beta 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.
4. Every time you save the MXML file, which is the Flex application source file, Flash Builder beta 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.
5. Using your favorite ColdFusion development tool, you embed a reference to the SWF file in the HTML code.

Communicating between SWF and CFC files at runtime

A ColdFusion driven Flex application will likely include at least three files:

• A CFC file with functions that contain the server-side business logic for the application
• A SWF file that has been compiled with the UI for the Flex application
• A CFM file that embeds the HTML to reference the SWF file and additional ColdFusion/HTML content as appropriate

The production setup for these files is similar to the setup for any ColdFusion driven web application: You move these files to the server, define a data source to connect to the database, and set up any other server-side resources that are necessary for the business logic in the CFC.

Figure 2 illustrates what happens when a user requests the CFM page that contains the Flex application.

Figure 2. Accessing CFCs at runtime from a Flex application

1. When the user requests the CFM page, the ColdFusion server locates the file and begins to process it.
2. The CFM page can be built procedurally with all of the code inline or it can be built to request functions from a CFC.
3. The business logic in the CFC can access system resources like the database, mail server and file system.
4. The CFM page uses the CFC data to generate the HTML dynamic display, which includes a reference to the SWF file.
5. After the SWF file is displayed on the web page, it can access the CFC functions directly. This is extremely powerful because it allows for dynamic content to update the user interface without refreshing the HTML page.

Where to go from here

In this article, you learned why CFCs are a necessary and powerful part of the Flex application architecture. You can put this knowledge into practice by following the steps in any of the tutorials in the Getting Started section of the Flex and ColdFusion learning page. Consider starting with the Getting started with ColdFusion and Flash Builder 4 beta tutorial.

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

• Create Scalable Applications with ColdFusion Components
• Introduction to ColdFusion Components
• Using ColdFusion Components—Properly

About the author