Absolute positioning in Flex?

Question

I need to programmatically add a set of controls with some amount of pixels between them. I can't seem to find how to do this in the Flex docs. How can I do it?

Answer 1

Inside a container with absolute positioning, e.g. Canvas, you can position elements with x and y (or right, left, top, bottom)

elem.x = 100;

elem.y = 200;

canvas.addChild(elem);

Answer 2

Most Containers have some logic to place the items for you, e.g. vertically or horizontally. I.e. if you want to place them horizontally with 5 pixels of space you would use a HBox (VBox for vertical layout):

<mx:HBox horizontalGap="5">
   <Component1/>
   <Component2/>
   <etc.../>
</mx:HBox>

Or script:

...
var box: HBox = new HBox();
box.horizontalGap = 5;
box.addChild(new Component1());
box.addChild(new Component2());
addChild(box);

But if you want to place them yourself using x,y coordinates (i.e. absolute positioning) you can use Canvas:

<mx:Canvas>
   <Component1 x="100" y="100"/>
   <Component2 x="100" y="200"/>
   <etc.../>
</mx:Canvas>

script version:

var canvas: Canvas = new Canvas();
var component1: Component1 = new Component1();
component1.x = 100;
component1.y = 100;
canvas.addChild(component1);
var component2: Component2 = new Component2();
component2.x = 100;
component2.y = 100;
canvas.addChild(component2);

Answer 3

You can also use Spacer to add some space in between components.

<mx:HBox>
   <Component1 />
   <mx:Spacer width="10" />
   <Component2 />
</mx:HBox>

Answer 4

If your window can be re-sized, absolute layout is not recommended - It may be a good idea to use width="100%" and height=100% and then use the minHeight/minWidth/maxWidth etc. In your case, you could set the minimum width/height of the spacer (between 2 components) so that the page scales proportionately.