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

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);