Using uiBox

When building Flash applications using the Aspire UI library, instead of placing UI elements at absolute positions, we would typically use invisible container boxes to arrange them.

The uiBox is a layout container that automatically organizes its child objects horizontally from left-to-right.

Actionscript 3.0 Example Code

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

If the vertical property of the uiBox container is set to true, it will organize the child objects vertically from top-to-bottom.

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

Notice that the objects are packed with zero gap in-between them by default. Let's give them some spacing.

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

You may use any combination of uiBox instances inside or alongside other uiBox instances to create your desired layout.

// ** create two more buttons **
var btn4:uiLabelButton = new uiLabelButton("Button 4");
var btn5:uiLabelButton = new uiLabelButton("Button 5");
 
// ** pack them in another box **
var innerbox:uiBox = new uiBox();
innerbox.spacing = 2;
innerbox.addChild(btn4);
innerbox.addChild(btn5);
 
// ** add to top-level box container **
box.addChild(innerbox);

Let's keep those top three buttons center-aligned.

// ** keep these buttons center-aligned **
btn1.alignX = ALIGN.CENTER;
btn2.alignX = ALIGN.CENTER;
btn3.alignX = ALIGN.CENTER;

The order you add the objects to the container is important because they will be arranged in the same order. You can use the reversed property to flip the order.

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

Here is the complete final code:

Actionscript 3.0 BoxExample class

 1: package
 2: {
 3:     import com.ghostwire.ui.containers.uiBox;
 4:     import com.ghostwire.ui.controls.uiLabelButton;
 5:     import com.ghostwire.ui.enums.ALIGN;
 6:     import com.ghostwire.ui.managers.uiSkins;
 7:
 8:     import flash.display.Sprite;
 9:     import flash.events.Event;
10:
11:     public class BoxExample extends Sprite
12:     {
13:         public function BoxExample()
14:         {
15:             addEventListener(Event.ADDED_TO_STAGE,init);
16:         }
17:
18:         private function init(evt:Event):void
19:         {
20:             // ** optional but recommended **
21:             stage.scaleMode    = "noScale";
22:             stage.align        = "TL";
23:
24:             // ** uncomment to use "classic" theme **
25:             // uiSkins.initialize("classic");
26:
27:             // ** optional but recommended **
28:             // ** let assets preload before starting application **
29:             uiSkins.manager.addEventListener(Event.INIT,main);
30:         }
31:
32:         private function main(evt:Event):void
33:         {
34:             // ** main application code **
35:             var btn1:uiLabelButton = new uiLabelButton("Button 1");
36:             var btn2:uiLabelButton = new uiLabelButton("Button 2");
37:             var btn3:uiLabelButton = new uiLabelButton("Button 3");
38:
39:             var box:uiBox = new uiBox();
40:             box.vertical = true;  // ** change to vertical orientation **
41:             box.spacing = 5; // ** spacing of 5 pixels in-between child objects **
42:             box.reversed = true; // ** reverse the packing order **
43:             box.addChild(btn1);
44:             box.addChild(btn2);
45:             box.addChild(btn3);
46:
47:             // ** create two more buttons **
48:             var btn4:uiLabelButton = new uiLabelButton("Button 4");
49:             var btn5:uiLabelButton = new uiLabelButton("Button 5");
50:
51:             // ** pack them in another box **
52:             var innerbox:uiBox = new uiBox();
53:             innerbox.spacing = 2;
54:             innerbox.addChild(btn4);
55:             innerbox.addChild(btn5);
56:
57:             // ** add to top-level box container **
58:             box.addChild(innerbox);
59:
60:             // ** keep these buttons center-aligned **
61:             btn1.alignX = ALIGN.CENTER;
62:             btn2.alignX = ALIGN.CENTER;
63:             btn3.alignX = ALIGN.CENTER;
64:
65:             addChild(box);
66:         }
67:     }
68: }

BoxExample.as

By using automatic layout, your UI objects can reposition and resize 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.

The above shows the result when we change the theme to “classic” and modify the text (contents) - the objects are repositioned and resized automatically, maintaining the original layout.