16.6 Form Layouts
The new GUI interfaces accept the normal TUI form layout and render the form elements using graphical widgets.
To exploit the graphical capabilities of the new GUI front ends, replace the SCREEN keyword with LAYOUT GRID or LAYOUT TABLE.
GRID and TABLE have the same syntax as the TUI .per files in that you draw the screen within curly braces, and you provide tags within field delimiters which will link user input to program variables. The TABLE layout is intended for screen arrays. (You still have to declare the screen array in the INSTRUCTIONS section of the .per file.)
In addition to the mandatory GRID or TABLE container, you can exploit other containers:
-
HBOX ( pack horizontally )
-
VBOX ( pack vertically)
-
GROUP (?)
-
FOLDER (array of PAGEs tabbed)
-
PAGE (a PAGE contained in a FOLDER)
These containers can be nested to influence the position of the graphical elements in the display.
To emulate the traditional SCREEN section, do something like this:
LAYOUT
GRID
{ Label1 [f001]
Label2 [f002]
....
}
END
To display the traditional SCREEN ARRAY, do something like this:
LAYOUT
TABLE
{
Column1 Column2
[f001 ] [f002 ]
[f001 ] [f002 ]
....
}
END
These containers respectively pack their contents horizontally and vertically. For example:
LAYOUT
VBOX Sales
GRID Order (BORDER)
{
[o001]
....
}
TABLE Items (BORDER)
{
[i001] [i002] ... [i00n]
[i001] [i002] ... [i00n]
....
}
END
END
Will lay out the GRID above the TABLE. HBOX would lay out the TABLE alongside the GRID.
The contents of HBOX and VBOX can be any number of layout containers which in their turn contain containers in nested fashion.
The Folder container is special and can only contain 1 or more PAGEs. e.g.
LAYOUT
FOLDER
PAGE P1 .... END
PAGE P2 .... END
...
END
END
The PAGEs are expected to contain GRID or TABLE containers with the usual tag assignments.
An reasonably full example:
database formonly
LAYOUT
FOLDER
PAGE Class
GRID
{
[f1 ]
}
END
END
PAGE Codes
TABLE
{
[f001 ] [f002 ]
[f001 ] [f002 ]
[f001 ] [f002 ]
[f001 ] [f002 ]
[f001 ] [f002 ]
[f001 ] [f002 ]
[f001 ] [f002 ]
}
END
END
end
tables
formonly
attributes
TEXTEDIT f1 = formonly.class;
EDIT f001 = formonly.code;
EDIT f002 = formonly.descr;
INSTRUCTIONS
SCREEN RECORD s_codes[7](code, descr);
end
16.6.2.5 Container Syntax
The containers above all have the syntax:
type id (attributes) container END
The ID is optional and is a non-quoted string e.g. Sales
The Attributes are a optional parenthesised list (comma or space separated) consisting of any or all of the following:
STYLE=”somestyle”
HIDDEN
AUTOSIZE
TEXT=”some text”
ACTION=string
BORDER
e.g.
(AUTOSIZE BORDER)
16.6.3 Field Widgets
The graphical elements that you can put into the GRID or TABLE are the following:
-
EDIT ( Normal One Line Edit Field ) This is the default.
-
BUTTON
-
BUTTONEDIT ( Edit with a Button (with Icon) on the right side)
-
COMBOBOX (Dropdown LineEdit)
-
CHECKBOX
-
DATEEDIT (ButtonEdit with a CalendarWidget when button is clicked)
-
IMAGE
-
LABEL
-
PROGRESSBAR
-
TEXTEDIT ( Multiline TextField )
-
WEBVIEW ( Browser Widget )
To assign a widget type to a field in the .per file, precede the usual entry in the ATTRIBUTES section with a widget type. e.g.
f001=formonly.startdate, type=date;
could become
DATEEDIT f001=formonly.startdate, type=date;
The default type of widget is EDIT.
Each widget can have a TITLE attribute:
EDIT f003=formonly.firstname, TITLE=”First Name”;
The front end program will position the title appropriately according to its layout policy and you should not include the title in your layout of the GRID or TABLE section of the .per file.
To supply the options for a COMBOBOX, use the ITEMS attribute.
COMBOBOX f005=formonly.title,
ITEMS=(“Mr”, “Mrs”, “Ms”, “Dr”, “Sir”, “Lady”);