Can not move my custom component based on HGroup - apache-flex

Question

I have created a custom component based on spark.components.HGroup and it works mostly as needed, but I have this minor problem: I can not move it.
Maybe someone will look at my simplified test case below and spot my error?
Here is the screenshot of my 3 custom components, representing chat bubbles:
Here my custom component Bubble.mxml drawing black text on green background:
<?xml version="1.0" encoding="utf-8"?>
<s:HGroup
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
gap="0"
creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private static const PAD:uint = 10;
private static const BGCOLOR:uint = 0xCCFFCC;
private static const BGALPHA:Number = 0.8;
private var _timer:Timer = new Timer(600, 20);
public function init(event:FlexEvent):void {
_timer.addEventListener(TimerEvent.TIMER, fadeBubble);
_timer.addEventListener(TimerEvent.TIMER_COMPLETE, hideBubble);
addEventListener(MouseEvent.CLICK, hideBubble);
}
public function set text(str:String):void {
_text.text = str;
if (x > 100 && x < 200) {
_left.visible = true;
_right.visible = false;
} else {
_left.visible = false;
_right.visible = true;
}
visible = true;
alpha = 1.0;
_timer.reset();
_timer.start();
}
public function get text():String {
return _text.text;
}
private function fadeBubble(event:TimerEvent):void {
if (_timer.currentCount * 2 > _timer.repeatCount)
alpha /= 2;
}
// the argument could be TimerEvent or MouseEvent
public function hideBubble(event:Event):void {
visible = false;
_timer.stop();
}
]]>
</fx:Script>
<s:Graphic id="_left" visible="false">
<s:Path data="M 20 10 L 0 20 L 20 30">
<s:fill>
<s:SolidColor color="{BGCOLOR}" alpha="{BGALPHA}" />
</s:fill>
</s:Path>
</s:Graphic>
<s:Label id="_text" width="100%"
paddingTop="{PAD}" paddingBottom="{PAD}"
paddingLeft="{PAD}" paddingRight="{PAD}"
fontSize="24" textAlign="center"
backgroundColor="{BGCOLOR}" backgroundAlpha="{BGALPHA}" />
<s:Graphic id="_right" visible="false">
<s:Path data="M 0 10 L 20 20 L 0 30">
<s:fill>
<s:SolidColor color="{BGCOLOR}" alpha="{BGALPHA}" />
</s:fill>
</s:Path>
</s:Graphic>
</s:HGroup>
Here is my text application Test.mxml which uses absolute positioning:
<?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"
xmlns:comps="*"
width="700" height="525">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private static const AVATAR:String =
'http://preferans.de/images/70x90/male_happy_70x90.png';
public static function randRange(from:int, to:int):int {
return from + Math.round((to - from) * Math.random());
}
public function chat(event:FlexEvent):void {
_bubble0.y = 340 + randRange(-20, 20);
_bubble1.y = 4 + randRange(0, 40);
_bubble2.y = 4 + randRange(0, 40);
trace('_bubble0.y = ' + _bubble0.y);
trace('_bubble1.y = ' + _bubble1.y);
trace('_bubble2.y = ' + _bubble2.y);
_bubble0.text = _chat.text;
_bubble1.text = _chat.text;
_bubble2.text = _chat.text;
_chat.text = '';
}
]]>
</fx:Script>
<s:Image id="_user0" source="{AVATAR}" horizontalCenter="20" y="340" width="160" height="140" />
<s:Image id="_user1" source="{AVATAR}" left="4" top="4" width="160" height="140" />
<s:Image id="_user2" source="{AVATAR}" right="4" top="4" width="160" height="140" />
<comps:Bubble id="_bubble0" maxWidth="200" x="20" y="340" />
<comps:Bubble id="_bubble1" maxWidth="200" left="170" top="4" />
<comps:Bubble id="_bubble2" maxWidth="200" right="170" top="4" />
<s:TextInput id="_chat" bottom="4" right="4" enter="chat(event)" text="Hello!" />
</s:Application>
In the debug console I do see the varying y coordinates:
_bubble0.y = 350
_bubble1.y = 31
_bubble2.y = 36
_bubble0.y = 340
_bubble1.y = 43
_bubble2.y = 15
but at the screen they never change!

Answer 1

The problem is that _bubble1 and _bubble2 are positioned with constraints (left="170" top="4"). Flex ignores the x and y properties because the constraints have a higher priority than absolute positioning with x and y.
Try removing the left="170" top="4" from both components and you'll see they change positions as expected.
Hope this helps,
Blaze