3 Replies Latest reply on Oct 22, 2011 9:44 AM by Shongrunden

    Event issues with Spark Rect

    jroy-54200

      Hi,

       

      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 (Spark Rects) 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. Here is the code:

       

      <?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.currentRect.addEventListener(MouseEvent.RIGHT_CLICK, this.onMouseRightClick);

                                                            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;

                                                  }

                                        }

       

                        protected function onMouseRightClick(event:MouseEvent):void

                        {

                              trace("Right click");

                        }

       

          

                              ]]>

                    </fx:Script>

          

                    <s:Panel id="panel" x="10" y="10" title="Calendar">

                              <s:SpriteVisualElement id="sprite" width="{WIDTH}" height="{HEIGHT}" />

                    </s:Panel>

          

          </s:WindowedApplication>

       


      The sprite is used only for drawing some shapes in background, the created Rects are added to the Panel using addElement. All works fine but now I want to do some actions when the user right clicks on a rectangle. I tried to add an event listener on each created rectangle (see the comment in onMouseUp), but the corresponding method is never executed...

      What's the problem?
      Thanks...