Question

I have a custom UIComponent that is basically just this:

public class WhiteboardUIComponent extends UIComponent
{
    public function WhiteboardUIComponent() {
        super();
        this.addEventListener(MouseEvent.MOUSE_DOWN, mouseBeginListener);
    }
    public function mouseBeginListener(event:MouseEvent):void {
        trace("Mouse!");
    }
}

I am adding it to my view like so:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mh="*"
    actionBarVisible="false" mouseChildren="true" enabled="true" mouseEnabled="true" >

    <mh:WhiteboardUIComponent id="whiteboard" x="0" y="0" width="100%" height="100%"/>  
</s:View>

This is absolutely the simplest that I could make the example. The s:View is gobbling up my mouse events – if I add a handler in the MXML to the View, I get mouse events just fine. When adding a handler programmatically in my subclass’ constructor, I get nothing. I thought maybe the layout was wrong, so I explicitly set the dimensions of my UIComponent and stuck it in a border just to be sure it was where it was supposed to be – same deal. No events. What’s going on here?

Answer 1

You need to draw something inside your UIComponent. Try the following within your custom WhiteBoard :

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    graphics.clear();

    graphics.beginFill(0xFFFFFF, 0.0000001);

    graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);

    graphics.endFill();
}