Binding ColdFusion data to Flex UI components with Adobe Flash Builder 4

Adobe Flash Builder 4 , formerly known as Flex Builder, has a very simple interface for binding server-side data to Flex framework UI controls. Using Design mode, you can drag and drop components to create a layout and bind the data. In a matter of minutes, you will have a dynamically populated application without writing any code.

In this tutorial, you will learn how to use DataGrid and PieChart controls and bind them to the data returned from a ColdFusion Component (CFC) function. You will also learn how to synchronize the data in the two controls.

This tutorial is intended for:

• Developers who are exploring tutorials in the Flex and ColdFusion mini learning center that are based on the Fictitious Sales Planner example
• Experienced ColdFusion developers without previous Adobe Flex framework or Adobe Flash Builder 4 experience
• ColdFusion developers who are familiar with ColdFusion components

As mentioned in the introduction, this tutorial uses the same development environment as Getting started with ColdFusion and Flash Builder 4 and the other tutorials in this series. In this section, you will name a second data type for use with a different service call to a CFC function:

1. Locate the Data/Services view in Flash Builder 4. You should see the F4CF_Getting_Started_Service service shown in Figure 1.

2. In the Data/Services view, right-click the getEmployeeDataByRegion() function of the F4CF_Getting_Started_Service service and select Configure Return Type (see Figure 2).

Each record from the query will be placed in an ActionScript object with each column of data (FIRSTNAME, LASTNAME, EMAIL, and so on) set in a name/value pair. Each record is indexed starting at zero.

Note: Unlike ColdFusion, ActionScript is a zero-indexed language.

Rather than generically referring to the returned data as an object, the wizard lets you to give the data a return type name. You will do this next.

3. In the Configure Return Type dialog box, Click Next to Auto-detect the return type. (see Figure 3).

   Note: This data type differs from the EmployeeSalesData data type defined in the Getting started with ColdFusion and Flash Builder 4 tutorial because this one requires that you supply an argument, named region, to limit the data being returned to employees in a specific region. It also returns fewer columns of data from the database.

4. In the Create New Data type dialog box, in the Enter Value column, type Central (see Figure 4).

You must enter an argument value of Central to return the query results. This is just a mechanism to demonstrate that the query is working correctly so that you can define the return type name for it. In later steps, you will change the code to actually pass the argument value in the application.

5. Click the Yes option to specify that the operation needs remoting credentials.
6. In the Propety type could not be detected dialog box, create a new custom data typenamed EmployeeDataByRegion. (see Figure 5).

7. Click Finish.

You will see the EmployeeSalesDataByRegion data type listed in the Data Types category of the Data/Services view as shown in Figure 6. Note that the properties of the data type are the query columns returned from the CFC method.

The data returned from the CFC contains employee information associated with a region: Northwest, Southwest, Central, Northeast, and Southeast. See Deploying a Flex application with ColdFusion URL variables to learn more about passing dynamic data to an application. In this tutorial, you will hard-code the region value.

In this section, you will bind EmployeeDataByRegion data to a Flex framework DataGrid control. You will not need to write any code to accomplish this, instead you will use a built-in Flash Builder wizard to generate all the code.

Adding a DataGrid control to the layout

You will use the drag-and-drop capabilities in the Flash Builder Design mode to add your DataGrid component:

1. In the F4CF_Getting_Started project, close all open MXML files.
2. Create a new application file by selecting File > New > MXML Application from the menu.
3. Name the file F4CF_Binding_Data and set the Layout drop-down list to None.
4. Click Finish.

   Note: In practice you will usually have only one main application file in a Flash Builder project. You will create a new main application file for each tutorial you follow in this series to avoid creating additional projects.

5. Switch to Design mode.
6. From the Components view, drag a DataGrid control into the Design area (see Figure 7).

Associating data with the DataGrid control

You will now drag and drop the function from the Data/Services view onto your DataGrid control to bind the returned data:

1. Select the getEmployeeDataByRegion() function in the Data/Services view.
2. Drag and drop the function onto the DataGrid control in the Design area.
   Leave the defaults in the Bind to Data dialog box, and Click OK.

   You will be switched to Source mode with the region variable highlighted in the code for the creation of the DataGrid control (see Figure 8).

3. Replace the region variable with a string value of 'Central':

Note: As mentioned earlier, you are setting the getEmployeeDataByRegion() function's attribute, region, to a hard-coded value. See Deploying a Flex application with ColdFusion URL variables to learn more about passing dynamic data to an application.

4. Switch back to Design mode.

   You should see the DataGrid control column titles reflect the bound data (see Figure 9).

5. Click on the DataGrid control and ensure that Editable is set to True within the Properties view (see Figure 10).

6. Save the file and run the application by clicking the round green Run button (see Figure 11) or by selecting Run > Run F4CF_Binding_Data from the menu.

You should see the DataGrid control populated with data from the ColdFusion data source, as shown in Figure 12.

In this section, you will bind data to a Flex framework PieChart control. As with the DataGrid control, you will not need to write any code to accomplish this.

Adding a PieChart control to the layout

Again, you will use the drag-and-drop capabilities in the Flash Builder Design mode to lay out the PieChart control in the application:

1. Ensure that you are in Design mode.
2. From the Charts folder of the Components view, drag and drop a PieChart control onto the screen below the DataGrid control.

   You should see the Create Chart dialog box shown in Figure 14. Note that the Series elements area is pre-populated with an element named Series 1.

   Not all data that is attached to a UI control needs to be displayed. The series property for a PieChart control allows you to define the exact data fields that you want displayed in the chart. You can plot more than one series of data fields on a chart, but you will only use one in this example.

3. Change the ID property from piechart1 to YTDPieChart (see Figure 13).

4. Click OK to add the PieChart control to the display.

Note: You may need to click the Refresh button to the right of the Design mode button to display the chart. You can also double-click the Editor tab that contains the MXML filename to expand and collapse the Design area. If the legend shows up in the upper left corner of the Design mode, drag and drop it next to the PieChart control.

Associating data with the Pie Chart

In this section you will bind data to the PieChart control:

1. In the Data/Services view, drag and drop the same getEmployeeDataByRegion() function that you bound to the DataGrid control onto the PieChart control.

   Note that by dragging a new instance of the getEmployeeDataByRegion() function call to the PieChart control, you are actually calling that function twice in this application: once for the DataGrid control and once for the PieChart control.

   You should see the Bind To Data dialog box (see Figure 14). Note the table under the Configure chart heading with the three columns: Series, Field, and Name.

2. Click the cell within the Field column. You'll see a drop-down list with all the attributes from the function that was dropped on the PieChart control.
3. Select YTD from the drop-down list (see Figure 14).

4. Click OK.

   You will be switched to Source mode with the region attribute highlighted in the getEmployeeDataByRegion() function call of the PieChart control (see Figure 15).

5. Replace the variable region with a string value of 'Central'.

   Note: Remember that we are hard-coding this value for the purposes of the tutorial.

6. Save the file and run the application to see the PieChart control with YTD slices dynamically populated (see Figure 16).

Note: If you do not have a licensed copy of Flex Builder 4 on your system you will see a watermark displayed over the PieChart control.

7. Change the YTD values for any row in the DataGrid control.

Note that there is no change in the PieChart control data. Remember that you made two separate calls to the service and retrieved two separate instances of returned data.

In this section, you will bind the PieChart control to the same data that is bound to the DataGrid control:

1. Return to Design mode.
2. Select the PieChart control. Note the interlocking rings icon at the top left of the control shown in Figure 17. This icon represents data binding.

3. Double-click the data binding icon.

   You should see the Bind Operation dialog box with the message shown in Figure 18.

4. Click OK.
5. In the Bind To Data dialog box, select getEmployeeDataByRegionResult from the Existing call result pop-up list (see Figure 19).

Note that getEmployeeDataByRegionResult is the result data from the service call bound to the DataGrid control, and that getEmployeeDataByRegionResult2 is the result data from the service call bound to the PieChart control.

6. Click OK.
7. Save and run the application.
8. Run the application and change the YTD values for any row as shown in Figure 20. Note that the slices in the PieChart control resize to reflect the change in the DataGrid control values.

Where to go from here

In this tutorial you learned how to use Flash Builder to easily bind server data to your Flex framework components and how doing so can make the components interactive. To learn more about service calls, returned data, and data types, refer to the Generating forms tutorial.

To learn more about how Flex and ColdFusion work together, refer to the following tutorials:

• Creating master/detail forms
• Managing data
• Deploying a Flex application with ColdFusion URL variables