In flex, how to get cooridnates when using VBox for stacking up components?

Question

In flex, I am using VBox & HBox to stack components. When I try to get x,y coordinate of a component, I always get 0. If I specify cooridnate like mx:VBox x="120", then I get the value.

How can I get the coordinate without explicitly stating it.

Answer 1

The X and Y values of a component are always relative to the component's parent. directionsHelp.x and directionsHelp.y will both return the position relative to the VBox containing them which, unless you explicitly set the values or insert other components around it, will be 0 by default.

The thing to remember about localToGlobal() is that you must call it from the child. If you have an Application and you just call localToGlobal( new Point(child.x, child.y) ), it will try to return the given point within the Application relative to the stage (because you haven't specified what "local" is), which will therefore conduct no transformations, and it will therefore stay equal to (0, 0).

If however you call child.localToGlobal( new Point(child.x, child.y) ), it will return the value of the child's position relative to the stage, transforming the given point by however much the child is offset on the stage.

Here's a quick app to demonstrate:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"    backgroundColor="#FFFFFF">
    <mx:Script>
        <![CDATA[
            private function updateCoords():void
            {
                var point:Point = new Point(directionsHelp.x, directionsHelp.y);
                point = directionsHelp.localToGlobal(point);
                directionsHelp.text = "My stage coordinates are ("+point.x+", "+point.y+")";
            }
        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:Box height="100" width="100" borderStyle="solid" borderColor="#000000"
            horizontalAlign="center" verticalAlign="middle">
            <mx:Label text="100 x 100" />
        </mx:Box>
        <mx:VBox>
            <mx:Text id="directionsHelp" color="#4FA4CD" fontSize="8" fontWeight="bold"
                text="Click the button to display my position on the stage." />
            <mx:Button label="Get Position" click="updateCoords()" />
        </mx:VBox>
    </mx:VBox>
</mx:Application>

Answer 2

You can translate the coordinates relatively to the stage. Check out the code below:

var box:VBox = new VBox;
var child:DisplayObject = new DisplayObject;

box.addChild(child);

child.addEventListener(FlexEvent.UPDATE_COMPLETE, updateCompleteHandler);

...

private function updateCompleteHandler(fe:FlexEvent):void{
  // find global coordinates
  var globalCoords:Point = child.localToGlobal(new Point(0,0));

  // coordsInBox is what you are looking for
  var coordsInBox:Point = box.globalToLocal(globalCoords); 
}

The point is to use localToGlobal for the child components and then globalToLocal to translate the global coordinates so that they were expressed relatively to the box container.

Please notice, that the coordinates won't be processed until UPDATE_COMPLETE is called by the child object.