CODEWITHSUNDEEP
eventsevent-handlingmxmlflex4event-bubbling
Colossal Paul
Colossal Paul

Reputation: 69

Flex 4 Bubbling custom event

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!

Upvotes: 0

Views: 4199

Answers (4)

Cesar
Cesar

Reputation: 11

Your Custom event must extend Event. On constructor you'll find name:string, bubbling:boolean, and cacellable:boolean as arguments.

Set the bubbling parameter to true. In your example, the metadata tag must be in your DataGroup tag.

Upvotes: 1

robmcm
robmcm

Reputation: 891

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.

Upvotes: 0

user238283
user238283

Reputation: 11

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>

Upvotes: 0

Colossal Paul
Colossal Paul

Reputation: 69

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.

Upvotes: 0

Related Questions