[flexcoders] Events, itemRenderers, and the horizontalList control

[burttram]

I have been trying to figure out how to do something and have finally
reached wits end today.  I must be missing some fundamental
understanding of something between events, itemRenderers, and the
horizontalList control...  I am very new to itemRenderers, so I suspect
this is where my problem lies.

Here's what I'm trying to do.  For the sake of example, I would like to
have a horizontalList control that gets dynamically populated with
n-number of interactive controls (all of the same class - for
simplicity's sake, I chose a list control.)  So basically, click on a
button (or other event) and dynamically add a new List control to the
horizontalList's dataProvider.  In order to do that, I have to tell the
horizontalList how to display the new control, which (unless I'm
mistaken) requires an itemRenderer.

Once those dynamic controls are created I need to operate on them
independently, so I'm trying to add an event listener to each of those
controls as they are added.  Seems easy enough using a call to
addEventListener at the time the new dynamic List control is created,
and I can even trap that event in the itemRenderer (or, so I think), by
adding a generic "on change" event handler in the itemRenderer which, in
turns, re-dispatches the original event...

I think this may be where I'm going wrong, however I'm at a loss on how
to achieve what I'd like to accomplish otherwise.

The problem is, the event listener that I added when the dynamic
component was created isn't being recognized, or I'm placing the event
listener on the wrong component.  The event from the itemRenderer
apparently fires, however it's not "heard" by the main application.

Any assistance you guys can provide would be hugely appreciated, I've
been banging my head on the desk for longer than I care to admit on this
and I'm still missing something...

Thanks in advance,
Brian

dynamicLists.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute" creationComplete="init();">
     <mx:Script>
         <![CDATA[
             import mx.events.ListEvent;
             import mx.controls.List;
             import mx.rpc.events.ResultEvent;
             import mx.collections.ArrayCollection;
             import flash.events.Event;
             import flash.events.MouseEvent;

             [Bindable] private var _items:ArrayCollection = new
ArrayCollection(["Item1","Item2","Item3"]);

             private var _listCount:int = 0;

             private function init():void{
              }

             //Add a new list component to the horizontalList control
             private function addListItem(event:MouseEvent):void{
                 _listCount++;
                 addList();
             }

             //Create a new dynamic list control
             private function getNewList():List{
                 var newList:List = new List;
                 newList.id = "dynamicList_" + _listCount;
                 newList.dataProvider = _items;
                 newList.toolTip = newList.id;
                 newList.addEventListener('change', handleListChange);

                 return newList;
             }

             //handle an event change of the list
             private function handleListChange(event:ListEvent):void{
                 trace('... handleListChange from ' +
event.currentTarget.id);
             }

             //add a list to the Horizontal List component
             private function addList():void{
                 itemListAC.addItem(getNewList());
                 trace('Added new List control: ' +
itemListAC[itemListAC.length-1].id);
                
if(itemListAC[itemListAC.length-1].hasEventListener('change')){
                     trace('onChange event listener was successfully
placed on: ' + itemListAC[itemListAC.length-1].id);
                 }else{
                     trace('No onChange event listener was present on: '
+ itemListAC[itemListAC.length-1].id);
                 }
             }
         ]]>
     </mx:Script>
     <mx:VBox width="100%" height="100%" >
         <mx:Button click="addListItem(event)" label="Click to add a new
List (should be identical to the one at the bottom)"/>
         <mx:HorizontalList id="itemsHList" width="100%" height="100%"
itemRenderer="ListIR">
             <mx:dataProvider>
                 <mx:ArrayCollection id="itemListAC">
                  </mx:ArrayCollection>
             </mx:dataProvider>
         </mx:HorizontalList>
         <mx:List id="staticList" dataProvider="{_items}" width="100%"
height="100%" change="handleListChange(event)" toolTip="staticList">
         </mx:List>
     </mx:VBox >

</mx:Application>


ListIR.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="100"
height="300" creationComplete="init()">

     <mx:Metadata>
         [Event(name="change", type="ListEvent")]
     </mx:Metadata>

     <mx:Script>
     <![CDATA[
         import mx.events.ListEvent;
         import mx.collections.ArrayCollection;

         [Bindable] private var _dp:ArrayCollection;
         [Bindable] private var _toolTip:String = 'Item ID';

         private function init():void{

         }

         // the 'data' setter is overridden to create a new
ArrayCollection from the value's dataprovider's source array
         override public function set data(value:Object) : void
         {
             super.data = value;
             this.id = value.id;
             _dp = new ArrayCollection(value.dataProvider.source);
             _toolTip = value.toolTip;
         }

         private function handleListChange(event:ListEvent):void{
             this.dispatchEvent(event);
             trace('ListIR redispatched a ' + event.type + ' event from:
' + this.id);
         }

     ]]>
     </mx:Script>

     <mx:List change="handleListChange(event)" dataProvider="{_dp}"
width="100%" height="100%" toolTip="{_toolTip}"></mx:List>

</mx:Canvas>