Previous Up One Level Next
Customizing the Development Environment



VTML Container and Control Examples

This section contains example code with the resulting dialogs. Click on a link to the VTML Reference to see the complete syntax and additional example code for VTML containers and controls.

TabDialog container

TabDialog container 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

TabPage container 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

Panel container 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

Label control example:

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

TextBox control

TextBox control 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

DropDown control 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>

FontPicker control

FontPicker control 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

ColorPicker control 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

CheckBox control example:

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

RadioGroup control

RadioGroup control 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/>

    <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

TextArea control example:

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

SQLTextArea control

SQLTextArea control exmple:

<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

FileBrowser control 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

Image control example:

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

ActiveX control

ActiveX control example:

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

Copyright © 1999, Allaire Corporation. All rights reserved. Previous Up Next