Databinding and Components

     

The DataGrid component, which we're going to use to display data in a sortable table, is based on the rather complex DataGrid class, which has 19 events, 31 methods , and 33 properties (attributes) documented. However, all you need to create the sortable table, fully populated with data, as in Figure 23.1, is one method, setDataProvider() ,which sets one attribute: dataProvider . As the name implies, this attribute references an object that provides the data for the DataGrid.

Figure 23.1. A DataGrid component displaying data from the qProducts.cfc Web service.

graphics/23fig01.jpg


The dataProvider attribute is actually a complex object in its own right, with a long list of methods and attributes. However, for our purposes right now, you can think of the dataProvider as an array of objects, with each object representing a row of data. For example, in Figure 23.1, the second row would be represented by the following object:

 {ProductID: 36,    ProductName: "Against a Strong Current",    ListPrice: 8,    Weight: "Mark A. York"} 

NOTE

A row of data in a DataGrid object is officially referred to as an item .


(This data comes from the greendept.mdb database on the CD. To minimize the number of fields in the database, the Weight field was used to hold the author's name. It's not necessary to track weight for books, so instead of creating a separate Author field, the unused Weight field was pressed into service.)

See "Changing Column Headers," page 669 in this chapter, to see how you can change the "WEIGHT" header to display "Author" so that users won't be confused .


Setting the dataProvider property is an example of databinding , because it binds the data source to the DataGrid. You can do databinding purely in ActionScript, or you can use the Component Inspector and not have to code at all.

The ActionScript for databinding is extremely simple. For example, the following line of code sets the dataProvider property for a DataGrid object whose instance name is books_dg . (You can create such a DataGrid object by dragging and dropping a DataGrid component from the UI Components section of the Components panel onto the Stage and typing in books_dg for the Instance Name in the Property inspector.) In the following example, the data will come from the array of objects referenced by the result variable:

 books_dg.setDataProvider(result); 

The result variable must reference an appropriate data source. If it doesn't, most likely you will see nothing in the DataGrid at all. Specifically, result should reference an array whose objects can be interpreted as representing rows of data. Most importantly, in the name/value pairs that make up the object, the names should be the same in each row. Only the values should change from row to row. Thus, in Figure 23.1, the attribute names in every row will be the same: ProductID , ProductName , ListPrice , and Weight . The values associated with the names will change from row to row.

Writing the ActionScript to bind a data source to the dataProvider attribute is easy: One little line of ActionScript, and you're done. Knowing which data source is appropriate for a particular component is not always easy, because you have to understand both the requirements of the component and the data structure of the source. That's where the Component Inspector comes in: It gives you a visual interface that shows you everything you need to know to make intelligent databinding decisions, even if you've never used the component before and/or are not familiar with the data source.

In qProducts.cfc, the getBooks() function returns the results of the qProducts query, which is a recordset. In ActionScript, the recordset becomes an array of objects, in which each object represents a record or row from the database. In other words, the result returned by the getBooks() function is a perfect source for binding to the dataProvider attribute. In the next section, on Flash Remoting, we will take advantage of this knowledge and just use ActionScript to do the binding. In the section on Web services, we'll use the Component Inspector to do the binding, so you'll have a chance to see how that works.



Using Macromedia Studio MX 2004
Special Edition Using Macromedia Studio MX 2004
ISBN: 0789730421
EAN: 2147483647
Year: N/A
Pages: 339

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net