Data Binding in Flash MX - Page 2

Simple Formatting

For our list box component, we will simply display the employee’s first and last name to the user. We will also bind the employee’s Employee ID to each item so it can be referenced when sending data to the server in the future. Although we will not be sending any data to the server, it is best practice to attach an identifier to component items so you will be able to send useful data to the server if the need arises.

For a simple data transformation such as this, DataGlue’s bindFormatStrings() function works great. The function accepts the component to bind to, the data and two formatting strings for the label and data fields of the component:

bindFormatStrings ( component, recordset, labelFormatString, dataFormatString)

The formatting strings use a similar syntax to how ColdFusion outputs variables. Within the string, wrap your recordset column names with pound signs (#) to have them output with data. As DataGlue iterates through the recordset and creates list box items or combo box items, the column names will be replaced with data for the column within each row. The example in Listing 1 shows an example of formatting strings and their respective output for a set of data.

Listing 1 Input data: ROW 1: EmployeeID: 4, FirstName: John, LastName: Doe ROW 2: EmployeeID: 7, FirstName: Jane, LastName: Johnson ROW 3: EmployeeID: 2, FirstName: Jack, LastName: Smith

Example 1
Formatting String: “#FirstName# #LastName#”
Output:
	John Doe
	Jane Johnson
	Jack Smith


Example 2
Formatting String: “#LastName#, #FirstName# (#EmployeeID#)”
Output:
Doe, John (4)
Johnson, Jane (7)
Smith, Jack (2)

Assuming we setup the Flash Remoting parameters correctly and we’ve made our service call to the Employee component’s getAllEmployees() method, the recordset of employees will be sent to our callback function, getAllEmployees_result(). Listing 2 shows the callback function and the call to DataGlue’s bindFormatStrings() method to bind our data to our list box. The bindFormatStrings method will format the list box item’s label to show the first and last name of the employee and will bind the EmployeeID to each list box item.

Listing 2

// getAllEmployees_result
//
// The callback function for the getAllEmployees() Flash Remoting call.
// 
// result – recordset object with columns: EmployeeID
//						   FirstName
//						   LastName
//						   Department
//						   MonthsWithCompany
//
// NOTE: Department & MonthsWithCompany field are not used so they are
//       simply ignored.
//
function getAllEmployees_Result (result) {
	
	DataGlue.bindFormatStrings( employeesListBox,
					 result,
					 “#FirstName# #LastName#”,
					 “#EmployeeID#” )
}