These tags define the canvas on which containers and controls can be laid out for the Tag Editor user interface and a Wizard page respectively.
The following subjects are covered in this document:
Related information about VTML and WIZML:
|
In this introduction:
The EDITORLAYOUT section of a Tag Editor is a special type of container: it may contain only two kinds of tags: CONTROL and CONTAINER tags. EDITORLAYOUT defines the canvas on which containers and controls can be laid out. The tags are similar in definition, with the exception that only CONTAINER tags have the capability to contain other CONTROL tags.
A Panel is a good example of a CONTAINER containing other CONTROLS such as Labels or TextBoxes. Look at the following 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 difference 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 for these Wizard pages you must provide your own user interface. 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 a canvas for laying out 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 have (or 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 defined with the IMAGE attribute for the PAGE tag. The remainder is available for the controls.
The following attributes are common to both the CONTAINER and the CONTROL tag.
Defaults indicated in bold.
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. |
You must have already noticed that the kind of control or container represented by a CONTROL or a CONTAINER tag is defined by the TYPE attribute. 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 canvas on which containers and controls can be laid out for the Tag Editor user interface.
The EDITORLAYOUT tag is documented in a separate document.
This tag defines the canvas on which containers and controls can be laid out for a Wizard page.
The EDITORLAYOUT tag is documented in a separate document.
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. |