0 Replies Latest reply on Apr 21, 2010 1:59 AM by Adil_Saeed

    Auto-Resizing of objects when their position is changed.

    Adil_Saeed

      Hello,

           Is there a way that when the position of any child is changed in a Canvas container, the other children of the container autoresize themselves? For example I have the following code:

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application

       

       

      xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

       

       

      <mx:Script>

      <![CDATA[

       

      import mx.containers.Canvas;

       

      import mx.controls.Alert;

       

      import mx.events.DragEvent;

       

      import mx.collections.ArrayCollection;

       

       

      public var canvas:Canvas;

       

      public var canvasOne:Canvas;

       

      public var canvasTwo:Canvas;

       

       

      private function init():void

      {

       

      canvas =

       

      new Canvas();

      canvas.height = 50;

      canvas.percentWidth = 100;

       

      //canvas.width = 200;

      canvas.setStyle(

       

      "backgroundColor" , "#FF0000");

      canvas.setStyle(

      "cornerRadius","9");

      canvas.setStyle(

      "borderStyle","solid");

      canvas.setStyle(

      "borderColor","#000000");

      canvas.addEventListener(MouseEvent.MOUSE_DOWN , onMouseDown);

       

       

      canvasOne =

      new Canvas();

      canvasOne.percentWidth = 100;

       

      // canvasOne.width = 300;

      canvasOne.height = 200;

      canvasOne.setStyle(

       

      "backgroundColor" , "#00FF00");

      canvasOne.setStyle(

      "cornerRadius","9");

      canvasOne.setStyle(

      "borderStyle","solid");

      canvasOne.setStyle(

      "borderColor","#000000");

       

      canvasOne.addEventListener(MouseEvent.MOUSE_DOWN , onMouseDown);

       

      canvasTwo =

      new Canvas();

      canvasTwo.percentWidth = 100;

      canvasTwo.height = 50;

      canvasTwo.setStyle(

      "backgroundColor" , "#0000FF");

      canvasTwo.setStyle(

      "cornerRadius","9");

      canvasTwo.setStyle(

      "borderStyle","solid");

      canvasTwo.setStyle(

      "borderColor","#000000");

      canvasTwo.addEventListener(MouseEvent.MOUSE_DOWN , onMouseDown);

       

       

      this.mainBox.addChild(canvas);

       

      this.mainBox.addChild(canvasOne);

       

      this.mainBox.addChild(canvasTwo);

       

       

       

      }

       

       

      private function onMouseDown(event:MouseEvent):void

      {

      (event.currentTarget

       

      as Canvas).addEventListener(MouseEvent.MOUSE_MOVE , onMouseMove);

       

      }

       

       

      private function onMouseMove(event:MouseEvent):void

      {

      (event.currentTarget

       

      as Canvas).startDrag();

      (event.currentTarget

      as Canvas).addEventListener(MouseEvent.MOUSE_UP , onMouseUp);

      }

       

       

      private function onMouseUp(event:MouseEvent):void

      {

       

       

      var can:Canvas = event.currentTarget as Canvas;

      (event.currentTarget

      as Canvas).stopDrag();

      (event.currentTarget

      as Canvas).removeEventListener(MouseEvent.MOUSE_MOVE , onMouseMove);

      (event.currentTarget

      as Canvas).removeEventListener(MouseEvent.MOUSE_UP , onMouseUp);

       

      }

       

      ]]>

       

      </mx:Script>

       

       

      <mx:Canvas clipContent="true" id="mainBox" backgroundColor="#FFFFFF" width="400" height="400" borderStyle="solid" borderColor="#000000" horizontalCenter="0" verticalCenter="0" autoLayout="true" horizontalScrollPolicy="off" verticalScrollPolicy="off">

       

       

       

      </mx:Canvas>

       

      </mx:Application>

       

      This is the code which has a main canvas container. It has three child canvas as its children. Now when I drag one canvas over another, is there any way that their width auto divides according to their position i.e if none overlaps, the width of all children is 100%. If one overlaps another, they should share the available width of the container.