Flex - Propagating event from a built-in component to a custom event

Question

I am trying to understand event propagation in Flex framework and have a following doubt on it:

Scenario: I have a built-in component DropDownList on change of which I want to create a custom event refreshPreview and want to propagate it to a custom component PictureComponent.

In the custom component's mxml, I have added the Metadata directive as follows to register a refreshPreview event with the compiler

<fx:Metadata>
    [Event(name="refreshPreview", type="flash.events.Event")]
</fx:Metadata>

Layout Details: In my main mxml application I have laid out DropDownList and the custom component such that both are siblings (i.e. have a common indirect parent) e.g.

<s:Group id="contentGroup">
    <s:Group id="formGroup">
        <s:Form x="11"
                y="86">
            <s:FormItem label="Employee:">
                <!-- Built-in component -->
                <s:DropDownList id="dropDownList"
                                dataProvider="{employeesCollection}"
                                labelField="LASTNAME">
                </s:DropDownList>
            </s:FormItem>
        </s:Form>
    </s:Group>

    <s:Group id="pictureGroup">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <!-- Custom Component -->
        <p:PictureComponent x="360"
                            y="2"
                            employee="{new Employee(dropDownList.selectedItem.ID,firstName.text, lastName.text)}"
                            refreshPreview="picturecomponent1_refreshPreviewHandler(event)">
        </p:PictureComponent>
    </s:Group>
</s:Group>

Also I have added event listeners on the built-in component in the init() method called on creationComplete event:

    // Initializes this component
    private function init():void
    {
        //add event listeners for dropDownList
        dropDownList.addEventListener(IndexChangeEvent.CHANGE, employeeChangeEventHandler);
    }

And here is the event handler for handling the built-in component event and preparing the custom event and dispatching it:

    private function employeeChangeEventHandler(event:IndexChangeEvent):void
    {
        var eventObject:Event=new Event("refreshPreview");
        dispatchEvent(eventObject);
    }

I am seeing that the refreshPreview event is not getting propagated to the custom component.

I doubt this is because the built-in component is a sibling of the target (where the event got generated) and not a parent. If that's the reason could you please help me know how to make refreshPreview event propagate to custom component?

Are you making the call to dispatchEvent from within the PictureComponent? It looks like from your code this is all script that's in the same scope as the MXML above, if that's the case then dispatching the event from that scope isn't correct, you need to give pictureComponent an id and dispatch the event from that object for it to hit your handler. — shaunhusain
@shaunhusain, the dispatchEvent() is called in the dropDownList's change handler. I want the event to be propagated to pictureComponent (that might not necessary mean that the event itself needs to be triggered there) — peakit

Amy Blankenship Amy Blankenship · Accepted Answer · 2012-01-27T16:47:23

Inside your DropDownList MXML, add this:

<s:change>
    dispatchEvent(new Event('refreshPreview', true));//true allows it to bubble out of your View
</s:change>

Note that a Flash event with a string that is not one of the Event Class constants is not a custom Event. It is a Flash Event with a different type parameter. A custom Event would be writing your own Event Class, which you do not need to do.

Note that shaunhusain is correct...the way you have this structured, PictureComponent is not going to respond to an Event in the parent View, but in itself. I wouldn't get in the habit of dispatching events on sibling Views. Instead, I'd have the parent View set some property on the PictureComponent or bind a property in PictureComponent to the selected item in dropDownList.

Flex - Propagating event from a built-in component to a custom event

1 Answers