Event issues (not detected)

Question

I'm quite new to Flex and ActionScript, and I'm trying to do an application whose purpose is simply to be able to dynamically create rectangles on a panel: on mouse down the rectangle is created and updated on mouse move events (left button hold down), then the rectangle is achieved with mouse up.

<?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"
                       width="550" height="400"
                       creationComplete="this.onCreationComplete(event);">

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.graphics.SolidColor;

            import spark.primitives.Graphic;
            import spark.primitives.Rect;

            public static const WIDTH:int = 480;
            public static const HEIGHT:int = 300;
            public static const BACKGROUND:int = 0xEFEFEF;
            public static const CURRENT_FILL:SolidColor = new SolidColor(0x00AA00, 0.75);

            protected var rectangles:ArrayCollection = null;

            protected var currentRect:Rect = null;
            protected var dragging:Boolean = false;

            protected function onCreationComplete(event:FlexEvent):void
            {

                this.rectangles = new ArrayCollection();

                this.sprite.graphics.beginFill(BACKGROUND);
                this.sprite.graphics.drawRect(0, 0, this.sprite.width, this.sprite.height);
                this.sprite.graphics.endFill();

                this.sprite.addEventListener(MouseEvent.MOUSE_DOWN, this.onMouseDown);
                this.sprite.addEventListener(MouseEvent.MOUSE_UP, this.onMouseUp);

            }

            protected function onMouseDown(event:MouseEvent):void
            {

                this.currentRect = new Rect();
                this.currentRect.y = 10;
                this.currentRect.height = this.sprite.height - (10 * 2);

                this.currentRect.x = event.localX;
                this.currentRect.width = 1;

                this.panel.addElement(this.currentRect);

                this.dragging = true;

                this.sprite.addEventListener(MouseEvent.MOUSE_MOVE, this.onMouseMove);

            }

            protected function onMouseUp(event:MouseEvent):void
            {
                if (this.dragging)
                {

                    this.sprite.removeEventListener(MouseEvent.MOUSE_MOVE, this.onMouseMove);


                    this.rectangles.addItem(this.currentRect);
                    this.dragging = false;

                }   
            }

            protected function onMouseMove(event:MouseEvent):void
            {
                if (this.dragging)
                {
                    this.currentRect.width = event.localX - this.currentRect.x;     
                }
            }

        ]]>
    </fx:Script>

    <s:Panel id="panel" x="10" y="10" title="Calendar">
        <s:SpriteVisualElement id="sprite" width="{WIDTH}" height="{HEIGHT}" />
    </s:Panel>

</s:WindowedApplication>

All works fine but now I want to do some actions when the user clicks (or double clicks, or what you want) on a rectangle. I tried to add an event on each rectangle (this.currentRect.addEventListener(MouseEvent.DOUBLE_CLICK, myMethod) added in onMouseUp), but the corresponding method is never executed...

What's the problem?

Amy Blankenship Amy Blankenship · Accepted Answer · 2011-10-17T16:19:19

Objects drawn with the graphics API are not event dispatchers. So use addElement to add the Spark primitive rects that you're creating but not using in any way (to a container such a Group) instead of using the graphics api to draw the shapes.

You might find it's better, however, to simply have the ArrayCollection contain a bunch of bindable data objects and use a DataGroup with itemRenderers to display the data.

Event issues (not detected)

2 Answers