On Sat, 04 Dec 2010, Dadeo suggested that this page needs screenshots of examples of each type of layout

Changelog

GridLayout

GridLayout(int columns, int rows, double horizontalSpacing, double verticalSpacing, Orientation orientation)

To create a group that is designed as a GridLayout, you must use a syntax like this:

<control>
  <description>group</description>
  <type>group</type>
  <posX>543</posX>
  <posY>175</posY>
  <layout>GridLayout(2,2,5,5)</layout>
  <control>
    <type>button</type>
    <id>2</id>
    <label>Button 1</label>
    <hyperlink>2</hyperlink>
  </control>
  <control>
    <type>button</type>
    <id>3</id>
    <label>Button 2</label>
  </control>
  <control>
    <type>button</type>
    <id>4</id>
    <label>Button 3</label>
  </control>
  <control>
    <type>button</type>
    <id>5</id>
    <label>Button 4</label>
  </control>
</control>

RingLayout

RingLayout(int horizontalSpacing, int verticalSpacing)

To create a group that is designed as a RingLayout, you must use a syntax like this:

<layout>RingLayout(5,10)</layout>

StackLayout

StackLayout(int spacing, Orientation orientation, bool CollapseHiddenButtons)

To create a group that is designed as a StackLayout, you must use a syntax like this:

<control>
  <description>group</description>
  <type>group</type>
  <posX>543</posX>
  <posY>175</posY>
  <layout>StackLayout(2,Horizontal,true)</layout>
  <control>
    <type>button</type>
    <id>2</id>
    <label>Button 1</label>
    <hyperlink>2</hyperlink>
  </control>
  <control>
    <type>button</type>
    <id>3</id>
    <label>Button 2</label>
  </control>
  <control>
    <type>button</type>
    <id>4</id>
    <label>Button 3</label>
  </control>
  <control>
    <type>button</type>
    <id>5</id>
    <label>Button 4</label>
  </control>
</control>

TableLayout

The group control can have a TableLayout defined as follows:

TableLayout(int width, int columns, int horizontalSpacing, int verticalSpacing)

Each control contained within the group may have a TableCell defined that specifies how the table cell should be inserted into the table:

TableCell(int colSpan, int rowSpan, int targetCol)

For every control there is a new skin attribute called <layoutDetail> that specifies how that control should be handled in the TableLayout.

Usage:

<layout>TableLayout(width, columns, horizontalSpacing, verticalSpacing)</layout>, all values as integers

• width - the tables overall exact width in pixels
• columns - the number of columns in the table
• horizontalSpacing - the pixel spacing between cells in the same row
• verticalSpacing - the pixel spacing between rows

<layoutDetail>TableCell(colSpan, rowSpan, targetCol)</layoutDetail>, all values as integers

• colSpan - that this control should span 'c' columns
• rowSpan - that this control should span 'r' rows
• targetCol - the column that this control should occupy

Inside the group control (with TableLayout specified) you simply list a series of controls in order of rendering. The TableLayout renderer uses each controls width and height to compute its table cell extent. Each table cell contains one and only one control. On an initial pass the TableLayout renderer determines the appropriate width for each column based on the width of all controls in all rows (the overall table layout is established). Use colSpan and rowSpan (in controls) to control cell layout (similar to how HTML table layout works). In some cases there may be a need to have table cells that contain no control. In this case, rather than specifying a dummy, invisible control you use the targetCol in layoutDetail. For instance; if, in the list of controls in the table, the last control you added was for column 2 in a 3 column table and you need the next control to go into column 2 in the next row then simply specify that need by setting targetCol=2. In this case the renderer will detect that the next column to render is passed the targetCol and so it will position to the next row and move to the desired column. This behavior allows for significant control over white-space in the table.

Only use <layoutDetail> in a control when it is necessary; most controls likely will not need this attribute. Care must be taken to design the table correctly or unexpected results may occur.

In the following image the controls except the General button are organized using TableLayout. Notice the whitespace and the length of column 2.

To create a group that is designed as a TableLayout, you must use a syntax like this:

<control>
  <description>group</description>
  <type>group</type>
  <posX>543</posX>
  <posY>175</posY>
  <layout>TableLayout(995, 4, 2, 2)</layout>
  <control>
    <type>button</type>
    <id>2</id>
    <label>Button 1</label>
    <hyperlink>2</hyperlink>
    <!-- This cell has spans 4 columns. -->
    <layoutDetail>TableCell(4)</layoutDetail>
  </control>
  <control>
    <type>button</type>
    <id>3</id>
    <label>Button 2</label>
    <!-- Default layout is used in this cell.  This cell is the first cell in the 2nd row. -->
  </control>
  <control>
    <type>button</type>
    <id>4</id>
    <label>Button 3</label>
    <!-- This cell has spans 3 columns beginning with the 2nd column in the 2nd row. -->
    <layoutDetail>TableCell(3)</layoutDetail>
  </control>
  <control>
    <type>button</type>
    <id>5</id>
    <label>Button 4</label>
    <!-- This cell spans 4 columns beginning with the 1st column in the 3rd row. -->
    <layoutDetail>TableCell(4, 1, 1)</layoutDetail>
  </control>
</control>