7.11 Databinding

Chapter 3 discusses databinding Remoting RecordSet results to UI components using ActionScript DataGlue and DataProviderClass objects. Databinding is a powerful technique for streamlining Flash and server application integration.

Most enterprise Java applications encapsulate data access in a layer that hides JDBC code from business application classes. The data access layer accepts and returns business objects instead of JDBC ResultSets , which means that Remoting services in Java usually send collections of objects back to Flash instead of sending ResultSets . Collections of objects in Java become arrays of objects in Flash.

It would be great to be able to databind arrays of objects using DataGlue , just as we do RecordSets . Fortunately, this is quite easy with a class that extends the DataProviderClass implementation, RsDataProviderClass , that comes with the Flash Remoting components. The custom ArrayDataProvider , shown here, extends RsDataProviderClass by defining a constructor that takes an array as an argument and by defining a method, addAll( ) , that calls the RsDataProviderClass implementation of addItem( ) to add each object in the array to the data provider:

 #include "RsDataProviderClass.as" _global.ArrayDataProvider = function (list) {   this.init( );   this.addAll(list); }; //   ArrayDataProvider   subclasses (i.e., extends)   RsDataProviderClass   . ArrayDataProvider.prototype = new RsDataProviderClass( ); ArrayDataProvider.prototype.addAll = function (list) {   if (list != null && list.length != 0) {     for (var i = 0; i < list.length; i++) {       this.addItem(list[i]);     }   } }; ArrayDataProvider.prototype.checkLocal = function ( ) {   return true; }; 

In your client-side ActionScript, you can use ArrayDataProvider with DataGlue to bind an array of objects to a UI component with DataGlue.BindFormatStrings( ) . Use the object property names as the values in the format strings. The following example uses ArrayDataProvider to bind an array of users to a ListBox component named lb_users :

 #include "DataGlue.as" #include "ArrayDataProvider.as" // Define   User   class. User = function (username, realname) {   this.username = username;   this.realname = realname }; // Create an array of Users. var users = new Array( ); users.push(new User("mike", "Mike Wynholds")); users.push(new User("sam",  "Sam Borgeson")); users.push(new User("don",  "Don Thompson")); users.push(new User("alon", "Alon Salant")); // Create a data provider with the array. var dataprovider = new ArrayDataProvider(users); // Associate (glue) the array of Users to the ListBox component (   lb_users   ). DataGlue.BindFormatStrings(lb_users, dataprovider,                            "#realname# (#username#"), "#username#"); 

To use the ArrayDataProvider class to glue Remoting service results to UI components, create the data provider and bind the array in the service call result handler. The following example demonstrates calling a Remoting service method, service.getAllUsers( ) , and databinding the results of the service call to the lb_users ListBox component using ArrayDataProvider :

 service.getAllUsers( ); function getAllUsers_Result (users) {   trace("getAllUsers_Result:" + users);   var dataprovider = new ArrayDataProvider(users);   DataGlue.BindFormatStrings(lb_users, dataprovider,                              "#realname# (#username#"), "#username#"); }