This page shows the different layouts of the AS3Commons UI project in action, documents the individual layout properties and gives example code for both the shortcut and the standard syntax.

Using the controls provided in each layout example you may specify:

Minimal or maximal dimensions of the layout
Gaps between items
Align the entire layout
The number and the size of the boxes managed by the layout
Size and alignment of the cell enclosing a particular item

Moving the mouse over the layout displays the current layout structure on top. You can lock this structure by clicking onto the layout and vice versa unlock by clicking again.

HGroup

The HGroup arranges its items horizontally spanning a single row.

LayoutTest.swf?layout=hgroup

Properties

Property
marginX : int = 0
marginY : int = 0
offsetX : int = 0
offsetY : int = 0
minWidth : uint = 0
minHeight : uint = 0
gap : uint = 0
hAlign : String = Align.LEFT
vAlign : String = Align.TOP

Example

var hGroup : HGroup = hgroup(

  "marginX", 20, "marginY", -20,

  "offsetX", -10, "offsetY", 10,

  "minWidth", 100, "minHeight", 100,

  "gap", 10,

  "hAlign", Align.CENTER, "vAlign", Align.MIDDLE,

  new Box(),

  new Box(),

  new Box()

);

hGroup.layout(this);

var hGroup2 : HGroup = new HGroup();

hGroup2.marginX = 20;

hGroup2.marginY = -20;

hGroup2.offsetX = -10;

hGroup2.offsetY = 10;

hGroup2.minWidth = 100;

hGroup2.minHeight = 100;

hGroup2.gap = 10;

hGroup2.hAlign = Align.CENTER;

hGroup2.vAlign = Align.MIDDLE;

hGroup2.add(new Box(), new Box(), new Box());

hGroup2.layout(this);

HLayout

The HLayout arranges its items horizontally spanning a single row. If a max condition is specified (maxContentWidth or maxItemsPerRow or both simultaneously), HLayout creates a new row before each item exceeding that max condition.

LayoutTest.swf?layout=hlayout

Properties

Property
marginX : int = 0
marginY : int = 0
offsetX : int = 0
offsetY : int = 0
minWidth : uint = 0
minHeight : uint = 0
maxContentWidth : uint = 0
maxItemsPerRow : uint = 0
hGap : uint = 0
vGap : uint = 0
hAlign : String = Align.LEFT
vAlign : String = Align.TOP

Example

var hLayout : HLayout = hlayout(

  "marginX", 20, "marginY", -20,

  "offsetX", -10, "offsetY", 10,

  "minWidth", 200, "minHeight", 200,

  "maxContentWidth", 100, "maxItemsPerRow", 2,

  "hGap", 10, "vGap", 5,

  "hAlign", Align.CENTER, "vAlign", Align.MIDDLE,

  new Box(),

  new Box(),

  new Box()

);

hLayout.layout(this);

var hLayout2 : HLayout = new HLayout();

hLayout2.marginX = 20;

hLayout2.marginY = -20;

hLayout2.offsetX = -10;

hLayout2.offsetY = 10;

hLayout2.minWidth = 200;

hLayout2.minHeight = 200;

hLayout2.maxContentWidth = 100;

hLayout2.maxItemsPerRow = 2;

hLayout2.hGap = 10;

hLayout2.vGap = 5;

hLayout2.hAlign = Align.CENTER;

hLayout2.vAlign = Align.MIDDLE;

hLayout2.add(new Box(), new Box(), new Box());

hLayout2.layout(this);

VGroup

The VGroup arranges its items vertically spanning a single column.

LayoutTest.swf?layout=vgroup

Properties

Property
marginX : int = 0
marginY : int = 0
offsetX : int = 0
offsetY : int = 0
minWidth : uint = 0
minHeight : uint = 0
gap : uint = 0
hAlign : String = Align.LEFT
vAlign : String = Align.TOP

Example

var vGroup : VGroup = vgroup(

  "marginX", 20, "marginY", -20,

  "offsetX", -10, "offsetY", 10,

  "minWidth", 100, "minHeight", 100,

  "gap", 10,

  "hAlign", Align.CENTER, "vAlign", Align.MIDDLE,

  new Box(),

  new Box(),

  new Box()

);

vGroup.layout(this);

var vGroup2 : VGroup = new VGroup();

vGroup2.marginX = 20;

vGroup2.marginY = -20;

vGroup2.offsetX = -10;

vGroup2.offsetY = 10;

vGroup2.minWidth = 100;

vGroup2.minHeight = 100;

vGroup2.gap = 10;

vGroup2.hAlign = Align.CENTER;

vGroup2.vAlign = Align.MIDDLE;

vGroup2.add(new Box(), new Box(), new Box());

vGroup2.layout(this);

VLayout

The VLayout arranges its items vertically spanning a single column. If a max condition is specified (maxContentHeight or maxItemsPerColumn or both simultaneously), VLayout creates a new column before each item exceeding that max condition.

LayoutTest.swf?layout=vlayout

Properties

Property
marginX : int = 0
marginY : int = 0
offsetX : int = 0
offsetY : int = 0
minWidth : uint = 0
minHeight : uint = 0
maxContentHeight : uint = 0
maxItemsPerColumn : uint = 0
hGap : uint = 0
vGap : uint = 0
hAlign : String = Align.LEFT
vAlign : String = Align.TOP

Example

var vLayout : VLayout = vlayout(

  "marginX", 20, "marginY", -20,

  "offsetX", -10, "offsetY", 10,

  "minWidth", 200, "minHeight", 200,

  "maxContentHeight", 100, "maxItemsPerColumn", 2,

  "hGap", 10, "vGap", 5,

  "hAlign", Align.CENTER, "vAlign", Align.MIDDLE,

  new Box(),

  new Box(),

  new Box()

);

vLayout.layout(this);

var vLayout2 : VLayout = new VLayout();

vLayout2.marginX = 20;

vLayout2.marginY = -20;

vLayout2.offsetX = -10;

vLayout2.offsetY = 10;

vLayout2.minWidth = 200;

vLayout2.minHeight = 200;

vLayout2.maxContentHeight = 100;

vLayout2.maxItemsPerColumn = 2;

vLayout2.hGap = 10;

vLayout2.vGap = 5;

vLayout2.hAlign = Align.CENTER;

vLayout2.vAlign = Align.MIDDLE;

vLayout2.add(new Box(), new Box(), new Box());

vLayout2.layout(this);

Table

The Table arranges its items horizontally spanning a single row. If a column number is specified (numColumns), Table creates a multi-row table layout.

LayoutTest.swf?layout=table

Properties

Property
marginX : int = 0
marginY : int = 0
offsetX : int = 0
offsetY : int = 0
minWidth : uint = 0
minHeight : uint = 0
numColumns : uint = 0
hGap : uint = 0
vGap : uint = 0
hAlign : String = Align.LEFT
vAlign : String = Align.TOP

Example

var tableLayout : Table = table(

  "marginX", 20, "marginY", -20,

  "offsetX", -10, "offsetY", 10,

  "minWidth", 200, "minHeight", 200,

  "numColumns", 2,

  "hGap", 10, "vGap", 5,

  "hAlign", Align.CENTER, "vAlign", Align.MIDDLE,

  new Box(),

  new Box(),

  new Box()

);

tableLayout.layout(this);

var tableLayout2 : Table = new Table();

tableLayout2.marginX = 20;

tableLayout2.marginY = -20;

tableLayout2.offsetX = -10;

tableLayout2.offsetY = 10;

tableLayout2.minWidth = 200;

tableLayout2.minHeight = 200;

tableLayout2.numColumns = 2;

tableLayout2.hGap = 10;

tableLayout2.vGap = 5;

tableLayout2.hAlign = Align.CENTER;

tableLayout2.vAlign = Align.MIDDLE;

tableLayout2.add(new Box(), new Box(), new Box());

tableLayout2.layout(this);

DynTable

The DynTable arranges its items horizontally spanning a single row. If a max condition is specified (maxContentWidth), DynTable creates a multi-row table layout where no row width exceeds that max condition. Behind this layout lies a rather complex size calculation heuristic that tries to find an optimal number of columns.

LayoutTest.swf?layout=dyntable

Properties

Property
marginX : int = 0
marginY : int = 0
offsetX : int = 0
offsetY : int = 0
minWidth : uint = 0
minHeight : uint = 0
maxContentWidth : uint = 0
hGap : uint = 0
vGap : uint = 0
hAlign : String = Align.LEFT
vAlign : String = Align.TOP

Example

var dynTableLayout : DynTable = dyntable(

  "marginX", 20, "marginY", -20,

  "offsetX", -10, "offsetY", 10,

  "minWidth", 200, "minHeight", 200,

  "maxContentWidth", 100,

  "hGap", 10, "vGap", 5,

  "hAlign", Align.CENTER, "vAlign", Align.MIDDLE,

  new Box(),

  new Box(),

  new Box()

);

dynTableLayout.layout(this);

var dynTableLayout2 : DynTable = new DynTable();

dynTableLayout2.marginX = 20;

dynTableLayout2.marginY = -20;

dynTableLayout2.offsetX = -10;

dynTableLayout2.offsetY = 10;

dynTableLayout2.minWidth = 200;

dynTableLayout2.minHeight = 200;

dynTableLayout2.maxContentWidth = 100;

dynTableLayout2.hGap = 10;

dynTableLayout2.vGap = 5;

dynTableLayout2.hAlign = Align.CENTER;

dynTableLayout2.vAlign = Align.MIDDLE;

dynTableLayout2.add(new Box(), new Box(), new Box());

dynTableLayout2.layout(this);

Russischer Bär Open Source Flash

AS3Commons UI

Showcase

HGroup

HLayout

VGroup

VLayout

Table

DynTable

1 Comment

Layouts - Flashforum

Leave a Comment