EDITORLAYOUT and PAGELAYOUTVTML 2 Sections

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:

Tutorial
The Visual Tool Markup Language (VTML)
Reference
VTML reference - overview
Context
TAG (Tag Definitions)
PAGE (Wizards)

top

Introduction

In this introduction:

Tag Editors

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.

Wizards

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.

top



Common attributes

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:
  • TabDialog
  • TabPage
  • Panel
Available control types are:
  • Label
  • TextBox
  • CheckBox
  • DropDown
  • ListBoxVTML 2
  • RadioGroup
  • Image
  • TextArea
  • SQLTextArea
  • ImgMapTextAreaVTML 3
  • StyleTextBoxVTML 2
  • StyleTextAreaVTML 2
  • FontPicker
  • ColorPicker
  • FileBrowser
  • ActiveXVTML 2
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:
  • in pixels (e.g. WIDTH=200)
  • as the name of another control (e.g. WIDTH="SomeControl"). In this case the width of the specified control is used. This referenced control must be already positioned and be in the same (current) container as the current control.
  • set to maximum (WIDTH="MAXIMUM"). Stretches control to the right boundary of its container.
HEIGHT Height of the control. Can be specified in three ways:
  • in pixels (e.g. HEIGHT=200)
  • as the name of another control (e.g. HEIGHT="SomeControl"). In this case the height of the specified control is used. This referenced control must be already positioned and be in the same (current) container as the current control.
  • set to maximum (HEIGHT="MAXIMUM"). Stretches control to the bottom boundary of its container.
LFWIDTHVTML 2 Width of the control used when user's system is set to use large fonts.
LFHEIGHTVTML 2 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.

Usage notes

Types and sizes

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.

Positioning

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.

top



EDITORLAYOUT

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.

PAGELAYOUT

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.

top



Summary of tags in the EDITORLAYOUT or PAGELAYOUT section

These tags are used to define most of the user interface of a Tag Editor or a Wizard.

Tags in the EDITORLAYOUT or PAGELAYOUT section

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.

top