Buttons inside ItemRenderers

[whycantijuzusemyname]

Hi all,

Working on my first Flex app and ran into a small problem:

I have a custom item renderer which I have buttons inside (actually Labels with click events). These are working fine but the problem happens when I want to add another click eventlistener to the whole item renderer itself, so when users click on the item it does something and when users click on the buttons (Labels) inside the item renderer it does something else. What I dont want happening is the item renderer event to trigger when I click on the Labels inside. Currently when I click on the Labels inside I get both events triggering (the click event on the Label, and the other on the item renderer) which makes sense, but I dont want want the item renderer click event to trigger when I click on the Labels, yet a click anywhere else on the item renderer will trigger the item renderer click event.

How can I solve this problem?

Appreciate your help on this..

[Grfx_Guru]

Hi, this is more a bypass than anything, but how about an invisible object inside the item renderer that acts like an invisible background with the click event rather than the item renderer it's self? Just a quick thought to ger around the problem. I used to have to do this all the time in Flash to solve click through issues.  Regards, Peter Witham www.uibuzz.com

[whycantijuzusemyname]

Yeah, I thought of that too. I could do that as a work-around I suppose. In Flash, I thought that if a button is overlapping another button, then just the button that is on top is triggered? Thought it would be the same in Flex.

[Grfx_Guru]

I know that in older versions of Flash it was an issue, but have not used CS4/5 enough to know if they fixed it. I switched RIA production from Flash to Flex around the CS4 time.

Another thought would be to capture the click event and see if the current target is the button inside the item renderer or the renderer it's self and deal with it via code in the method called maybe?

Regards,

Peter Witham

www.uibuzz.com

[Julien_Kronegg · Accepted solution]

When you click on the Label/Button, the event is dispatched to the Label's registered event listeners, then the event bubbles to the parent components (i.e. the event dispatcher look at each parent from the Label if the click event is registered, which is the case for your item renderer).

You should stop the bubbling from being done in your Label's event listener, e.g. by using event.stopPropagation().

Bubbling is well described here: http://www.adobe.com/devnet/flex/videotraining/xml/fiaw_v2_02.html

[Grfx_Guru]

Yup I like the bubbling technique, thanks for sharing.

[whycantijuzusemyname]

thanks Julien,

that solved my problem. the video is a great explanation of how events work, still a bit hazy on the target and currentTarget but it'll come eventually..

[Julien_Kronegg]

A quick tip to remember:

• target is always the object which dispatched the event (i.e. which raised the event, e.g. the clicked Label)
• currentTarget is always the object which listen to the event (i.e. the one on which the addEventListener (or their MXML equivalent) has been done)

From my experience:

• in about 90% of the cases, target is the same as currentTarget because we are in the targeting phase and the object listen to its own events (like your event listener on your Label)
• in about 9% of the cases, we are in the bubbling phase (generally mouse and keyboard events) and target is not the same as currentTarget
• in about 1% of the cases, we are in the capturing phase (typically for glass pane functionalities) and target is not the same as currentTarget