uiBox

The uiBox component is a layout container that automatically organizes its child objects horizontally or vertically¹⁾.

By using automatic layout, UI objects can be repositioned and resized automatically in response to changes in the text styles, skins, and/or embedded contents. This gives us great flexibility when changing/testing text styles, skins, and/or embedded contents, without having to re-compute desired sizes and positions manually.

NOTE: If you wish to place UI objects manually via the move(x,y) method, use the uiPane container instead.

import com.ghostwire.ui.containers.uiBox;
import com.ghostwire.ui.controls.uiLabelButton;
 
var btn1:uiLabelButton = new uiLabelButton("Button 1");
var btn2:uiLabelButton = new uiLabelButton("Button 2");
var btn3:uiLabelButton = new uiLabelButton("Button 3");
 
var box:uiBox = new uiBox();
box.addChild(btn1);
box.addChild(btn2);
box.addChild(btn3);
 
addChild(box);

By default, child objects are arranged in the order they are added to the container, horizontally from left-to-right.

To arrange the child objects vertically from top-to-bottom in the order they are added to the container, set the vertical property:

box.vertical = true;  // ** change to vertical orientation **

As mentioned above, the child objects are arranged in the order they are added to the container. If for whatever reasons you need to flip this order, set the reversed property to true:

box.reversed = true;  // ** reverse the packing order **

NOTE: Regardless of the packing order, the tab focus chain will still follow the child index order, ie the same order the child objects are added to the container.

By default, child objects are packed with zero gap in-between them. To insert automatic spacing in-between each child object, set the spacing property:

box.spacing = 5; // ** spacing of 5 pixels in-between child objects **

For more information on the members of the com.ghostwire.ui.containers.uiBox class, please refer to the API Reference.