Form Layout
Usage | Design-relevant Attributes | Related Controls
Figure 1: Three form layouts allow to arrange the above form elements and buttons in the manner shown; for details see the example |
|
The form layout is an invisible control for arranging and aligning controls in an application container, group, or other container in a tabular manner. Elements can also be around wrapped within a cell. The form layout replaces the previous grid layout control. |
Usage
Use the form layout to align controls within containers in a tabular fashion. Especially, use it in groups, tabstrips and trays (iViews). The grid defined by the form layout is composed of rows, which contain cells. Thus, rows and columns of the grid are defined implicitly. Cells can span multiple columns. In addition, elements in a cell can wrap around. Various controls can be added to the cells.
You can nest form layouts for arranging page elements on different levels.
When Use the Form Layout
- Use the form layout to align controls with respect to other controls in the user interface. The most common usage of the form layout is: (1) laying out forms inside containers, and (2) arranging different containers or form layouts. See the example below for details and both uses.
- You can also use the form layout if you do not need to align controls with other elements in your interface. In this case, insert only one cell into the respective rows and set the cell's width so that it exceeds the width of the form layout.
Note: The form layout is similar to the grid layout but has more features for adjusting the grid cells. You need not specify a fixed number of rows and columns but simply add rows and cells within rows. The form layout also can wrap around elements in a cell but the flow layout is more efficient for this purpose.
Overview of the Elements and Spacing
The form layout consists of three elements, each of which has a spacing of its own:
- Form: marginBottom, marginLeft, marginRight, marginTop define the spacing in pixels between the border of the form layout and its content area; each margin is set to zero by default.
- Row: paddingBottom, paddingTop define the padding in pixels at the top and bottom of a row; set to zero by default.
- Cell: paddingBottom, paddingLeft, paddingRight, paddingTop define the spacing in pixels between the border of the cell and its content area; set to zero by default.
Figure 2 provides an overview of the different margins and paddings within a form layout:
Figure 2: Overview of the different margins and paddings within a form layout
When adding elements to a form layout, take care that the margins and the padding at the different levels are set to the correct values. When nesting form layouts, the margins at the form level have to be left at the default value of zero in order to avoid additional padding. See the example below for details.
Example
The following example demonstrates how to use the form layout. First, identify the different areas within your application that need to be aligned. In the example in figure 3 there are two areas, a form area containing labels and input elements, and a button row. Both areas are aligned using separate form layouts. The form layout at the top contains the form area, that is, the labels and the input elements. The second form layout includes the Save and Cancel buttons. Then both form layouts are arranged using a third form layout.
Top Form Layout
First create a form layout for the input elements. Set all margins (marginBottom, marginLeft, marginRight, marginTop) at the form level to 5 pixels. Note that the rules for Spacing Between Grouped Controls require a spacing of 10 pixels between the tray border and its content. As 5 pixels are already provided by the tray, the form layout has to provide the remaining 5 pixels at the appropriate borders.
Then add six rows to the top form layout and add two cells to each row except the fifth one for achieving a two column layout. In the fifth row, add only one cell and set colspan=2.
The rules in Spacing Between Single Controls require a spaces of 5 pixels between rows of screen elements. As the top and bottom spacings are already set correctly, set the bottom padding (paddingBottom) to 5 pixels for all but the last row.
Note: There are alternatives for achieving a 5 pixels spacing between rows but this approach seems to be the easiest way to do it.
For achieving the correct horizontal spacing between the labels and their corresponding input elements, do not specify a value for the width of the left cells. Specify a right padding (paddingRight) between 8 and 22 pixels for the left cells, instead. Leave all other cell paddings at their default values of zero.
Finally, add the labels and input elements to the respective cells.
Bottom Form Layout
Create a second form layout for the buttons and set all margins at the form level to 5 pixels. As there are 5 pixels at the bottom of the top form layout and 5 levels at the top of this form layout, you get automatically a spacing of 10 pixels between the bottom input element and the buttons.
Add only one row and two columns for the two buttons to the second form layout. Then add a button to each cell.
Leave the padding at the row and cell levels at their default values of zero, except for the right cell padding of the left cell. Set this padding (paddingRight) to 5 pixels. This ensures the correct horizontal spacing between the two buttons.
Figure 3: Two form layouts are used for arranging the controls
Arranging the Form Layouts
As the two form layouts are to be appear below each other, you need a third form layout that includes both. This outer form layout needs two rows and one cell in each row, resulting in only one column (see figure 4). Simply add the two form layouts to the cells.
Note that this outer form layout must not have additional padding or margins. Therefore, let all four margins at the form level at their default values of zero. Also, leave all other padding values at their defaults.
Figure 4: A third form layout is used for arranging the two areas vertically
Hint: You can temporarily set the attribute debugMode to TRUE to render the form layout with frames. This makes it easier for you to achieve a proper layout (see Control API for Form Layout for details).
Design-relevant Attributes
The form layout has design-relevant attributes on the form level, the row level, and the cell level. There are also some dependencies between the attribute values on the different levels. See figure 2 for an overview of the form layout, its elements and spacings.
Form Level
- marginBottom, marginLeft, marginRight, marginTop: Define the spacing in pixels between the border of the form layout and its content area; each is set to zero by default.
- width: The width can be specified in pixels or percent of the including container width. If the width of a cell is also specified in percent and it exceeds the form layout's width the cell content will be wrapped.
Row Level
- paddingBottom, paddingTop: Define the padding in pixels at the top and bottom of a row; set to zero by default.
Cell Level
- align (LEFT, RIGHT, CENTER, CHAR, JUSTIFY): Defines the horizontal alignment of elements within a cell.
- valign (BASELINE, BOTTOM, MIDDLE, TOP): Defines the vertical alignment of elements within a cell.
- paddingBottom, paddingLeft, paddingRight, paddingTop: Define the spacing in pixels between the border of the cell and its content area; set to zero by default.
- Width: Defines the width in pixels or percent of the form layout. Note that if different widths are specified for a column the last value is used in order to avoid conflicts. Also note that a value exceeding the width of the form layout will cause wrapping behavior.
- colSpan: Defines the horizontal expansion of a cell in columns.
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 Form Layout.