Grid Layout
Usage | Design-relevant Attributes | Related Controls
Figure 1: Grid layout arrangement of controls |
| The grid layout is an invisible control that helps you in arranging and aligning controls in an application, group or other container in a tabular manner. |
Usage
Note: The grid layout is obsolete - use the form layout, instead.
Use the grid layout to align controls within containers in a tabular fashion. The grid consists of cells that are arranged in rows and columns. Various controls can be added to the cells. You can insert the grid layout into any container control. Especially, use it in groups, tabstrips and trays (iViews). You can also nest grid layouts for arranging page elements on different levels (see example below).
The most common usage of the grid layout is the layout of forms inside containers and the arrangement of different containers. There are two attributes for managing the spacing between rows and columns, cellSpacing and cellPadding. For both of the above cases a cellSpacing of 5 is recommended. There is no need to use cellPadding for these default layouts. See the example below for details.
Note: Currently, it is not possible to achieve the exact paddings and spacings as recommended in the "Layout" section. The suggestions given here are approximations of the optimal layout. Use these values until new controls are introduced, which can deal with the layout issues of the grid and flow layout controls.
When Use the Grid Layout - When Use the Flow Layout
- Use the grid layout to align controls with respect to other
controls in the user interface
Note: Use the form layout instead of the grid layout - Use the flow layout if you do not need to align controls with other elements in your interface; this will enhance performance because the flow layout does not have an overhead of table structures in the rendering
Example
The following example demonstrates how to use the grid layout. First, identify the different areas within your application that need to be aligned. In the example in figure 2 there are two areas, a form area containing the input elements that have to be aligned, and a button row, where buttons have to be added.
Both areas consist of separate grid layouts. The grid at the top contains the form area, the labels, and the input elements. The second grid includes the Save and Cancel buttons. As the spacing between the controls should always be 10px, set the cellSpacing to 5.
Figure 2: Step 1 - grid layout arrangement of inner controls
These two areas should appear below each other. Therefore, you need another grid consisting of one column only and two rows. In the cells you simply add the form area and the button row (see figure 3). This grid does not need additional padding or spacing because the two added areas already have the correct spacing.
Figure 3: Step 2 - grid layout arrangement of areas
Hint: You can temporarily set the attribute debugMode to TRUE to render the grid layout with frames. This helps you in achieving a proper layout (see Control API for Grid Layout for details).
Design-relevant Attributes
You can set the number of columns (columnSize), and the spacing within (cellPadding) and between cells (cellSpacing).
You can also use the Boolean attribute debugMode as an aid for achieving a proper layout. If it is set to TRUE the cell borders are displayed.
For details see page Control API for Grid Layout.