BackFirst PageNext

VTML Container/Control Reference

This section contains the complete syntax, with examples, for VTML containers and controls.

TabDialog container

<CONTAINER TYPE="TabDialog" ...
TabDialog control is a special container control, because it can only contain <CONTAINER TYPE="TabPage"> tags. This is natural because one needs to specify the tab pages before embedding more controls on the tab dialog itself.

TabDialog example:

<CONTAINER NAME="MainTabDialog" TYPE="TabDialog" WIDTH=MAXIMUM
    HEIGHT=MAXIMUM>

    <CONTAINER  NAME="TabPage1" TYPE="TabPage" CAPTION="TEXTAREA Tag">

        ... embedded controls

    </CONTAINER>

    <CONTAINER  NAME="TabPage2" TYPE="TabPage" CAPTION="Content">

        ... embedded controls

    </CONTAINER>

</CONTAINER>

TabPage container

<CONTAINER TYPE="TabPage" ...
TabPage control is also special because it can only be contained inside a TabDialog CONTAINER control.
CAPTION Caption displayed on the top of the tab.

TabPage example:

<CONTAINER NAME="MainTabDialog" TYPE="TabDialog" WIDTH=MAXIMUM
    HEIGHT=MAXIMUM>

    <CONTAINER  NAME="TabPage1" TYPE="TabPage" CAPTION="TEXTAREA Tag">

        ... embedded controls

    </CONTAINER>

    <CONTAINER  NAME="TabPage2" TYPE="TabPage" CAPTION="Content">

        ... embedded controls

    </CONTAINER>

</CONTAINER>

Panel container

<CONTAINER TYPE="Panel" ...
Panel is the most common container control. Panel can contain any control or container except TabPage, which is restricted to TabDialog.
CAPTION Caption displayed in the upper left corner of the panel boundary.

Panel example:

<EDITORLAYOUT HEIGHT=225>

   <CONTAINER  NAME="MainTabDialog" TYPE="TabDialog" WIDTH=MAXIMUM
        HEIGHT=MAXIMUM>
        
        <CONTAINER  NAME="TabPage1" TYPE="TabPage" CAPTION="MYTAG Tag">

        <CONTAINER  NAME="Panel1" TYPE="Panel" DOWN=5 RIGHT=10
            WIDTH="MAXIMUM" HEIGHT=125>
            
            <CONTROL NAME="lblSource" TYPE="Label" CAPTION="Source:"
                DOWN=17 RIGHT=10 WIDTH=50/>

            <CONTROL NAME="txtSource" TYPE="TextBox" ANCHOR="lblSource"
                CORNER="NE" WIDTH="MAXIMUM"/>

            <CONTROL NAME="lblAlign" TYPE="Label" CAPTION="Align:"
                ANCHOR="lblSource" CORNER="SW" DOWN=11 WIDTH=50/>

            <CONTROL NAME="dropAlign">TYPE="DropDown" ANCHOR="lblAlign"
                CORNER="NE" WIDTH=100>
                <ITEM VALUE="TOP" CAPTION="TOP" />
                <ITEM VALUE="MIDDLE" CAPTION="MIDDLE" SELECTED/>
                <ITEM VALUE="BOTTOM" CAPTION="BOTTOM" />
            </CONTROL>

        </CONTAINER>

        <CONTAINER  NAME="Panel2" TYPE="Panel" CAPTION=" Panel 2 "
            ANCHOR="Panel1" CORNER="SW" DOWN=5 WIDTH="MAXIMUM"
                HEIGHT=MAXIMUM
        </CONTAINER>

        </CONTAINER>

        <CONTAINER  NAME="Advanced" TYPE="TabPage" CAPTION="Advanced">

        </CONTAINER>

    </CONTAINER>

</EDITORLAYOUT>

Label control

<CONTROL TYPE="Label" ...
Panel is the most common container control. Panel can contain any control or container except TabPage, which is restricted to TabDialog.
CAPTION The text displayed by the label.
AUTOSIZE YES\NO. Automatically sizes the control to the text it contains. This option is overridden if WIDTH or HEIGHT are explicitly specified.
TRANSPARENT YES\NO. Makes label transparent.
ALIGN LEFT\CENTER\RIGHT. Specifies the horizontal alignment of text in the label.
VALIGN TOP\CENTER\BOTTOM. Specifies the vertical alignment of text in the label.

Label example:

<CONTROL NAME="lblSource" TYPE="Label" CAPTION="Source:" DOWN=17 RIGHT=10 
WIDTH=50/>

TextBox control

<CONTROL TYPE="TextBox" ... 
A simple textbox control.
VALUE The text displayed by the textbox.
AUTOSIZE YES\NO. Automatically sizes the control to the text it contains. This option is overridden if WIDTH or HEIGHT are explicitly specified.
EDITABLE YES\NO. Enables or disables editing.
AUTOSELECT YES\NO. Decides whether contents get highlighted when the cursor enters the textbox.
MAXLENGTH Limits the amount of text in the textbox to a specific number of characters.
PASSWORDCHAR A character to be used to mask entered text. You can create a simple password box using PASSWORDCHAR="*".
CHARCASE NORMAL\UPPER\LOWER. Specifies whether entered text is automatically uppercased of lowercased. The default is NORMAL, preserving entered case.
VALIGN TOP\CENTER\BOTTOM. Specifies the vertical alignment of text in the label.

TextBox example:

<CONTROL NAME="lblSource" TYPE="Label" CAPTION="Source:" DOWN=17 RIGHT=10
    WIDTH=50/>
<CONTROL NAME="txtSource" TYPE="TextBox" VALUE="Some Value"
    ANCHOR="lblSource" CORNER="NE" WIDTH="MAXIMUM"/>

DropDown control

<CONTROL TYPE="DropDown" ...
A drop-down listbox. This tag requires <ITEM> sub-tags, which specify the list of items in the drop-down list. The item tag has CAPTION and VALUE attributes. CAPTION specifies the visible item text while VALUE specifies the underlying value for the option. SELECTED attribute specifies which item is initially selected. Then free-text is entered into an EDITABLE DropDown, the actual text is considered to be the value of the control. Example:
<CONTROL NAME="dropTagOptions" TYPE="DropDown" WIDTH="200">
<ITEM CAPTION="option1" VALUE="Value1"/>
<ITEM CAPTION="option2" VALUE="Value2" SELECTED/>
<ITEM CAPTION="option3" VALUE="Value3"/>



</CONTROL>





EDITABLE The EDITABLE attribute decides whether it behaves like an editable combo-box or a fixed listbox.

DropDown example:

<CONTROL NAME="lblAlign"    TYPE="Label" CAPTION="Align:"
    ANCHOR="lblSource" CORNER="SW" DOWN=11 WIDTH=50/>

<CONTROL NAME="dropAlign"    TYPE="DropDown" ANCHOR="lblAlign" CORNER="NE" WIDTH=100>                                        
    <ITEM VALUE="TOP"    CAPTION="TOP" />
    <ITEM VALUE="MIDDLE" CAPTION="MIDDLE" SELECTED/>
    <ITEM VALUE="BOTTOM" CAPTION="BOTTOM" />
</CONTROL>

ListBox control

<CONTROL TYPE="ListBox" ...
A single or multiple-select non-editable listbox. This tag requires <ITEM> sub-tags, which specify the items in list. The item tag has CAPTION and VALUE attributes. CAPTION specifies the visible item text while VALUE specifies the underlying value for the option. SELECTED attribute specifies which item is initially selected. Example:
<CONTROL NAME="dropTagOptions" TYPE="DropDown" WIDTH="200">
<ITEM CAPTION="option1" VALUE="Value1"/>
<ITEM CAPTION="option2" VALUE="Value2" SELECTED/>
<ITEM CAPTION="option3" VALUE="Value3"/>



</CONTROL>





MULTISELECT (optional) Enables the user to select multiple items. When mutliple selections are made the control returns the values as a comma-delimited string.

ListBox example:

<CONTROL NAME="lblChoices"    TYPE="Label" CAPTION="Choices:"
    ANCHOR="lblSource" CORNER="SW" DOWN=11 WIDTH=50/>

<CONTROL NAME="listAlign"    TYPE="ListBox" ANCHOR="lblChoices" CORNER="NE" WIDTH=100 HEIGHT=50>                                        
    <ITEM VALUE="TOP"    CAPTION="TOP" />
    <ITEM VALUE="MIDDLE" CAPTION="MIDDLE" SELECTED/>
    <ITEM VALUE="BOTTOM" CAPTION="BOTTOM" />
</CONTROL>

StyleTextBox control

<CONTROL TYPE="StyleTextBox" ...
A simple textbox with a button to invoke the CSS Style Editor. Enables creation as well as editing if CSS styles.

StyleTextBox example:

<CONTROL NAME="txtSomeStyle" TYPE="StyleTextBox" ANCHOR="lblColor"
    CORNER="NE" WIDTH="MAXIMUM"/>

StyleTextArea control

<CONTROL TYPE="StyleTextArea" ...
A multiline textarea control with a button to invoke the CSS Style Editor. Enables creation as well as editing if CSS styles.
SCROLLBAR NONE\HORIZONTAL\VERTICAL\BOTH. Specifies which scrollbars should be displayed.
WRAP YES\NO. Enables wrapping of text.

StyleTextArea example:

<CONTROL NAME="areaSomeStyle" TYPE="StyleTextArea" ANCHOR="lblColor"
    CORNER="NE" WIDTH="MAXIMUM" />

FontPicker control

<CONTROL TYPE="FontPicker" ...
A simple drop-down list font picker.
EDITABLE The EDITABLE attribute decides whether a font name can be entered manually into the listbox.

FontPicker example

<CONTROL NAME="lblFace" TYPE="Label" CAPTION="Font:" 
    DOWN=17 RIGHT=10 WIDTH=50/>
<CONTROL NAME="fontFace" TYPE="FontPicker" 
    ANCHOR="lblFace" CORNER="NE" WIDTH="MAXIMUM"/>

ColorPicker control

<CONTROL TYPE="ColorPicker" ...
A simple drop-down color picker. Enables selection of a predefined color or the special color code. Control returns value as a color name or hexadecimal value based on user's preferences.

ColorPicker example:

<CONTROL NAME="lblColor" TYPE="Label" CAPTION="Color:" ANCHOR="lblFace"
    CORNER="SW" DOWN=11  WIDTH=50/>

<CONTROL NAME="colorColor" TYPE="ColorPicker" ANCHOR="lblColor"
    CORNER="NE" WIDTH="MAXIMUM"/>

<CONTROL NAME="lblColor" TYPE="Label" CAPTION="Color:" ANCHOR="lblFace"
    CORNER="SW" DOWN=11  WIDTH=50/>

<CONTROL NAME="colorColor" TYPE="ColorPicker" ANCHOR="lblColor"
    CORNER="NE" WIDTH="MAXIMUM"/>






CheckBox control

<CONTROL TYPE="CheckBox" ...
A simple checkbox control. Returns `true' or `false'.
CAPTION Caption displayed next to the checkbox.
CHECKED YES\NO. Specifies initial status.

Checkbox example:

<CONTROL NAME="checkNoShading"TYPE="CheckBox" CAPTION=" No Shading"
    ANCHOR="numWidth" CORNER="NE" DOWN=4 RIGHT=20 WIDTH=MAXIMUM/>

RadioGroup control

<CONTROL TYPE="RadioGroup" ...
A set of radio buttons. This tag requires <ITEM> sub-tags, that specify the list of radio buttons. The item tag has CAPTION and VALUE attributes. CAPTION specifies the caption of the radio button, VALUE specifies the underlying value for the option. The SELECTED attribute specifies which radio options should be pre-selected. Example:
<CONTROL NAME="radioTagOptions" TYPE="RadioGroup" WIDTH="200">



<ITEM CAPTION="option1" VALUE="Value1"/>



<ITEM CAPTION="option2" VALUE="Value2" SELECTED/>



<ITEM CAPTION="option3" VALUE="Value3"/>



</CONTROL>



RadioGroup example

<CONTROL NAME="radioNameConflict" 
    TYPE="RadioGroup" CAPTION="Radio One"
    ANCHOR="lblAccept" CORNER="SW" DOWN=35 
    HEIGHT=MAXIMUM WIDTH=MAXIMUM 

    <ITEM VALUE="ERROR" CAPTION="ERROR - The file will not be saved and
        ColdFusion will return an error." SELECTED="TRUE"/>

    <ITEM VALUE="SKIP" 
        CAPTION="SKIP - Neither saves the file nor throws
        an error."/>

    <ITEM VALUE="OVERWRITE" 
        CAPTION="OVERWRITE - Replaces the existing
        file if name conflict occurs." />

    <ITEM VALUE="MAKEUNIQUE" CAPTION="MAKEUNIQUE - Automatically
        generates a unique filename for the upload." />

</CONTROL>

TextArea control

<CONTROL TYPE="TextArea" ...
A simple multi-line text entry control.
SCROLLBAR NONE\HORIZONTAL\VERTICAL\BOTH. Specifies which scrollbars should be displayed.
WRAP YES\NO. Enables wrapping of text.

TextArea example:

<CONTROL NAME="txtContent" TYPE="TextArea" DOWN=5 RIGHT=5 
    WIDTH=MAXIMUM HEIGHT=MAXIMUM MAXWIDTHPADDING=5 MAXHEIGHTPADDING=5/>

SQLTextArea control

<CONTROL TYPE="SQLTextArea" ... (ColdFusion Studio ONLY) 
A multi-line text entry control that allows the user to execute an SQL statement. The control contains a button that the user can use to invoke the query builder.
SCROLLBAR NONE\HORIZONTAL\VERTICAL\BOTH. Specifies which scrollbars should be displayed.
DSNAMECONTROL The name of the control that should be populated with the Data Source name when a query is selected.
QUERYNAMECONTROL The name of the control that should be populated with the Query Name when a query is selected.
WRAP YES\NO. Enables wrapping of text.

SQLTextArea example:

<CONTAINER  NAME="TabPage1" TYPE="TabPage" CAPTION="CFQUERY Tag">

    <CONTAINER  NAME="Panel1" TYPE="Panel" DOWN=5 RIGHT=10
        WIDTH="MAXIMUM" HEIGHT=80>

        <CONTROL NAME="lblQueryName" TYPE="Label" CAPTION="Query Name:"
            DOWN=17 RIGHT=10 WIDTH=80/>
        <CONTROL NAME="lblDataSource" TYPE="Label" CAPTION="Data Source:"
            ANCHOR="lblQueryName" CORNER="SW" DOWN=10 RIGHT=0 WIDTH=80/>
        <CONTROL NAME="txtQueryName" TYPE="TextBox" ANCHOR="lblQueryName"
            CORNER="NE"  WIDTH=130/>
        <CONTROL NAME="txtDataSource" TYPE="TextBox"
            ANCHOR="lblDataSource" CORNER="NE" WIDTH=130/>
        <CONTROL NAME="lblMaxRows" TYPE="Label" CAPTION="Max Rows:" 
            ANCHOR="txtQueryName"  CORNER="NE" DOWN=0 RIGHT=10 WIDTH=70/>
        <CONTROL NAME="lblTimeout" TYPE="Label" CAPTION="Timeout:"
            ANCHOR="txtDataSource" CORNER="NE" DOWN=0 RIGHT=10 WIDTH=70/>
        <CONTROL NAME="numMaxRows" TYPE="TextBox" ANCHOR="lblMaxRows"
            CORNER="NE" WIDTH=30/>
        <CONTROL NAME="numTimeout" TYPE="TextBox" ANCHOR="lblTimeout"
            CORNER="NE" WIDTH=30/>
        <CONTROL NAME="checkDebug" TYPE="CheckBox" CAPTION="Print debug
            info" ANCHOR="numTimeout" CORNER="NE" RIGHT=10 DOWN=4
            WIDTH=MAXIMUM/>

    </CONTAINER>


        <CONTROL NAME="lblSQLStatement" TYPE="Label" CAPTION="SQL
            Statement:" ANCHOR="Panel1" CORNER="SW"DOWN=10 RIGHT=0
            WIDTH=110/>
        <CONTROL NAME="txtSQLStatement" TYPE="SQLTextArea"
            ANCHOR="lblSQLStatement" CORNER="SW" DOWN="8" WIDTH=MAXIMUM
            HEIGHT=MAXIMUM DSNAMECONTROL="txtDataSource"
            QUERYNAMECONTROL="txtQueryName"/>

</CONTAINER>

FileBrowser control

<CONTROL TYPE="FileBrowser" ...
A textbox used to enter a file path. The control contains two toolbar buttons providing accessibility to local and remote file\directory browsing.
CAPTION The window caption that should displayed in the file\directory browsing dialogs. For example: CAPTION="Select File You Want Uploaded".
FILTER The file filter that should be used by the file\directory browsing dialogs. For example: FILTER="*.gif;*.jpeg;*.jpg".
DIRONLY YES\NO. Specifies that a directory is being selected. This option will convert the file dialogs accessible from the browse buttons to become directory-browsing dialogs. By default, file-browsing is assumed.
FILENAMEONLY YES\NO. Specifies that only a file name should be entered into the textbox when a file is specified in a local or remote file dialog. By default the entire path would be pasted. The attribute is irrelevant when the DIRONLY attribute is used.
RELATIVE YES\NO. Instructs the control to calculate the relative path when a file or a directory path is selected. The relative path is calculated relative to the file currently opened. When a new file is being edited, it first has to be saved before a relative path can be calculated. By default, the absolute path is assumed.

FileBrowser example:

<CONTROL NAME="lblSource" TYPE="Label" CAPTION="Source:" DOWN=17 RIGHT=10
    WIDTH=60/>

<CONTROL NAME="txtSource" TYPE="FileBrowser" ANCHOR="lblSource"
    CORNER="NE" WIDTH="MAXIMUM" RELATIVE
    FILTER="*.htm;*.html;*.cfml;*.cfm;*.asp" />

Image control

<CONTROL TYPE="Image" ...
An image control capable of containing BMP images.
FILEPATH Specifies the relative path of the image file from the editor template.
AUTOSIZE YES\NO. Automatically sizes the control to the image it contains. This option is overridden if WIDTH or HEIGHT are explicitly specified.
TRANSPARENT YES\NO. Controls transparency.
CENTER YES\NO. Centers the image.

Image example

<CONTROL NAME="imgApplet" TYPE="Image" FILEPATH="Images/Applet.bmp"
    DOWN=10 RIGHT=10 AUTOSIZE="Yes"/>

ActiveX control

<CONTROL TYPE="ActiveX" ...
A container for an embedded ActiveX control. For an ActiveX control to function properly within a tag editor, the ActiveX control must implement four methods:
  • void SetValue(LPCTSTR sValue) - called to set the control value.
  • BSTR GetValue() - called to retrieve the control value.
  • void SetFocus() - called to set focus to the control.
  • void IntitializeFromMarkup(LPCTSTR strMarkup) -called to initialize the ActiveX control with the CONTROL tag.
PROGID The ProgID of the ActiveX control.

ActiveX example

<CONTROL NAME="activexGizmoPicker" TYPE="ActiveX"
    PROGID="company.Gizmo"/>


BackFirst PageNext

allaire

AllaireDoc@allaire.com
Copyright © 1998, Allaire Corporation. All rights reserved.