The EDITORLAYOUT section of a Tag Editor contains two kinds of tags: CONTROL and CONTAINER tags. EDITORLAYOUT defines the structure in which containers and controls can be laid out. The tags are similar in definition, with the exception that only CONTAINER tags can contain other CONTROL tags.
A Panel is a type of CONTAINER containing CONTROLS such as Labels or TextBoxes, as in this example:
<TAG NAME="MYTAG"> <EDITORLAYOUT WIDTH=200 HEIGHT=50> <CONTAINER TYPE="Panel" NAME="Panel1" WIDTH=150 HEIGHT=50> <CONTROL TYPE="Label" NAME="lblCode" WIDTH=70 CAPTION="Code" DOWN=20 RIGHT=20/> <CONTROL TYPE="TextBox" NAME="txtCode" WIDTH=30 ANCHOR="lblCode" CORNER="NE"/> </CONTAINER> </EDITORLAYOUT> </TAG>
You can name the above template MYTAG.VTM and test it by attempting to edit an empty <MYTAG> tag. This MYTAG dialog demonstrates the differences between containers and controls in VTML.
The equivalent of EDITORLAYOUT for Wizards is PAGELAYOUT, which should be used in every page of TYPE="Dynamic" since you must provide your own user interface for these Wizard pages. Here is a Wizard example:
<WIZARD NAME="MYWIZARD" CAPTION="My Wizard"> <PARAM NAME="image" VALUE="../images/image.gif"/> <PAGE TYPE="Dynamic" NAME="ImageChoice" CAPTION="Choose an image"> <PAGELAYOUT> <CONTAINER TYPE="Panel" NAME="Panel1" CAPTION=" Image " WIDTH="MAXIMUM" HEIGHT=55 MAXWIDTHPADDING=0 DOWN=10> <CONTROL TYPE="Label" NAME="lblImage" RIGHT=20 DOWN=20 CAPTION="Choose one:"/> <CONTROL TYPE="FileBrowser" NAME="fileImage" WIDTH="MAXIMUM" MAXWIDTHPADDING=10 ANCHOR="lblImage" RIGHT=10 CORNER="NE" FILTER="*.gif;*.jpeg;*.jpg;*.png;*.bmp"/> </CONTAINER> </PAGELAYOUT> <INPUT NAME="fileImage" PARAM="image"/> </PAGE> <TEMPLATE NAME="Mywizard.wml" OUTPUTFILE="mypage.html"/> </WIZARD>
The PAGELAYOUT tag can be used only on pages with TYPE="Dynamic". It does not take any attributes. Just like EDITORLAYOUT, it defines the layout of containers and controls. Unlike EDITORLAYOUT, which can have WIDTH and HEIGHT defined, a Wizard has a fixed size of 488 x 388 pixels (or 610 x 485 when Large Fonts are used), so PAGELAYOUT does not need WIDTH and HEIGHT attributes. The lower part of the Wizard has the standard navigation buttons and on the left is a bitmap, either the default one or another one defined with the IMAGE attribute of the PAGE tag. The remainder of the space is available for the controls.
The following attributes are common to both the CONTAINER and the CONTROL tag.
CONTAINER/CONTROL attributes | |
---|---|
TYPE |
Required. Type of the container/control. Available container types are:
|
NAME | Name of the control. Name is required when the control or container is referenced from another or from the <ATTRIBUTES> section. |
ANCHOR | The name of the control relative top which control is positioned. If omitted, control is positioned relative to the upper left corner of its container. |
CORNER | Corner of the ANCHOR control relative to which offset position is calculated (NW, NE, SW, SE). Default is NW, the upper-left corner. |
DOWN | Offset in pixels down from the anchor point (corner). |
RIGHT | Offset in pixels right from the anchor point (corner). |
WIDTH |
Width of the control. Can be specified in three ways:
|
HEIGHT |
Height of the control. Can be specified in three ways:
|
LFWIDTH![]() |
Width of the control used when user's system is set to use large fonts. |
LFHEIGHT![]() |
Height of the control used when user's system is set to use large fonts. |
MAXWIDTHPADDING | Used with WIDTH="MAXIMUM" (ignored with other WIDTH settings). Specifies the padding in pixels from the container's right boundary. The default value is 10 pixels. |
MAXHEIGHTPADDING | Used with HEIGHT="MAXIMUM" (ignored with other HEIGHT settings). Specifies the padding in pixels from the container's bottom boundary. The default value is 10 pixels. |
The kind of control or container represented by a CONTROL or a CONTAINER tag is defined by the TYPE attribute, but we can also see that WIDTH and HEIGHT attributes determine the size, along with LFWIDTH and LFHEIGHT for Large Fonts.
The ANCHOR and CORNER attributes determine the point relative to which the control is positioned. The ANCHOR can be specified as the name of any control that was already laid down within the same (current) container or it can be the container itself. The corner specifies the corner of the anchor control to be used for positioning. The possible choices are NE, NW, SE, SW. The DOWN and RIGHT attributes then specify the pixel offset from the anchor control; values can be both positive and negative.
This tag defines the structure in which containers and controls can be laid out for the Tag Editor user interface.
The EDITORLAYOUT tag is documented separately.
This tag defines the structure in which containers and controls can be laid out for a Wizard page.
The PAGELAYOUT tag is documented separately.
These tags are used to define most of the user interface of a Tag Editor or a Wizard.
Tag | Description |
---|---|
CONTAINER | Containers are used to organize controls in a user interface into logical groups. |
CONTROL | Controls generally are meant to collect user input or to display information on a user interface |
ITEM | Item is used as part of a DropDown control, a ListBox control or a RadioGroup control; each item represents one possible choice. |