Add MXML event listener on component's child

Question

I'm not sure if this is possble, but I would like to add an event listener on a sub component from MXML. Something like this:

My Component

<s:Group>
    <s:Button id="myBtn" label="click me" />
</s:Group>

Main Application

<local:MyComponent>
    <local:myBtn click="doSomething()" />
</local:MyComponent>

I know that I can do this in code, I just want to know if it's possible to do this in MXML. If it's possible, what is the correct syntax?

Answer 1

It is possible, but requires a lot of setup.

First add event metadata to MyComponent:

<s:Group>
  <fx:Metadata>
        [Event(name="click", type="flash.events.MouseEvent")]
  </fx:Metadata>
    <s:Button id="myBtn" label="click me" />
</s:Group>

In theory you should make sure that your component also dispatches the click event; however since click will bubble by default you do not need to do anything else for that event.

Now, your main component will show the event in MXML code hinting, and the compiler will not complain:

<local:MyComponent click="doSomething()>
</local:MyComponent>

Generally, I would not recommend trying to drill down into a component in order to place listeners on events dispatched by a component's children. It is a break of encapsulation. The parent component should not know implementation details of the children.