| The examples in this section use cfweather, a hypothetical 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 Farhenheit) |
You create this new tag editor by performing the following steps: - Registering the tag in the tag library
- Creating a tag definition (VTML) file
- Creating a tag editor UI
- Adding a tag to Tag Chooser
Registering 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, if the user is on multiuser platform (such as Windows XP, Windows 2000, Windows NT, or Mac OS X), the user has another TagLibraries.vtm file in their user Configuration folder. This file is the one that needs to be updated because this file is the instance that Dreamweaver searches for and parses. The location of the user's Configuration folder depends on the user's platform. For Windows 2000 and Windows XP platforms: <drive>:\Documents and Settings\<username>\ Application Data\Macromedia\Dreamweaver 8  \Configuration
NOTE In Windows XP, this folder may be inside a hidden folder.
For Mac OS X platforms: <drive>:Users:<username>:Library:Application Support: Macromedia:Dreamweaver 8:Configuration
If Dreamweaver cannot find the TagLibraries.vtm file in the user's Configuration folder, it searches for the file in the Dreamweaver Configuration folder. NOTE On multiuser platforms, if you edit the copy of TagLibraries.vtm that resides in the Dreamweaver Configuration folder and not the one located in the user's configuration folder, Dreamweaver is not aware of the changes because it parses the copy of the TagLibraries.vtm file in the user's Configuration folder, not the one in the Dreamweaver Configuration folder.
The cfweather tag is a ColdFusion tag, so an appropriate tag library group already exists that you can use to register the cfweather tag. To register the tag: 1. | Open the TagLibraries.vtm file in a text editor.
| 2. | Scroll through the existing tag libraries to find the CFML tags taglibrary group.
| 3. | Add a new tag reference element, as shown in the following example:
<tagref name="cfweather" file="cfml/cfweather.vtm"/>
| 4. | 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.
|
Creating 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. To create a tag definition file: 1. | 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>
| 2. | 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.
|
Creating a tag editor UI To create the cfweather tag editor user interface: 1. | Save the cfweather.htm file in the Configuration/Taglibraries/CFML folder:
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog"> <html> <head> <title>CFWEATHER</title> <script src="/books/4/533/1/html/2/../../Shared/Common/Scripts/dwscripts.js"></script> <script src="/books/4/533/1/html/2/../../Shared/Common/Scripts/ListControlClass.js"></script> <script src="/books/4/533/1/html/2/../../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 theUIObjects = 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" name="thezip" attname="zip" style="width:100px" /> </td> </tr> <tr> <td valign="baseline" align="right" nowrap="nowrap">Type: </td> <td nowrap="nowrap"> <select name="thetempaturescale" attname="tempaturescale" editable="false" style="width:200px"> </select> </td> </tr> </table> </div> </body> </html>
| 2. | Verify that the tag editor is working by performing the following steps:
- 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.
|
Adding a tag to Tag Chooser To add the cfweather tag to the Tag Chooser: 1. | 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>
NOTE 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" on page 271. | 2. | Verify the cfweather tag now appears in the Tag Chooser by performing the following steps:
- 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.
|
|
