Data Binding in Flash MX - Page 3

Fine Tuning Your Output

Our employee list box display showed us an example of a simple data transformation. However, there are many instances when we need to really do something to our data. Perhaps you need to convert your data from feet to miles or days to weeks. For the Employee Management application, we decide that we want to display how many years our employees have been with the company. Unfortunately, the data is stored in months and the bindFormatStrings() cannot process complex data transformations, such as addition and multiplication.

Fortunately there’s another data binding function of DataGlue, bindFormatFunction(). This function will allow us to have more granular control as to how our data is formatted. Instead of passing two formatting strings, we pass a reference to a user-defined function that will control all the formatting. The function definition is shown below:

bindFormatFunction( component, recordset, referenceToFunction )

In Listing 3, our callback function now calls bindFormatFunction() and passes the function reference for a user-defined function called myFormattingFunction().

Listing 3

// getAllEmployees_result (callback function)
//
function getAllEmployees_Result (result) {

	DataGlue.bindFormatFunction( employeesChart,
					  result,
					  myFormattingFunction )

}




// myFormattingFunction (user-defined formatting function)
//
// This function is called for each individual row of data
// in the recordset.  
//
function myFormattingFunction (record) {
	// create an object to return to the component for each
	// row of data	
var returnObj = new Object();

	// Note that you must return an object with Label &
	// Value attributes, but UI components require an object
	// with Label & Data attributes.
	returnObj.label = record.firstName
	returnObj.value = Int(record.monthsWithCompany/12 * 100) / 100;
	
	return returnObj;
}

Behind the scenes, DataGlue loops through the recordset and calls the myFormattingFunction for each row. The record argument contains all the data for the current row being processed. Each column can be accessed by its column name so the data in FirstName column for that row can be accessed as record.firstName.

Also note that the return object can vary. The UI components (ListBox, Tree, etc) accept a return object with a Label attribute for the label field and a Data attribute for the data field. The Charting components, on the other hand, accept an object with a Label attribute for the label field and a Value attribute for the value field. You can change what field the value is assigned to by using the setValueSource() method of the Chart components. This is required when using bindFormatStrings() with Chart components. See Listing 4 shows an example of using bindFormatStrings() with Charting Components.

Listing 4

// getAllEmployees_result (callback function)
//
function getAllEmployees_Result (result) {
	// set Value field to ‘data’
	employeesChart.setValueSource(“data”);
	
	DataGlue.bindFormatStrings( employeesChart,
					 result,
					 “#FirstName# #LastName#”,
 “#MonthsWithCompany#” )

}