Purpose

Controls layout in a group is difficult to initially setup and to maintain. Without a layout each control in the group must specify its absolute x,y position in the window. Group layout options (stack, ring, grid, and now table) make controls layout much easier to implement and maintain.

We have added a new layout called TableLayout with features similar to an HTML table; rowSpan, colSpan for instance.

Description of change

We have added an interface for TableLayout() as a group control skin element; e.g., <layout>TableLayout(...)</layout>. 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.