Share 'Showcase' on Delicious Share 'Showcase' on Facebook Share 'Showcase' on Google Bookmarks Share 'Showcase' on Twitter

  1. HGroup
  2. HLayout
  3. VGroup
  4. VLayout
  5. Table
  6. DynTable
  7. Comments (3)
  8. Leave a Comment

Showcase

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


3 Comments

  1. Layouts - Flashforum

    19. April 2011

    [...] [...]

  2. Panel

    25. September 2013

    Hello
    Great work. I a just testing this freamowork.

    Some classes are missing so I fugured as3commons-collections-1.3.2 is required to use as3commons-ui-0.3.5-snapshot framweork.

    BTW did you thought about creating Fat SWC – SWC containing documentation?

  3. Vlad

    3. Dezember 2014

    Epic!!!! Thank you very much

Leave a Comment

You have a question or have experienced an issue? Please post it in the forum: http://sibirjak.tenderapp.com/ in order to make the discussion available at a more central place.