In Aspire, the amount of absolute positioning and sizing in application code that you need to do is minimal. By using layout containers such as the uiBox and layout hints such as “alignX”, “alignY”, “fillX”, “fillY”, “padding” and “margin”, you can easily achieve various types of UI layouts. This is important because as you change text styles, skins, and/or embedded contents, the desired sizes and positions of component instances will likely change. By using automatic layout, your UI components can reposition and resize automatically in response to changes in the text styles, skins, and/or embedded contents.

Take a look at an example:

import com.ghostwire.ui.containers.uiBox;
import com.ghostwire.ui.controls.uiLabelButton;
import com.ghostwire.ui.enums.ALIGN;
 
var btn1:uiLabelButton = new uiLabelButton("Button 1");
 
var btn2:uiLabelButton = new uiLabelButton("Button 2");
btn2.alignX = ALIGN.CENTER;
 
var btn3:uiLabelButton = new uiLabelButton("Button 3");
btn3.alignX = ALIGN.RIGHT;
 
var btn4:uiLabelButton = new uiLabelButton("Button 4");
btn4.fillX = true;
 
var btn5:uiLabelButton = new uiLabelButton("Extra Long Button 5");
 
var box:uiBox = new uiBox();
box.vertical = true;
box.spacing = 5;
addChild(box);
 
box.addChild(btn1);
box.addChild(btn2);
box.addChild(btn3);
box.addChild(btn4);
box.addChild(btn5);

The above will generate the following:

(above is a screenshot of the compiled SWF)

Allocation
Each uiComponent instance added to a layout container is allocated a rectangular space within which it will be constrained - the uiComponent instance will resize and reposition itself based on this allocation. The amount of space that is allocated depends on the desired space of the child component(s) and whether the container can grow/shrink. This is the basic concept behind the layout strategy in Aspire.

“alignX” and “alignY” Properties
Each uiComponent instance has a “alignX” and a “alignY” property. The “alignX” property Indicates how the component would like to be aligned horizontally within its allocated space. The “alignY” property Indicates how the component would like to be aligned vertically within its allocated space. In the above example, Button 2 is aligned center horizontally, and Button 3 is aligned right horizontally.

“fillX” and “fillY” Properties
Each uiComponent instance has a “fillX” and a “fillY” property. The “fillX” property Indicates whether the component should automatically resize itself to fill the allocated space fully horizontally. The “fillY” property Indicates whether the component should automatically resize itself to fill the allocated space fully vertically. In the above example, Button 4 has “fillX” set to “true”, making it resize its width automatically to match the width of its allocated space.

“margin” and “padding” Properties
Each uiComponent instance has a “margin” and a “padding” property. The “margin” property indicates the thickness of the space surrounding the component, while the “padding” property indicates the thickness of the space surrounding any embedded child content of the component. In the above example, the “padding” property of the uiLabelButton instances is automatically set using what is defined in the “rules.xml” file in the theme folder.

Aspire UI Components Trial Version
You may experiment with the various features of the Actionscript 3.0 (AS3) Aspire UI Components by downloading the trial version at http://ghostwire.com/aspireui/download/
* Adobe Flash CS3 is required

Trackback URI | Comments RSS