Archive

Posts Tagged ‘floating control’

Move child of container anywhere

December 20, 2009 Leave a comment

Are you the one who faced tough times when you had to move child of container somewhere else than the position it has to be laid out and ended up using Canvas container . Consider the scenario, you have a VBox container and it contains three children. Now if you would like to position third child wherever you click within the container. Is it possible unless it is a canvas container ?. If you say, we cant, still it has logic as we all know the container and it sub-classes layout the component based on its layout behavior and it wont bent down as we wish to place the control.

But its certainly possible. Set the includeInLayout property of child (you want  to move around) to false and set the x and y position of child by invoking move method on the child control. It will be laid out as we intended. The reason behind the trick is, if you make the includeInLayout property of the control to false, it wont be considered when the container lays out the children and it will leave you to take care of the positioning of control. Thats how it works, got it ???.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onInit()" layout="vertical">

    <mx:Script>
        <![CDATA[

            protected function  onInit():void
            {
                container.addEventListener(MouseEvent.CLICK, onMouseClick);
            }

            protected function onMouseClick(event : MouseEvent):void
            {
                floatMe.move(event.localX, event.localY);
            }

        ]]>
    </mx:Script>

    <mx:VBox id="container"  width="350" height="150" backgroundColor="#FFFFFF"
        borderStyle="solid" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        <mx:Button id="floatMe" label="Wanna place me here" includeInLayout="false" />
    </mx:VBox>

</mx:Application>