Flex: BusyIndicator on top of a button?

Question

I am a newbie to flex, using flex 4.6 with FB 4.7. I am trying to create a BusyIndicator "in front of" (and in the middle of) a Button. I found some examples on Google on image stacking, but for some reason it does not work with a button/indicator combination and I don't know why... I tried using the depth property, but it has no effect, the button appears above the indicator, i.e assuming the indicator is marked by [x]:

[button]
  [x]   <== indicator

What I want is that the indicator will be in front of, and in the middle of, the button:

[bu[x]ton]

Here is the layout I am using:

<s:VGroup width="100%" height="100%" verticalAlign="top" horizontalAlign="center">       
    <s:Button id="mybtn" label="My Inbox" click="onInbox()" depth="1"/>
    <s:BusyIndicator id="myBusyIndicator" rotationInterval="50" depth="2" />
</s:VGroup>

Any ideas how to do this? thanks!

Answer 1

It appears you are misunderstanding what layout groups (VGroup, HGroup, TileGroup) do. They work in 2 dimensions, not three. So by placing two objects in a VGroup, they are stacked vertically along the y-axis, rather than along the z-axis (as you want).

What you want is to just use a simple Group here. Group has no Layout to it (it's the parent for Vgroup, and many other classes for that matter) and so all the positioning is handled by the children, rather than the parent (the Group).

<s:Group>
    <s:Button/>
    <s:BusyIndicator horizontalCenter="0" verticalCenter="0"/>
</s:Group>

That creates a button at level 0, and then places a BusyIndicator at level 1 (1 > 0), and centers it both horizontally and vertically (horizontalCenter and verticalCenter are in pixels from center to their respective axis)