The uiBox is a layout container that automatically organizes its child objects horizontally in a row or vertically in a column based on some pre-defined “layout hints”. In this post, we look at some common simple layouts that you can implement using this component.

Basic Layout
Let’s start with a simple layout – three buttons inside a horizontal box, with spacing of 8px in-between and a box padding of 10px on all four sides:

// ActionScript 3.0
var btn1:uiLabelButton = new uiLabelButton("Button One");
var btn2:uiLabelButton = new uiLabelButton("Button Two");
var btn3:uiLabelButton = new uiLabelButton("Button Three");
 
var buttons:uiBox	= new uiBox();
buttons.background	= { color:0xDDDDDD }; // just to show demarcation of the box
buttons.padding		= 10; // 10px padding on all four sides
buttons.spacing		= 8; // 8px spacing in-between child objects
 
buttons.addChild(btn1);
buttons.addChild(btn2);
buttons.addChild(btn3);
 
addChild(buttons);

In this example, we have drawn a gray background on the uiBox container to show its bounds (by setting its background property). However, by default, no background is drawn.

An Enlarged Box
The following shows what happens if the box is enlarged (the width is set to 480px in this example):

buttons.width = 480;

The child objects appear left-aligned. This is because by default, components in the Aspire UI library will request for minimal space even if their parent containers have more space.

“stretch” Example I
To tell a component instance to request for more space than it needs, the “stretch” property is set to true:

btn2.stretch	= true;

The “stretch” property is a layout hint honored by the uiBox class and indicates whether a component instance should request for more space than what it needs. In the above example, btn1 and btn3 requests for minimal space, but btn2 absorbs all the excess space, pushing btn3 to the right side of the box.

If the box is resized, the same layout is maintained:

buttons.width = 400;

The same layout above can be achieved by having btn3 “stretch” instead:

//btn2.stretch	= true; // not stretching btn2
btn3.alignX	= ALIGN.RIGHT;
btn3.stretch	= true;

With the above code, we allocate the excess space to btn3 and tells it to align itself right within its allocated space.

The alignX property indicates the fraction of free horizontal space to the left of the component. A value of 0.0 means no free space to the left, while 1.0 means all free space to the left. A value of 0.5 will place the component in the center. The com.ghostwire.ui.enums.ALIGN class defines the constants ALIGN.LEFT (value of 0.0), ALIGN.CENTER (0.5) and ALIGN.RIGHT (value of 1.0).

Generally, in the Aspire UI framework, containers are responsible only for allocating space and child objects must align themselves within their allocated space.

“stretch” Example II
The following layout can be achieved by setting the “stretch” property of btn1 to true.

btn1.stretch	= true;

Or, alternatively, we can “stretch” btn2 and get it right-aligned within its allocated space:

btn2.stretch	= true;
btn2.alignX	= ALIGN.RIGHT;

“stretch” Example III
The following results if btn1 has its “stretch” property set to true and “alignX” set to ALIGN.RIGHT:

btn1.stretch	= true;
btn1.alignX	= ALIGN.RIGHT;

“stretch” Example IV
Here, we have btn2 always placed in the middle regardless of the size of the box:

btn2.stretch	= true;
btn2.alignX	= ALIGN.CENTER;

Multiple “stretching” Child Objects
If more than one child object has its “stretch” property set to true the excess space will be allocated to them uniformly.

Therefore, to achieve the same result as shown in Example IV above, we can do the following:

btn1.stretch	= true;
btn3.stretch	= true;
btn3.alignX	= ALIGN.RIGHT;

The following shows another layout:

btn1.alignX	= ALIGN.RIGHT;
btn1.stretch	= true;
btn3.stretch	= true;

With the above code, btn1 and btn3 absorbs the excess space available, sandwiching btn2 in the middle.

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework.
You may experiment with the various features by downloading the trial version.

Be Sociable, Share!

• 

Comments RSS