Tuesday, September 04, 2007
Documenting ColdFusion custom tags in Dreamweaver (2/4)
Part 2: Basic tag editor
In part 1, I explained that we'll need to create two files for basic tag editing. In this part we'll begin by creating a file called cf_ourtemplate.vtm. The contents will look like this.
<TAG NAME="cf_ourtemplate" endtag="yes">
<TAGFORMAT NLBEFORETAG="1" NLAFTERTAG="1"/>
<TAGDIALOG FILE="cf_ourtemplate.htm"/>
<ATTRIBUTES>
<ATTRIB NAME="title" TYPE="TEXT"/>
<ATTRIB NAME="theme" TYPE="ENUMERATED">
<ATTRIBOPTION VALUE="basic"/>
<ATTRIBOPTION VALUE="full"/>
</ATTRIB>
</ATTRIBUTES>
</TAG>
Our opening <TAG> defines the name of our tag, and whether or not the tag requires and end tag. <TAGFORMAT> can be left alone. <TAGDIALOG> defines where our tag editor .htm file resides. We next move down to the <ATTRIBUTES SECTION>. For our purposes there are two types of <ATTRIB> that we're concerned with. The first type is "TEXT" which will simply define an attribute with a space to fill in the value. The second type is "ENUMERATED", which will give you a dropdown list of choices. You define those choices using <ATTRIBOPTION>. At this point our .vtm file is complete.
Our tag editor is probably the most complex part of this process. Fortunately there are a lot of examples already built into Dreamweaver. Simple find a tag that has an editor that functions like what you are trying to do, and use that tag editor file as a template. Fortunately our tag editor for this example is fairly simple. The source code will be very helpful here. I'm not going to replicate the entire file since it's quite long. This is basically a standard HTML file with some custom javascript.
<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>
var THEMELIST;
var theUIObjects;
var applyType = "dynamic";
function inspectTag(tagNodeObj)
function applyTag(tagNodeObj)
function initializeUI()
{
var theThemeScaleCap = new Array("basic","full");
var theThemeScaleVal = new Array("basic","full");
THEMELIST = new ListControl("thethemescale");
theUIObjects = new Array(THEMELIST);
tagDialog.populateDropDownList(THEMELIST, theThemeScaleCap,
theThemeScaleVal, 1);
}
</script>
We start by including some .js files and defining some variables. Next comes the inspectTag and applyTag functions which I've truncated since they are identical each time. Finally we have the initializeUI function where we define the values for our theme list and populate the drop-down box. next we'll include the required stylesheet.
<link href="../../fields.css" rel="stylesheet" type="text/css">finally we'll add our text field and our dropdown.
<input name="thetitle" type="text" class="basicTextField"
id="attr:cf_ourtemplate:title" attname="title" required="true" />
<select name="thethemescale" class="oneWordOptionList"
id="attr:ccf_ourtemplate:themescale" attname="theme" editable="false">
</select>
That's basically it. For further reference on this topic, see Extending Dreamweaver -> Extension APIs -> Tag Libraries and Editors under Dreamweaver's help menu. In Part 3, l'll explain how to create custom documentation for our tag within Dreamweaver.
Labels: Adobe, ColdFusion, Custom Tags, Dreamweaver
posted by Luis
