[flexcoders] Binding data and custom components

[Merrill, Jason]

My head is swimming reading the archives and Flex help docs about
binding data to a custom component.  In the simplest form, it's easy
enough for me to do data binding: i.e. set a repeater's dataProvider to
a [Bindable] property.  That works.  The repeater which repeats a series
of Flex checkboxes and auto-updates the number of checkboxes when the
data changes.  Great.  
 
The part I'm struggling with is binding data to custom components.  My
question is really 2-in-1:  
 
1) How to get the custom AS3-written component I wrote to respond to
changes in the data 
2) How to get the inital data into the component without getting the
error: "Cannot access a property or method of a null object reference."
which seems to occur because the method which uses the data is being
called before the data is set.  As you will see in the code below, I
tried setting the data after the creationComplete event is heard, but
that was not enough: 
 
Surely this has been done a gazillion times before.  Below is my lame
attempt to do #2, and only half-way to do #1 since I'm not sure what to
do. My MXML file is shown first, and then the custom AS3 component (both
are written strictly for simplicity):
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute" xmlns:c="components.*" creationComplete="init()">
 <mx:Script>
  <![CDATA[
   [Bindable] 
   private var dataArr:Array;
   
   private function init():void
   {
    dataArr = new Array( {label:"Here"},
          {label:"is"},
          {label:"some"},
          {label:"data."})
   }
   
   private function changeArray():void
   {
    dataArr = [ {label:"Now"}, 
       {label:"there"},
       {label:"is"},
       {label:"a"},
       {label:"new"},
       {label:"set"},
       {label:"of"},
       {label:"data."}];
 
   }
  ]]>
 </mx:Script>
 <mx:Button label="change" click="changeArray()"/>
 <c:BindableListTextAS dataProvider="{dataArr}" x="590" y="100"
backgroundColor="0x666666" width="500" height="400"/>
</mx:Application>
 
/********************************
The BindableListTextAS component:
*/
 
package components
{
 import flash.events.Event;
 import mx.containers.Canvas;
 import mx.controls.TextArea;
  
 
 public class BindableListTextAS extends Canvas
 {
  [Bindable]
  public var dataProvider:Array;
  
  private var tf:TextArea;
  
  public function BindableListTextAS()
  {
   tf = new TextArea();
   addChild(tf)
   addEventListener("creationComplete", showData);
  }
  
  private function showData(e:Event):void
  {
    var dpLen:int = dataProvider.length;
    for(var i:int = 0; i<dpLen; i++)
    {
        tf.text += dataProvider[i].label;
    }
  }
   
 }
}
 

Jason Merrill 
Bank of America 
GT&O L&LD Solutions Design & Development 
eTools & Multimedia 

Bank of America Flash Platform Developer Community