22 March 2010
This tutorial is intended for:
In Part 1, you learned how to set up a ColdFusion data source and Flash Builder project. In Part 2, which is optional, you generated the ColdFusion components (CFCs) using ColdFusion Builder. In this section, you will set up a Flash Builder data service project with ColdFusion for use with the Fictitious Sales Planner sample application.
A Flash Builder project is similar to a Dreamweaver site. You create a project to store and organize your code files. Follow these steps to create a Flash Builder project:
Note: We assume that you are working with the standalone (not the plug-in) version of Flash Builder 4. You can install the plug-in version if you are already using Eclipse for your programming environment. However, you will likely see some minor variations in the following steps. We also assume that you have a local, standalone installation of ColdFusion. You may need to make changes to the paths based on your custom installation.
You will get the new project dialog box. Set up your new project as shown in Figure 2:
In the Server technology section of the dialog box, select ColdFusion from the Application server type drop-down menu. (Note that the Use remote object access service check box is selected by default when you select a server technology.)
Follow these steps to configure your Flash Builder project to work with your ColdFusion server:
Figure 3 shows the settings if you are using the default installation of ColdFusion in Standalone mode on a PC.
Note: If you have used the default installation of ColdFusion in Standalone mode for a Mac OS X computer, your ColdFusion settings will likely be:
Note that the location of the Output folder is located within the ColdFusion server web root.
Flash Builder automatically creates a folder named based on the project name and appended with –debug.
In this case, the F4CF_Importing_CFC-debug folder is where Flash Builder will place the compiled Flash SWF and HTML wrapper files.
Note: If you have the default installation of ColdFusion in Standalone mode for a Mac OS X computer, your Output folder setting is likely /Applications/ColdFusion9/wwwroot/F4CF_Importing_CFC-debug.
Remember that Flash source files, unlike ColdFusion source files, are not deployed to the web server.
Instead, you compile the source into a SWF file that is referenced in HTML wrapper files. The SWF and HTML files are uploaded to the server.
You will see the F4CF_Importing_CFC project in the Package Explorer, shown in Figure 4. Note also that the MXML application file with the same name is created and opened for editing. Note that Figure 4 shows the MXML Editor tab in Design mode. Click the Source button below the tab to see the Editor in code view.
The Flex framework provides two programming languages: ActionScript, which is a fully object-oriented language, and MXML, which is an XML-based language with similar syntax to CFML.
Now that your database, data source, and Flash Builder project are set up, you are ready to learn how easy it is to retrieve data from a CFC method and bind it to a Flex user interface element. Time to complete: 5 minutes.
Downloading the ColdFusion component
ColdFusion components are a way of organizing your business logic into reusable code. They were introduced in ColdFusion MX and replace the inline database query construct. In other words, instead of putting a cfquery tag at the top of your CFML page, you invoke the query that is placed into a CFC method, passing in arguments as necessary.
Note: Refer to the article Understanding the role of CFCs in Flex application development for more information on CFCs.
Note: If you generated the CFC's using ColdFusion Builder, then skip to Using the Data Services wizard to import a CFC section. Otherwise, continue with the following steps to download the CFC’s needed to continue with this exercise.
Next, you will import the CFC into the project using the Data/Services view in Flash Builder:
(If the view is not open, select Window > Data/Services.)
Note: You can also select Data > Connect to Data/Service to open the Data Services wizard.
Note: Be sure to have RDS enabled in the ColdFusion Administrator. Remember that the default username is admin.
Flash Builder accesses the CFC, introspects it, and returns information about the available operations and data types associated with those operations. You will see each method in the CFC displayed in the Service Operations window shown in Figure 9.
Flash Builder creates the service. You may see the instructions shown in Figure 10, if you have not previously selected the check box in the lower left corner of the Using Remote Services dialog box.
The rest of this tutorial steps you through these instructions.
Note that the getAllSALESTARGETS() method name is followed by SALESTARGETS. When Flash Builder introspected the CFC and provided information about the methods, it mapped the ColdFusion query that is returned from this operation to an Array data type.
Now that the CFC has been introspected into Flash Builder and the Flash Builder project is set up, you will use the returned data to create a simple employee data display. Time to complete: 5 minutes.
In this section, you will review the SALESTARGETS Data Type within the Data Services view.
Expand the Data Types category in the Data/Services view to see that the SALESTARGETS data type is defined as an object that includes EMAIL, FIRSTNAME, and LASTNAME properties (see Figure 12).
This section demonstrates how to bind the SALESTARGETS data type to a DataGrid component:
Leave the defaults in the Bind to Data dialog window and Click OK.
The DataGrid control now has columns that match the properties in the SALESTARGETS data type. (see Figure 16)
Figure 18 shows the DataGrid control populated with the CFC data. Note that Flash Builder has opened the HTML wrapper file from the F4CF_Importing_CFC folder in the web root.
In this tutorial, you set up the an Apache Derby sample database, and a ColdFusion data source. If you chose to, you generated a CFC using ColdFusion Builder. Then you set up a Flash Builder project to work with ColdFusion server technology. Finally, you experienced how easy it is to retrieve data from a CFC method and bind it to a Flex user interface element. To learn more how to build ColdFusion and Flex applications, visit the Flex and ColdFusion page in Flex Developer Center.