Flex 4 Bubbling custom event

Question

Hi,

How to create a bubbling custom event in Flex 4?

To create and expose a custom event in MXML, you need to declare it at the component that will dispatch the event with this line:

<fx:Metadata>
        [Event(name="select", type="my.engine.events.SelectionEvent")]
</fx:Metadata>

This allows you to:

<my:CustomComponent select="doSomething()"/>

However, how do you make this bubble upwards. I want to do this

<s:DataGroup select="doSomethingForAll();">
   <s:itemRenderer>
      <fx:Component>
         <my:CustomComponent/>
      </fx:Component>
   </s:itemRenderer>
</s:DataGroup/>

Thanks!

Answer 1

One possible solution but not exactly what i was looking for is to add this line of code at the DataGroup level.

this.addEventListener(SelectionEvent.SELECTED, onSelect);

This will ensure all events fired by CustomComponent is cought.

Answer 2

You can either extend s:DataGroup container with specified custom metatag data information built-in into the extended class or you can either call "doSomethingForAll()" method from itemRenderer's "select" event handler, see code below:

<s:DataGroup         
    dataProvider="{instructions}"        
    width="100%">        
    <s:itemRenderer>
        <fx:Component>
            <my:CustomComponent                    
                select="rendererSelect()">
                <fx:Script>
                    <![CDATA[

                        protected function rendererSelect():void
                        {
                            outerDocument.doSomethingForAll();
                        }

                    ]]>
                </fx:Script>
            </my:CustomComponent>
        </fx:Component>
    </s:itemRenderer>                
</s:DataGroup> 

Answer 3

Catch the dataGroups select event and then dispatch a doSomethingForAll()

Make sure the doSomethingForAll event has it's bubbling property set to true.

Then any event listeners listening for doSomethingForAll above it in the display list will get called.