Introduction
So you¡¯ve ventured into Flash Remoting. You¡¯ve setup your application, your components & maybe you¡¯ve even pulled down data from the server. But now you have to make your data do something. With nearly two dozen components in the Macromedia UI and Charting Component Sets, it may seem as though you¡¯ll have to learn nearly two dozen different methods of adding data to a component. Lucky for you, Macromedia thought ahead and standardized the process to help make Flash MX a true Rapid Application Development tool.
Introduce yourself to the DataGlue class. DataGlue provides a single API to bind data to all components that use recordset data. DataGlue is a simple class that utilizes two functions, bindFormatString() and bindFormatFunction(), to bind and format recordset data. Each one provides unique functionality depending on the complexity of your needs.
Requirements
This tutorial will assume that you have intermediate level knowledge of some type of server side language that supports Flash Remoting (i.e. ColdFusion MX, ASP.NET or Java). Although this tutorial references ColdFusion Components, this tutorial is geared towards the Flash side and can be applied to any server side language mentioned above.
For more information on creating ColdFusion Components, see Ben Forta¡¯s article, Introduction to ColdFusion Components, on Macromedia.com.
This tutorial also assumes a basic knowledge of Flash Remoting, including making server calls as well as how callback functions are used to return data to Flash. Flash Components are also used extensively in this tutorial so a familiarity with components is required as well. You¡¯ll also need the Bar Chart component which can be found in the Charting Components download from the Macromedia Exchange.
For more information on Components, see Jonathan Kaye¡¯s article, ¡°How to Create a Flash MX Component.¡± To learn about Flash Remoting, see Mike Chamber¡¯s article, ¡°Getting Started with ColdFusion MX and Macromedia Flash Remoting.¡±
The Task at Hand
Lets say your boss decides that he wants you to develop an Employee Management application. Not only that, but he wants the interface to be in Flash because of its rich user interface and portability. He also decides that he should use ColdFusion MX as the application server because it¡¯s ease of use and scalability.
What should we do? The first step is to setup a ColdFusion component called Employees.cfc that we will retrieve all the employee information from. For this example, our ColdFusion component only contains a method called getAllEmployees() that returns a recordset of your company¡¯s employees.
Next, we begin designing our Flash interface. For simplicity, we will only add a List Box component, named employeesListBox, to display a simple list of our employees and a Bar Chart component, named employeesBarChart, to allow us to view statistical data on our employees. We also initialize our Flash Remoting parameters and service calls to the Employee.cfc.
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 ¨C 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#¡± )
}
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#¡± )
}Conclusion
We now have a working Employee Management application. Well¡ it is still a little ways from a useful Employee Management application, but we¡¯ve learned to utilize a powerful data binding API with only a dozen lines of code. The DataGlue class gives you the power and flexibility to bind data to components from recordsets in nearly any situation. Whether you need a simple output or a complex formula, DataGlue will let you format your data exactly how you want.
| » Level Intermediate |
Added: : 2002-08-16 Rating: 6.12 Votes: 17 Hits: 1529 |
| » Author |
| Ben Johnson has been programming for seven years and creating web applications for the past two years. He is currently an information architect for Architekture.com, creating web applications using Flash and ColdFusion. |
| » Download |
| Download the files used in this tutorial. |
| Download (0 kb) |
discuss this topic to forum
