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 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 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 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 example:
<CONTROL NAME="lblSource" TYPE="Label" CAPTION="Source:" DOWN=17 RIGHT=10 WIDTH=50/>
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 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 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 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 example:
<CONTROL NAME="checkNoShading"TYPE="CheckBox" CAPTION=" No Shading" ANCHOR="numWidth" CORNER="NE" DOWN=4 RIGHT=20 WIDTH=MAXIMUM/>
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 example:
<CONTROL NAME="txtContent" TYPE="TextArea" DOWN=5 RIGHT=5 WIDTH=MAXIMUM HEIGHT=MAXIMUM MAXWIDTHPADDING=5 MAXHEIGHTPADDING=5/>
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 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 example:
<CONTROL NAME="imgApplet" TYPE="Image" FILEPATH="Images/Applet.bmp" DOWN=10 RIGHT=10 AUTOSIZE="Yes"/>
ActiveX control example:
<CONTROL NAME="activexGizmoPicker" TYPE="ActiveX" PROGID="company.Gizmo"/>