Understanding the role of CFCs in Flex application development
Modified
22 March 2010
Requirements
User level
Beginning
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).
- 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:
- Create Scalable Applications with ColdFusion Components
- Introduction to ColdFusion Components
- Using ColdFusion Components—Properly
More Like This
- Set up and build your first Flex and ColdFusion application – Part 3: Use ColdFusion and Flash Builder 4 to create an application
- Generating ColdFusion forms with Adobe Flash Builder 4
- Deploying a Flex application with ColdFusion URL variables
- Creating ColdFusion Master/Detail forms with Adobe Flash Builder 4
- Set up and build your first Flex and ColdFusion application – Part 1: Database setup
- Getting started with ColdFusion and Flash Builder 4 – Database, CFC, and data services setup
- Sending and receiving mobile text messages with Flex, ColdFusion, and BlazeDS
- Understanding Flex in the client/server model
- Set up and build your first Flex and ColdFusion application – Part 2: Generating ColdFusion components
- Binding ColdFusion data to Flex UI components with Adobe Flash Builder 4
