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

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?

Answer 1

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.