Set up and build your first Flex and ColdFusion application – Part 3: Use ColdFusion and Flash Builder 4 to create an application

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:

1. Open Flash Builder 4.

   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.

2. Select File > New > Flex Project as shown in Figure 1.

You will get the new project dialog box. Set up your new project as shown in Figure 2:

• Name the project F4CF_Importing_CFC.
• Be sure to use the default location for this example.

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.)

• Select the ColdFusion Flash Remoting option.

3. Click Next.

Follow these steps to configure your Flash Builder project to work with your ColdFusion server:

1. In the Configure ColdFusion Server dialog box, select the options for your ColdFusion installation type.

   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:

• ColdFusion root folder: /Applications/ColdFusion9
• Built-in ColdFusion web server web root: /Applications/ColdFusion9/wwwroot
• Built-in ColdFusion web server root URL: http://localhost:8500

2. Click the Validate Configuration button to ensure that the settings are correct.

   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.

3. Click Finish to create the Flash Builder project.

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.

Introspect and import a CFC

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.

1. Download and unzip the provided f4cf_ generated_cfcs.zip file on your local disk if you haven’t done so already.
2. Move the F4CF_FictitiousSalesPlanner folder to the \\wwwroot directory.

Using the Data Services wizard to import a CFC

Next, you will import the CFC into the project using the Data/Services view in Flash Builder:

1. Locate the Data/Services view in Flash Builder shown in Figure 5.

   (If the view is not open, select Window > Data/Services.)

2. Click the Connect to Data/Service link to run the Data Services wizard.

   Note: You can also select Data > Connect to Data/Service to open the Data Services wizard.

3. Select ColdFusion for the service type (see Figure 6).

4. Click Next.
5. For CFC Location, browse to C:\ColdFusion9\wwwroot\F4CF_FictitiousSalesPlanner\SALESTARGETSService.cfc and Click Open. See Figure 7.

6. Click Next.
7. In the Remote Service Authentication dialog box, shown in Figure 8, enter your RDS username and password.

Note: Be sure to have RDS enabled in the ColdFusion Administrator. Remember that the default username is admin.

8. Click OK.

   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.

9. Click Finish.

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.

• Click OK to dismiss the Using Remote Services dialog box.
• Locate the Data/Services view to see the CFC operations shown in Figure 11.

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.

Reviewing the data types

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).

Binding data to a Flex component

This section demonstrates how to bind the SALESTARGETS data type to a DataGrid component:

1. Switch to Design mode in Flash Builder by clicking the Design button below the Editor tab (see Figure 13).

2. Locate the DataGrid control of the Components view (see Figure 14).

3. Drag and drop the DataGrid component into the Design view of the F4CF_Importing_CFC.mxml file as shown in Figure 15.

4. Drag and drop the getAllSalesTargets() CFC function from the Data/Services view onto the DataGrid control to populate it with the SALESTARGETS data type.

   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)

5. Select File > Save to save the MXML file.
6. Click the Run (green round) button to test the file (see Figure 17).

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.

Where to go from here

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.