Form items / Form tags |
Layout tags define layout areas for containers inside the frame of a grid-based container.
<type [identifier] > content [ < > ]
A layout tag defines a layout region of a container, in the body frame of a GRID container.
While complex layout with nested frames can be defined with HBOX and VBOX containers, it is sometimes more convenient to define a form with a complex layout by using layout tags within a GRID container.
A layout tag has a type that defines what kind of container will be generated in the compiled form.
A layout tag is delimited by angle braces (<>), and contains the tag type (G/GROUP, T/TABLE, etc) and an optional identifier.
Tag Type | Abbr. | Description |
---|---|---|
GROUP | G | Defines a group box layout tag, resulting in the same presentation as the GROUP container. |
TABLE | T | Defines a table view layout tag, resulting in the same presentation as the TABLE container. |
TREE | N/A | Defines a tree-view list view layout tag, resulting in the same presentation as the TREE container. |
SCROLLGRID | S | Defines a scrollable grid layout tag, resulting in the same presentation as the SCROLLGRID container. |
LAYOUT GRID { <GROUP g1 > [text1 ] [ ] [ ] < > } END END ATTRIBUTES GROUP g1:group1, TEXT="Description"; TEXTEDIT text1=FORMONLY.text1; END
<GROUP group1 > < >
Form items must be placed inside the layout region. The [ ] square brackets are not part of the form item width and can be place at the same X position as the layout tag delimiters:
<GROUP group1 > Item: [f001 ] Quantity: [f002 ] Date: [f003 ] < >
<GROUP group1 > [f001 ] [f002 ] Static labels must fit!! < > <TABLE table1 > [colA |colB ] [colA |colB ] [colA |colB ] [colA |colB ]
<GROUP group1 ><GROUP group2 ><GROUP group4 > FName: [f001 ] Phone: [f004 ][f012 ] LName: [f002 ] EMail: [f005 ][ ] < >< >[ ] <GROUP group3 >[ ] [f010 ][ ] < >< > <TABLE table1 ><TABLE table2 > [c11 |c12 |c13 ][c21 |c22 ] [c11 |c12 |c13 ][c21 |c22 ] [c11 |c12 |c13 ][c21 |c22 ] [c11 |c12 |c13 ][c21 |c22 ] < >< >
<TABLE table1 > [colA |colB ] [colA |colB ] [colA |colB ] [colA |colB ] [colA |colB ] [colA |colB ] <GROUP group2 > [field1 ] [field2 ] < > [field3 ]
<GROUP group1 >[image1 ] FName: [f001 ][ ] LName: [f002 ][ ] < >[ ] [textedit1 | ] [ | ] [ | ]
<GROUP group1 > <TABLE table1 > [colA |colB ] [colA |colB ] [colA |colB ] [colA |colB ] < >
Hbox or vbox containers with splitter are automatically created by the form compiler in these conditions:
Stretchable elements are containers such as TABLE containers, or form items like IMAGE fields with the STRETCH attribute.
No hbox or vbox object will be created if the elements are in a SCROLLGRID container.
<TABLE table1 > [colA |colB ] [colA |colB ] [colA |colB ] [colA |colB ] <TABLE table2 > [colC |colD ] [colC |colD ]
[textedit1 |textedit2 ] [ | ] [ | ] [ | ]The next layout example would make the form compiler create an automatic vbox with splitter to hold table2 and textedit1 , plus an hbox with splitter to hold table1 and the first VBox (We must use a pipe character to delimit the end of colB and textedit1 so that both tables can be placed side by side):
<TABLE table1 ><TABLE table2 > [colA |colB ][colC|colD ] [colA |colB ][colC|colD ] [colA |colB ][colC|colD ] [colA |colB |textedit1 ] [colA |colB | ] [colA |colB | ]
<TABLE table1 > <TABLE table2 > [colA |colB ] [colC|colD ] [colA |colB ] [colC|colD ] [colA |colB ] [colC|colD ] [colA |colB ] [colA |colB ] [textedit1 ] [colA |colB ] [ ] [colA |colB ] [ ]
The typical OK/Cancel window:
LAYOUT GRID { <GROUP g1 > [com ] < > [ :bok |bno ] } END END ATTRIBUTES LABEL com: comment; BUTTON bok: accept; BUTTON bno: cancel; ...
This example shows multiple uses of layout tags:
LAYOUT GRID { <GROUP g1 ><GROUP g2 > Ident: [f001 ] [f002 ] [text1 ] Addr: [f003 ] [ ] < >< > <GROUP g3 > [text2 ] [ ] [ ] < > <TABLE t1 > Num Name State Value [col1 |col2 |col3 |col4 ] [col1 |col2 |col3 |col4 ] [col1 |col2 |col3 |col4 ] [col1 |col2 |col3 |col4 ] < > } END END ATTRIBUTES GROUP g1:group1, TEXT="Customer"; GROUP g2:group2, TEXT="Comments"; TABLE t1:table1, UNSORTABLECOLUMNS; ...