Echo Web Framework

Five buttons contained in an Echo.Column:

Five buttons contained in an Echo.Row:

Columns and Rows

The Echo.Column and Echo.Row layout containers are used to lay out child components in vertical and horizontal series, respectively.

Visual Appearance: By default, an Echo.Column or Echo.Row will offer no appearance of its own: each container will simply render its children in series with no space between them. Both containers offer a fair amount of configurability if desired, with properties to set borders, backgrounds, inset margins, and cell spacing.

Layout Data

The layoutData property of a child component may be configured to specify how the child component is laid out within a row or column. The following properties may be set on the layoutData property to alter a component's appearance within one of these containers:

• background: a color indicating the background to render within the child component's cell.
• backgroundImage: a fill image indicating the background image to render within the child component's cell.
• insets: an inset value specifying an inset margin to place around the child component's cell.
• alignment: an alignment value indicating how the child component should be aligned within it's cell.
• width: an extent describing the width of the cell (applies to Echo.Row only).
• height: an extent describing the height of the cell (applies to Echo.Column only).

Five buttons contained in a Grid
(with size property at default value of 2):

Five buttons contained in a Grid
(with size property set to 4):

Grids

The Echo.Grid component is used to lay out child components in a two-dimensional matrix of cells. Individual components within an Echo.Grid may be configured (by setting their layout properties) to span across multiple horizontal and/or vertical cells.

Horizontally-oriented Echo.Grid
(the default):

Vertically-oriented Echo.Grid

Horizontally-oriented Echo.Grid
with a cell that uses layout data
to span two columns:

Visual Appearance: Like Echo.Rows and Echo.Columns, an Echo.Grid will by default render its content without additional visual trim and with no space between child Components. The component does provide properties to configure borders, default inset margins for cells, overall width and height, and the individual widths and heights of each column and row of cells rendered.

Orientation and Size: Echo.Grids may be horizontally or vertically oriented. A horizontally oriented Echo.Grid will lay out its children from left-to-right (assuming a left-to-right language) and then from top-to-bottom. A vertically oriented Grid will lay out its children from top-to-bottom and then from left-to-right. The size property of a Grid will specify the number of columns/rows to move in the first direction before wrapping to the next row/column.

Layout Data

Like rows and columns, the layoutData property of a child component of a grid may be configured to specify how the child is laid out within it. The following properties may be set on the layoutData property to alter a component's appearance within a grid container:

• background: an color indicating the background to render within the child component's cell.
• backgroundImage: an fill image indicating the background image to render within the child component's cell.
• insets: an insets value specifying an inset margin to place around the child component's cell.
• alignment: an alignment value indicating how the child component should be aligned within it's cell.
• columnSpan: an integer value indicating the number of columns a particular cell should span.
• rowSpan: an integer value indicating the number of rows a particular cell should span.