Question

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

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();
}