Creating ColdFusion Master/Detail forms with Adobe Flash Builder 4

Adobe Flash Builder 4 has a form wizard that lets you quickly build a master/detail interface from server-side data with very little coding. You define the UI control that will display the master list of users to edit, and then you generate a form to display and edit the detail information.

In this tutorial, you will populate a ComboBox control with a data list of employees and customize the display. Next, you will generate a form that presents editable information about a selected employee. Lastly, you implement a button to update the employee's record in the database.

As mentioned in the introduction, this tutorial uses the same development environment as the Getting started with ColdFusion and Flash Builder 4 tutorial and the other tutorials in this series.

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

2. Expand the Data Types category. If you see the EmployeeSalesData data type listed (also shown in Figure 1), then you can skip to the next section, Creating a master control.
   

If you do not see the data type, follow the steps below to assign your own data type name to the returned data that is retrieved in the getAllData() service call to the CFC method.

1. In the Data/Services view, right-click the getAllData() function and select Configure Return Type (see Figure 2).

Each record from the query has been 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.

2. In the Configure Return Type dialog box, create a new custom data type named EmployeeSalesData.
3. Leave the default setting with the radio button selected for the option to Auto-detect the return type from sample data. Check the box to specify that the operation needs remoting credentials. (see Figure 3).

4. Within the Service Authentication window, check the box for Remote Authentication and enter your username and password (see Figure 4).

5. Click Next.

6. Click Ok.
7. Click Finish.

You will see the EmployeeSalesData data type listed in the Data Types category of the Data/Services view (see Figure 6). Note the properties of the data type are the query columns returned from the CFC method.

In this section, you will learn how to populate a ComboBox control with employee sales data to create a master control.

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_Master_Detail.mxml and set the Layout dropdown 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 Flash Builder projects.

5. Switch to Design mode.
6. Locate the Components panel (select Window > Components).

   You will use the ComboBox control for the master user interface element. You could also use the List control or DataGrid control or any other list-based control.

7. Drag and drop a ComboBox control into the Design area (see Figure 7).

Populate the master control with data

You will now use the getAllData() CFC function to display the last name of the employee in the ComboBox control.

1. Drag and drop the getAllData() function of the F4CF_Getting_Started_Service onto the ComboBox control (see Figure 8).

2. In the Bind To Data dialog box that appears, select LASTNAME from the label field popup menu (see Figure 9).

3. Click OK.

Note: You should see the ComboBox control now includes an icon indicating it is bound to data (see Figure 10).

4. Save the file and run the application by clicking the Play (round green) button on the toolbar to the left of the bug button (see Figure 11). (Alternatively, you can select Run > F4CF_Master_Detail.)

5. Click the ComboBox control to change the selected employee information (see Figure 12).

By default the Bind To Data dialog box only lets you bind one field from the database to the ComboBox display. In the case of an employee name, this does not work well because there may be more than one employee with the same first name or last name.

In this section you learn how to bypass this default behavior by implementing an ActionScript function to display both the first name and last name for each employee.

1. In Flash Builder, select the ComboBox control in the Design area and then switch to Source mode.

   Note: The code or control that you have selected in one mode will be selected when you switch to the other mode.

   Note that the ComboBox code defines many properties including the x and y position for the control. The creationComplete property is actually an event that directs the application to retrieve the data from the getAllData() operation that you mapped to the CFC from the Data/Services view earlier. The dataProvider property takes the result of that service call and binds it to the ComboBox control. This property binds and stores all of the columns of data from the database to the ComboBox control, even though only one field is displayed. The curly braces around the value of the dataProvider property tell the application that this value is dynamic.

   The LabelField property declares the variable that is displayed in the ComboBox control. When you selected LASTNAME from the Bind To Data dialog box, the wizard added the LASTNAME field to the LabelField property to tell the ComboBox control to display that value.

   In the following steps, you will use the LabelFunction property to call a custom function that you write to combine the LASTNAME and FIRSTNAME variables in the ComboBox control display.

2. Locate the <fx:Script> tag block.
3. Below the function that populates the ComboBox control, create a private function named displayFullName using the following syntax:

4. The function will return to the ComboBox control a string that contains both the first and the last name of the employee, so add a colon and the word String to the end of the function declaration:

For each employee record that the ComboBox control displays, it will run this function that you just created. Remember that the dataProvider contains all of the data for each employee and that the ComboBox control doesn't know what you want to display so it needs to pass all of the data to you so that you can pick and choose what you want.

The application passes the data to the function in a complex object with name/value pairs. You can name the object anything you want, but the convention is to name it item. You will also data type it as a generic ActionScript Object instance.

5. Between the parentheses of the displayFullName() function, add the item argument and data type it to the Object class:

Now you can combine the first and last name of each employee listed in the database using a simple string concatenation. Remember that the two columns in the database are FIRSTNAME and LASTNAME and are referenced through the item object that is passed to the function.

6. Use the return keyword to return the FIRSTNAME and LASTNAME fields to the ComboBox display; make sure to add a space between the fields so they are displayed conventionally.

7. Locate the ComboBox control MXML code.
8. Delete the labelField="LASTNAME" property.
9. Add the labelFunction property to the ComboBox control tag, setting its value equal to displayFullName.

    

   Your ComboBox control MXML code should look as follows:

Do not use the parentheses for the function in the labelFunction property. You are just providing the name of the function to the ComboBox control, not directly invoking the method.

10. Save the file and run the application.

    The employees' full names are now displayed (see Figure 13).

In this section, you will use the Flash Builder Form Generation wizard to create a detail form that uses the master control (in this case the ComboBox control) as its data provider.

1. Switch to Design mode and select the ComboBox control.
2. Right-click the ComboBox control and select Generate Details Form (see Figure 14).

3. In the Choose source dialog box, leave the default settings and click Next (see Figure 15).

4. In the Property control mapping dialog box, keep the selected values (see Figure 16).

5. Click Finish.
6. Position the Details form to the right of the ComboBox control.
7. Save the file and run the application. You should see the form is populated with information about the first employee in the ComboBox control.
8. Choose an employee from the ComboBox control.

You should see the form populate with the employee sales data for the selected employee (see Figure 17).

In this section you will add a Button control to the interface that will allow users to update the employee information on the server.

1. From the Components view, drag and drop a Button control into the Design area below the Details form.

   Click the refresh button to the right of the Design mode button if the Button does not appear when you drop it.

   If there is not a Submit button which was automatically generated, then drag and drop a Button control from the Components view into the Design area below the Details form.

2. Double-click the Button control and change its label to Update (see Figure 18).

3. Locate the updateItem() function of the F4CF_Getting_Started_Service data service.
4. Drag and drop the updateItem() function onto the Update button (see Figure 19). This associates the updateItem() service operation with the Update button.

If the view does not automatically switch, click the Source button to switch to Source mode.

Flash Builder generates a custom ActionScript click handler function when you drop the updateItem() function onto the Button control.

Flash Builder should have selected the word item between the parentheses of the updateItem() service call:

Note: There are many types of events in ActionScript. The MouseEvent data type for the event argument declares that this code is written for user mouse interactions. For more information about ActionScript events, see the Handling user events and Introducing the event object videos in the Flex in a Week training series.

The fact that the word item is used here is only coincidental to the object name in the ComboBox control. Remember that the CFC defined the name of the expected argument for the updateItem() method as item.

What you want to pass to the updateItem() operation is the service object that contains all of the data passed about the individual employee. This information is stored in the EmployeeSalesData data type that you named earlier.

5. Change the item reference in the service call to employeeSalesData:

This will pass the employeeSalesData object, with all the changes made from the form, back to the server for updating in the database.

6. Save the file and run the application.
7. Select an employee from the ComboBox control.
8. Change the employee's information and click the Update button (see Figure 20).

9. Refresh the browser and select the employee record you edited.

You should see that the employee's information contains the new values you assigned.

Where to go from here

In this tutorial you learned how to use Flash Builder to create a master/detail interface with very little coding. You also learned how to customize the data displayed in a ComboBox control. You can learn more about returned data and data types by exploring the Generating forms with Adobe Flash Builder 4 tutorial.