Form items / Form tags |
Hbox tags group several item tags within the same horizontal layout box, in a grid-based container.
An hbox tag defines the position and size in a GRID container for an horizontal box containing several leaf form items. The elements in the hbox tag can use additional alignment rules to get the required visual affect.
[ element: [...] ]
{ identifier [-] | string-list }
{ string-literal | spacer } [...]
Hbox tags are provided to control the alignment of form items in a grid. Hbox tags allow you to stack form items horizontally without the elements being influenced by elements above or below. In an hbox, you can mix form fields, static labels and spacers. A typical use of the hbox is to have zip-code / city form fields side by side with predictable spacing in-between.
An hbox tag is delimited by square braces ([]) and must contain at least one string-list or an identifier preceded or followed by a colon (:). A string-list is combination of string-literals (quoted text) and spacers (blank characters). The delimiter for hbox tag elements is the colon.
Hbox tags are not allowed for fields of screen arrays; you will get a form compiler error. The client needs a matrix element directly in a grid or a scrollgrid to perform the necessary positioning calculations for the individual fields.
GRID { ["Customer info:": ] [f001 : ] [ :f002 ] ["Name: " :f003 ] } END
In this example:
An hbox tag defines the position and width (in grid cells) of several form items grouped inside an horizontal box. The position and width (in grid cells) of the horizontal box is defined by the square braces ([]) delimiting the hbox tag.
GRID { ["Num:" :num : :"Name:" :name ] } END
GRID { [left : ] [ :right ] [ :centered: ] } END ATTRIBUTES LABEL left: label1, TEXT="LEFT"; LABEL right: label2, TEXT="RIGHT"; LABEL centered: label3, TEXT="CENTER"; END
GRID { [ :"Label1" ] [ :"Label2"] } END
A typical use of hbox tags is to vertically align some form items - that must appear on the same line - with one or more form items that appear on the other lines:
GRID { Id: [num :"Name: ":name ] Address: [street : ] [zip-code:city ] Phones: [phone :fax ] } END
In this example, the form compiler will generate a grid containing 7 elements (3 labels and 4 hboxes):
GRID { ["Num: " :fnum : ] ["Name: " :fname ] } END
GRID { MMMMM [f1 ] [f2 : ] } END
Here all items will occupy the same number of grid columns (5). The MMMMM static label will have the largest width and define the width of the 5 grid cells. The first field is defined with a normal item tag, and expands to the width of the 5 grid cells. The line 5 defines an hbox that will expand to the size of the 5 grid cells, according to the static label, but its child element - the field f2 - gets a size corresponding to the number of characters used before the ':' colon (i.e. 3 characters).
If the default width generated by the form compiler does not fit, the - dash symbol can be used to define the real width of the item. In this example, the hbox tag occupies 20 grid cells, the first form item gets a width of 5, and the second form item gets a width of 3:
GRID { 12345678901234567890 [f1 - :f2 - : ] } END
The - dash size indicator is especially useful in BUTTONEDIT, DATEEDIT and COMBOBOX form fields, for which the default width computed by the form compiler may not fit.
In the next example, a static label is positioned above a TEXTEDIT field. The label will be centered over the TEXTEDIT field, and will remain centered as the field expands or contracts with the resizing of the window.
GRID { [ :"label": ] [textedit ] } END ATTRIBUTES TEXTEDIT textedit = formonly.textedit, STRETCH=BOTH; END