FLEX: UIComponent Click Handler??

Question

Hello,

Thanks for reading.

I'm trying to put a label and an image on a UIComponent, side-by-side. I want to use UIComponent for efficiency reasons, and the entire component is more complicated than just a button with an icon.

I'm trying to get a click handler on ther entire UIComponent so that when a click happens on either the label or the image, the same [click] event handler is called. If I add a click handler on the root component, it works, but when I introduce space between the label and the image, the space between them becomes un-clickable. I produce the space by using the move(x,y) method for the label and the image with a small gap between the x/y coordinates.

Any ideas how to remedy this?

Thanks.

Answer 1

You could try mx:Spacer instead? UIComponent isn't a container though, that might be your problem. Instead of using UIComponent, you could try to extend mx.core.Container. But try the spacer first.

Edit: The more I think about this the more I think the spacer will work. For the UI component click handler, what is really happening is the individual elements in the UI component are registering clicks and they are bubbling up. With you doing a move, like the other answer suggested, there really isn't anything there to register the click. The spacer should solve that problem, and easier.

Answer 2

I think that a UI component suffers from the same problem that the canvas (which extends from the UI component) does when handling clicks. When you click on a canvas nothing happens unless you give that canvas a background, even if you set the alpha to 0 (fully transparent). This is a bug that Adobe knows about but hasn't fixed yet, the idea being that having no BG actually means that there is nothing there. Just giving it that background makes it clickable. Now unfortunately the UIComponent does not have any background styles, can you switch to a canvas? Another alternative might be to include an image in the UIComponent, set the alpha of that to 0 and the height and width to 100%

Answer 3

With regard to invertedSpear's answer it is not a bug, it is known behaviour. There are situations when you do not want a container's background to capture clicks and this behaviour allows you to control that.

invertedSpear is correct that the UIComponent does not handle its own background styles. You can draw your own transparent background to capture the mouse events:

override protected function updateDisplayList(w:Number, h:Number):void
{
    super.updateDisplayList(w, h);

    var g:Graphics = this.graphics;
    g.clear();
    g.beginFill(0xFF0000, 0); // Fully transparent colour.
    g.drawRect(0, 0, w, h); // Draw to the full size of the UIComponent.
    g.endFill();
}