A simple example of creating a new tag editor

Last updated on Jan 7, 2022 | Also applies to Adobe Dreamweaver

The examples in this section use cfweather, a hypothetical Adobe ColdFusion tag designed to extract the current temperature from a weather database, to illustrate the steps necessary to create a new tag editor.

The attributes for the cfweather tag are described in the following table:

Attribute	Description
zip	A five-digit ZIP code
tempaturescale	The temperature scale (Celsius or Fahrenheit)

You create this new tag editor by registering the tag, creating a tag definition, creating a tag editor UI, and adding a tag to the Tag Chooser.

Register the tag in the tag library

For Dreamweaver to recognize the new tag, it must be identified in the TagLibraries.vtm file, which is located in the Configuration/TagLibraries folder. However, the user could be on a multiuser platform such as Windows XP, Windows 2000, Windows NT, and Mac OS X. If the user is on a multiuser platform, there is another TagLibraries.vtm file in the user Configuration folder. This file is the one that must be updated because this file is the instance that Dreamweaver searches for and parses.

The location of the user Configuration folder depends on the user platform.

For Windows 2000 and Windows XP platforms:

 <drive>:\Documents and Settings\<username>\Application Data\Adobe\\xc2  
Dreamweaver CS5\Configuration

It is possible that in Windows XP, this folder is inside a hidden folder.

For Mac OS X platforms:

 <drive>:Users:<username>:Library:Application Support:Adobe:¬ 
Dreamweaver CS5:Configuration

If Dreamweaver cannot find the TagLibraries.vtm file in the user Configuration folder, it searches for the file in the Dreamweaver Configuration folder.

On multiuser platforms, if you edit the copy of TagLibraries.vtm that resides in the Dreamweaver Configuration folder, Dreamweaver is not aware of the changes. Dreamweaver parses the copy of the TagLibraries.vtm file in the user Configuration folder, not the one in the Dreamweaver Configuration folder.

The cfweather tag is a ColdFusion tag, so an appropriate tag library group exists that you can use to register the cfweather tag.

Open the TagLibraries.vtm file in a text editor.
Scroll through the existing tag libraries to find the CFML tags.
Add a new tag reference element, as shown in the following example:
```
 <tagref name="cfweather" file="cfml/cfweather.vtm"/>
```
Save the file.

The tag is now registered in the tag library, and it has a file pointer to the cfweather.vtm tag definition file.

Create a tag definition (VTML) file

When a user selects a registered tag using the Tag Chooser or a tag editor, Dreamweaver searches for a corresponding VTML file for the tag definition.

In a text editor, create a file with the following contents:

 <TAG NAME="cfweather" endtag="no"> 
            <TAGFORMAT NLBEFORETAG="1" NLAFTERTAG="1"/> 
            <TAGDIALOG FILE="cfweather.htm"/> 
     
            <ATTRIBUTES> 
                <ATTRIB NAME="zip" TYPE="TEXT"/> 
                <ATTRIB NAME="tempaturescale" TYPE="ENUMERATED"> 
                    <ATTRIBOPTION VALUE="Celsius"/> 
                    <ATTRIBOPTION VALUE="Fahrenheit"/> 
                </ATTRIB> 
            </ATTRIBUTES> 
</TAG>

Save the cfweather.vtm file in the Configuration/TagLibraries/CFML folder.

Using the tag definition file, Dreamweaver can perform code hinting, code completion, and tag formatting functionality for the cfweather tag.

Create a tag editor UI

Save the cfweather.htm file in the Configuration/TagLibraries/CFML folder:

 <!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog"> 
<html> 
<head> 
<title>CFWEATHER</title> 
<script src="../../Shared/Common/Scripts/dwscripts.js"></script> 
<script src="../../Shared/Common/Scripts/ListControlClass.js"></script> 
<script src="../../Shared/Common/Scripts/tagDialogsCmn.js"></script> 
<script> 
 
/************************* GLOBAL VARS **************************/ 
var TEMPATURESCALELIST;    // tempaurelist control (initialized in initializeUI()) 
var theUIObjects;          // array of UI objects used by common API functions 
/****************************************************************/ 
 
// inspectTag() API function defined (required by all tag editors)     
function inspectTag(tagNodeObj) 
{ 
    // call into a common library version of inspectTagCommon defined 
    // in tagDialogCmns.js (note that it's been included) 
    // For more information about this function, look at the comments 
    // for inspectTagCommon in tagDialogCmn.js 
    tagDialog.inspectTagCommon(tagNodeObj, theUIObjects); 
} 
function applyTag(tagNodeObj) 
{ 
    // call into a common library version of applyTagCommon defined 
    // in tagDialogCmns.js (note that it's been included) 
    // For more information about this function, look at the comments 
    // for applyTagCommon in tagDialogCmn.js 
    tagDialog.applyTagCommon(tagNodeObj, theUIObjects); 
} 
function initializeUI() 
{ 
    // define two arrays for the values and display captions for the list 
    control 
    var theTempatureScaleCap = new Array("celsius","fahrenheit"); 
    var theTempatureScaleVal = new Array("celsius","fahrenheit"); 
     
    // instantiate a new list control 
    TEMPATURESCALELIST = new ListControl("thetempaturescale"); 
 
    // add the tempaturescalelist dropdown list control to the uiobjects 
    theUIObjects0= new Array(TEMPATURESCALELIST); 
 
    // call common populateDropDownList function defined in tagDialogCmn.js to 
    // populate the tempaturescale list control 
    tagDialog.populateDropDownList(TEMPATURESCALELIST, theTempatureScaleCap, 
    theTempatureScaleVal, 1); 
} 
</script> 
 
</head> 
<body onLoad="initializeUI()"> 
<div name="General"> 
    <table border="0" cellspacing="4"> 
        <tr> 
            <td valign="baseline" align="right" nowrap="nowrap">Zip Code: </td> 
            <td nowrap="nowrap"> 
                <input type="text" id="attr:cfargument:zip" name="thezip" attname="zip" 
                style="width:100px"0/>&nbsp; 
            </td> 
        </tr> 
        <tr> 
            <td valign="baseline" align="right" nowrap="nowrap">Type: </td> 
            <td nowrap="nowrap"> 
                <select name="thetempaturescale" id="attr:cfargument:tempaturescale" 
                attname="tempaturescale" editable="false" style="width:200px"> 
                </select> 
            </td> 
        </tr> 
    </table> 
</div> 
</body> 
</html>

Next, you’ll verify that the tag editor is working.

Launch Dreamweaver.
Type cfweather in Code view.
Right-click on the tag.
Select Edit Tag cfweather from the Context menu.

If the tag editor launches, it has been created successfully.

Add a tag to Tag Chooser

Modify the TagChooser.xml file in the Configuration/TagLibraries/CFML folder by adding a new category called Third Party Tags, which features the cfweather tag, as shown in the following example:
```
 <category name="Third Party Tags" icon="icons/Elements.gif" reference='CFML'> 
    <element name="cfweather" value='cfweather zip="" temperaturescale="fahrenheit">' /> 
</category>
```
On multiuser platforms, the TagChooser.xml file also exists in the user’s Configuration folder. For more information regarding multiuser platforms, see the discussion in Registering the tag in the tag library.

Next, you’ll verify the cfweather tag now appears in the Tag Chooser.
Select Insert > Tag.
Expand the CFML Tags group.
Select the Third Party Tags group that appears at the bottom of the Tag Chooser. The cfweather tag appears in the list box on the right.
Select cfweather, and click the Insert button.

The tag editor should appear.

Get help faster and easier

New user?