CAAT.Foundation.ActorContainer

Layout

CAAT containers have the abbility of laying out its children automatically. When the container is resized or has children added/removed, it can lay out again based on simple rules its content. Think of it as responsive content.

The container instance relies on objects of type CAAT.Foundation.UI.Layout.LayoutManager for auto layout.

  • CAAT.Foundation.UI.Layout.GridLayout
  • CAAT.Foundation.UI.Layout.BoxLayout
  • CAAT.Foundation.UI.Layout.BorderLayout

Each of these layout objects organize elements differently, but the most important feature is that you can combine them. For example you can have a boxLayout for each element in a GridLayout and the system will conform all its content based on the rules set.

For a complete Layout example see demo29.

LayoutManager

CAAT.Foundation.UI.Layout.LayoutManager is the base class for all the other Layout objects.

It offers the following functionality for all layouts:

Gap

The methods setHGap(number) and setVGap(number) define the distance between any two adjacent Actors in a container.

Padding

The methods setPadding(l,r, t,b) and setAllPadding(number) define container's insets.

GridLayout

This is the simplest layout object, and lays its children in a grid. When the layout object is created, you call new CAAT.Foundation.UI.Layout.GridLayout(rows, columns). If rows set to 0, the layout will create a new objects row every 'column' counted elements. Same when columns is set to 0.

The layout rules will set a container's children bounds based on the container size, and the number of rows/columns needed to fit all its children. Actor's preferred size will be ignored.

In the following example, the left container is laying out 13 elements in 3 rows and 0 columns. That means lay out in a new columns every 3 rows. The right container, on the other hand, is laying 13 elements with 0 rows, and 2 columns, so a new row is created every two elements.

BorderLayout

This layout divides a container's area into 5 sections: left, right, top, bottom and center. The actor added in the center will conform to the remaining space not allocated by the rest of the elements. The container's space will be allocated in the following order: top, bottom, right, left and center.

To add Actors for each of these layout positions, addChild's method constraint parameters must be: "left", "right", "top", "bottom", "center". If no constraint value is set "center" will be assumed.

In this example, two elements are added on "left" and "top" constraints. The interesting part is the "center" contraint, which adds a container with a CAAT.Foundation.UI.Layout.GridLayout layout that conforms a container and its children to the remaining space inside the root container.

BoxLayout

This layout groups elements adjacently, one after the other. It is as an stack but in any direction.

You can select the axis of piling with a call to setAxis( axis ) which accepts values:

  • CAAT.Foundation.UI.Layout.LayoutManager.AXIS.X
  • CAAT.Foundation.UI.Layout.LayoutManager.AXIS.Y

Additionally, this layout can align its contents horizontally and vertically by calling:

setHorizontalAlignment( align )

  • CAAT.Foundation.UI.Layout.LayoutManager.ALIGNMENT.LEFT
  • CAAT.Foundation.UI.Layout.LayoutManager.ALIGNMENT.CENTER
  • CAAT.Foundation.UI.Layout.LayoutManager.ALIGNMENT.RIGHT

setVerticalAlignment( align )

  • CAAT.Foundation.UI.Layout.LayoutManager.ALIGNMENT.TOP
  • CAAT.Foundation.UI.Layout.LayoutManager.ALIGNMENT.CENTER
  • CAAT.Foundation.UI.Layout.LayoutManager.ALIGNMENT.BOTTOM