How to find the element offset in a group? - apache-flex

Question

I have a visual element that is nested in two groups. How would I find the X and Y offset of that element from a parent group?
Here is the code:
<group id="rootGroup">
<group id="parentGroup" x="30" y="50">
<button id="myButton" x="40" y="20" />
</group>
</group>
The button position can change over time as well as the parent groups position. So I was trying to use something like localToGlobal.

Answer 1

Below is an example application that shows how to do this. The basic idea is convert the target object's (the button) coordinates to global coordinates with localToGlobal(). Then use globalToLocal() to convert the global coordinates into the desired coordinate space.
The most important step is the first part. To convert the button's coordinates into global coordinates, we actually use the parent of the button -- because the button "exists" in it's parent's coordinate space. This is always a little confusing when I do it :)
Run this app and play with it. To really test it, add one more BorderContainer around the "rootGroup" and offset "rootGroup" by a few pixels so that the root's coordinate space is not the same as the global coordinate space.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="onCreationComplete()">
<fx:Script>
<![CDATA[
private function onCreationComplete():void
{
var p:Point = new Point(childButton.x, childButton.y);
trace(p); // (x=50, y=50)
// convert the button's coordinates to Global coordinate space
// note since the button exists in the parent object's coordinate plane
// you do this conversion using the parent
var global:Point = parentGroup.localToGlobal(p);
trace(global); // (x=151, y=151) <-- 1 extra pixel from border of the BorderContainer
// now that we have global coordinates, use globalToLocal() to convert
// these coordinates into the desired coordinate plane
var rootLocal:Point = rootGroup.globalToLocal(global);
trace(rootLocal); // (x=151, y=151)
var parentLocal:Point = parentGroup.globalToLocal(global);
trace(parentLocal); // (x=50, y=50)
}
]]>
</fx:Script>
<s:BorderContainer id="rootGroup" borderColor="#FF0000">
<s:BorderContainer id="parentGroup" x="100" y="100" borderColor="#00FF00">
<s:Button id="childButton" x="50" y="50" label="Click Me"/>
</s:BorderContainer>
</s:BorderContainer>
</s:Application>