3 Replies Latest reply on Nov 15, 2007 11:45 AM by ntsiii

    Custom Actionscript component

    johnsonj26
      I have created a custom component that extends the canvas class. This component is created dynamically and then dragged in to position by the user. Flexbuilder shows an error on the highlighted lines that set the new x and y coordinates that says "1059: Property is read-only". How do I give my component x,y capability?

      Custom Component Code:

      package components
      {
      import flash.display.DisplayObject;
      import flash.events.Event;
      import flash.events.MouseEvent;
      import mx.containers.Canvas;
      import mx.controls.TextArea;
      import mx.events.FlexEvent;

      public class TextPanel extends Canvas
      {
      public function TextPanel()
      {
      super();
      addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
      }

      private function creationCompleteHandler(event:Event):void
      {
      // Add the resizing event handler.
      addEventListener(MouseEvent.MOUSE_DOWN, resizeHandler);
      }

      private var xOff:Number;
      private var yOff:Number;

      override protected function createChildren():void
      {
      super.createChildren();

      var myTA:TextArea = new TextArea;
      myTA.x = 1;
      myTA.y = 1;
      myTA.width = width - 2;
      myTA.height = height - 8;

      addChild(DisplayObject(myTA));
      }

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

      graphics.clear()
      graphics.lineStyle(2);
      graphics.moveTo(unscaledWidth - 6, unscaledHeight - 1)
      graphics.curveTo(unscaledWidth - 3, unscaledHeight - 3, unscaledWidth - 1, unscaledHeight - 6);
      graphics.moveTo(unscaledWidth - 6, unscaledHeight - 4)
      graphics.curveTo(unscaledWidth - 5, unscaledHeight - 5, unscaledWidth - 4, unscaledHeight - 6);
      }

      // Resize panel event handler.
      private var origWidth:int;
      private var origHeight:int;

      public function resizeHandler(event:MouseEvent):void
      {
      // Determine if the mouse pointer is in the lower right 7x7 pixel
      // area of the panel. Initiate the resize if so.

      // Lower left corner of panel
      var lowerLeftX:Number = x + width;
      var lowerLeftY:Number = y + height;

      // Upper left corner of 7x7 hit area
      var upperLeftX:Number = lowerLeftX-7;
      var upperLeftY:Number = lowerLeftY-7;

      // Mouse positionin Canvas
      var panelRelX:Number = event.localX + x;
      var panelRelY:Number = event.localY + y;

      // See if the mousedown is in the lower right 7x7 pixel area
      // of the panel.
      if (upperLeftX <= panelRelX && panelRelX <= lowerLeftX)
      {
      if (upperLeftY <= panelRelY && panelRelY <= lowerLeftY)
      {


      event.stopPropagation();

      origWidth = width;
      origHeight = height;
      xOff = parent.mouseX;
      yOff = parent.mouseY;
      parent.addEventListener(MouseEvent.MOUSE_MOVE, resizePanel);
      parent.addEventListener(MouseEvent.MOUSE_UP, stopResizePanel);

      }
      }
      }

      private function resizePanel(event:MouseEvent):void {
      //Make sure panel is not sized below minimum width
      if ((origWidth + (parent.mouseX - xOff)) > 30){
      width = origWidth + (parent.mouseX - xOff);
      }

      //Make sure panel is not sized below minimum height
      if ((origHeight + (parent.mouseY - yOff)) > 30){
      height = origHeight + (parent.mouseY - yOff);
      }

      }

      private function stopResizePanel(event:MouseEvent):void {
      parent.removeEventListener(MouseEvent.MOUSE_MOVE, resizePanel);
      }

      }
      }

      Instantiate Component:

      import components.TextPanel;

      private function createTextPanel():void {
      var tp:TextPanel = new TextPanel;

      tp.width = 200;
      tp.height = 100;

      var tpDO:DisplayObject = this.addChildAt(DisplayObject(tp), this.numChildren - 1);
      tpDO.x = this.mouseX = (tpDO.width / 2);
      tpDO.y = this.mouseY = (tpDO.height / 2);
      }