Event Handling from a custom ItemRenderer event in a DataGroup

I开发者_JAVA百科 have a MXML application with a DataGroup as follows:

<s:DataGroup id="productSelector"
             dataProvider="{products}"
             itemRenderer="renderers.ProductLineupRenderer"
             >
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
</s:DataGroup>

I want to know when items in my itemRenderer are manipulated. I have the itemRenderer class dispatch custom events.

What I used to do is use a mx:repeater:

<mx:Repeater id="r" dataProvider="{configuration.products}">
    <components:ProductEncapsulationView 
                    product="{r.currentItem}"
                    highlightProduct="highlightProduct( event.selectedProduct )"
                    unhighlightProduct="clearHighlight()"
                    selectProduct="makeProductSelection( event.selectedProduct )"
</mx:Repeater>

where I can easily assign events coming from the itemRenderer class into the current view aggregation component. (highlightProduct, unhighlightProduct, selectProduct)

I am unsure of how to do this within a DataGroup or even a List component. But I would like to use DataGroups layouts and other great stuff you get with the spark framework.

Reading from past postings to the Adobe forums (http://forums.adobe.com/message/2902862):

Shongrunden shows how to fire itemRenderer events from the DataGroup object:

<s:ItemRenderer ... click="sendEvent()">
  <fx:Script>
    <![CDATA[
      import spark.components.DataGroup;

      private function sendEvent():void {
        (owner as DataGroup).dispatchEvent(new MyCustomEvent());
      }

    ]]>
  </fx:Script>
  ...
</s:ItemRenderer>

It seems to me that I can get this working by adding custom event handlers during DataGroup.creationComplete and firing them from the itemRenderer as above. Because the repeater example assigns the same handler functionality for each item, it doesn't matter who calls the functions as long as it is executed at that level.

It isn't as MXML-inline as before, requiring more handlers. But it does allow the use of spark components for the example.

This is how I've done it:

    <fx:Script>
<![CDATA[
     import renderers.ProductLineupRenderer;
     import spark.events.RendererExistenceEvent;

     private function onRendererAdd(e:RendererExistenceEvent):void {
          var renderer:ProductLineupRenderer = e.renderer as ProductLineupRenderer;
          renderer.addEventListener("highlightProduct", highlighProduct);
     }

     private function highlightProduct(e:Event):void {
          ...
     }
]]>
</fx:Script>
<s:DataGroup id="productSelector"
             dataProvider="{products}"
             itemRenderer="renderers.ProductLineupRenderer"
             rendererAdd="onRendererAdd(event);">
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
</s:DataGroup>

You can dispatch events from the item renderers that have the bubble property set to true. This means they will reach the datagroup, or the parent of the datagroup where you can add a listener.