Container/Control Examples

This section contains example code for VTML containers and controls.

TabDialog

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

See tabdialog in the VTML Reference for syntax and usage information.

TabPage

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

See tabpage in the VTML Reference for syntax and usage information.

Panel

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

See panel in the VTML Reference for syntax and usage information.

Label

<control name="lblSource" type="Label" caption="Source:" down=17 right=10 width=50/>
<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"/>

See label in the VTML Reference for syntax and usage information.

DropDown

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

See dropdown in the VTML Reference for syntax and usage information.

ListBox

<control name="lblSource"
  type="Label" caption="Source:"
  down=17 right=10 width=50/>

See listbox in the VTML Reference for syntax and usage information.

FontPicker

<control name="lblFace" type="Label" caption="Font:" down=17 right=10
  width=50/>
<control name="fontFace" type="FontPicker" anchor="lblFace" corner="NE"
  width="maximum"/>

See fontpicker in the VTML Reference for syntax and usage information.

ColorPicker

<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"/>

See colorpicker in the VTML Reference for syntax and usage information.

Checkbox

<control name="checkNoShading"type="CheckBox" caption=" No Shading"
  anchor="numWidth" corner="NE" down=4 right=20 width=maximum/>

See checkbox in the VTML Reference for syntax and usage information.

RadioGroup

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

See radiogroup in the VTML Reference for syntax and usage information.

TextArea

<control name="txtContent" type="TextArea" 
  down=5 right=5 
  width=maximum height=maximum
  MAXWIDTHPADDING=5 MAXHEIGHTPADDING=5/>

See textarea in the VTML Reference for syntax and usage information.

SQLTextArea

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

See sqltextarea in the VTML Reference for syntax and usage information.

FileBrowser

<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" />

See filebrowser in the VTML Reference for syntax and usage information.

Image

<control name="imgApplet" type="Image" filepath="Images/Applet.bmp"
  down=10 right=10 autosize="Yes"/>

See image in the VTML Reference for syntax and usage information.

StyleTextBox

See styletextbox in the VTML Reference for syntax and usage information.

ActiveX

<control name="activexGizmoPicker" type="ActiveX"
  PROGID="company.Gizmo"/>

See activeX in the VTML Reference for syntax and usage information.

Comments