Question

I’m taking my first stab at writing a custom flex 4 component by extending the UIComponent class. Unfortunately, I cannot get the component to respond to any sort of mouse events. I’ve tried setting mouseEnabled to true is the component, as well as setting mouseChildren to true in the parent (the stage object).

It seems whatever I do, my click events can be detected from the stage, but not with the component.

Here is my component class:

package components {

    import mx.core.UIComponent;

    public class DrawCanvas extends UIComponent {

        public function DrawCanvas() {
            super();
        }
    }
}

And here is my WindowedApplication file:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       xmlns:cmp="components.*"
                       minWidth="800" minHeight="600"
                       applicationComplete="init()">

    <fx:Script>
        <![CDATA[
            private function init():void {
                myBox.addEventListener(MouseEvent.CLICK, reportClick);
                stage.addEventListener(MouseEvent.CLICK, stageClick);
            }

            private function stageClick(event:MouseEvent):void {
                trace(event.target, event.currentTarget);
                trace("Stage Click", event.localX, event.localY);
            }

            private function reportClick(event:MouseEvent):void {
                trace(event.target, event.currentTarget);
                trace("Click", event.localX, event.localY);
            }
        ]]>
    </fx:Script>

        <cmp:DrawCanvas id="myBox"
                    height="100%" width="100%"/>

</s:WindowedApplication>

Thanks in advance,

Sam

Answer 1

Component can only dispatch mouse events only by visible parts. As far as your component hasn’t any content it can’t fire mouse events. Try something like:

package components {

    import mx.core.UIComponent;

    public class DrawCanvas extends UIComponent {

        public function DrawCanvas() {
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            graphics.clear();
            graphics.beginFill(0xFFFFFF, 0);
            graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
            graphics.endFill();
        }
    }
}