The final stage in the process of building a tag editor is the definition of how a tag gets generated from the date entered into the editor controls. The tag generation logic is stored in the TAGLAYOUT block. This block contain a short template used to generate the final tag string. The markup language used the TAGLAYOUT template was originally designed for wizards and was therefore called Wizard markup language (WIZML). Because of this, all the tags in this section begin with the WIZ prefix.
Consult the
3. Customizing Wizard Output
section for more info on WIZML. A good way to get started is to
have a look at the TAGLAYOUT sections of existing HTML or
CFML tag editors located in the ..\Templates\TagEditors\ directory
in the main installation directory.
WIZML is described in a separate section though a few things should be noticed. WIZML support variables as well as functions. The value of each control of the tag editor is passed to the template using a variable with the same name. Therefore a ColorPicker named colorBGColor will pass its value in colorBGColor variable. The TAGLAYOUT template can then use this data to generate the tag string.
<TAGLAYOUT> <MYTAG COLOR="$${colorBGColor}"> </TAGLAYOUT>
The above example shows a simple layout template for a hypothetical tag with a single attribute COLOR. Notice that in WIZML variables are embedded using the $${} delimiters. If the user chose White in the colorBGColor ColorPicker the above template would generate the following tag:
<MYTAG COLOR="White">
In addition to the CONTROL variables a few other parameter get sent to the tag layout template.
This parameter can be used to create layout template, which generates a tag in lower or upper case based on user preferences. Here is a version of the MAYTAG layout template responding to case preferences:
<TAGLAYOUT> <WIZIF OPTIONLowerCaseTags EQ 'true'> <mytag color="$${colorBGColor}"> <WIZELSE> <MYTAG COLOR="$${colorBGColor}"> </WIZIF> </TAGLAYOUT>
Some people like their tag attributes in a single line while other like them indented. Here is a version of the MAYTAG layout template responding to such preferences:
<TAGLAYOUT> <WIZIF OPTIONLinearLayout EQ 'true'> <WIZSET Spacer = ' ' > <WIZELSE> <WIZSET Spacer = Chr(13) & Chr(10) & ' ' > </WIZIF> <MYTAG COLOR="$${clrBGColor}"$${Spacer}FACE="$${fontFace}"$${Spacer}SIZE="$${txtSize}"> </TAGLAYOUT>
The above template would generate the tag in the following forms based on the layout preference:
LINEAR: <MYTAG COLOR="White" FACE="Arial" SIZE="10"> NONLINEAR: <MYTAG COLOR="White" FACE="Arial" SIZE="10">
Contains the list of attributes, which were contained in the original tag string but are not supported by the editor. For example, you may write an editor for the HTML tag INPUT. You may provide editing capabilities for all basic attributes, however the editor will not cover JavaScript event attributes (e.g. onCLick= … etc.) In order not to loose these "unknown" attributes during the editing process the editor engine creates the TAGDATAUnknownAttributes variable containing a list of unknown attributes together with their original values. You can use this variable to ‘stamp’ all the unsupported attributes at the end of the tag you are generating.
<TAGLAYOUT> <MYTAG COLOR="$${colorBGColor}"<WIZIF TAGDATAUnknownAttributes NEQ ""> $${TAGDATAUnknownAttributes}</WIZIF>> </TAGLAYOUT>
If we edited a tag <MAYTAG COLOR="Blue" onClick="CallThis">
the above template would preserve the onClick attribute
despite the fact that it is not supported in the editor.
The editor is also intelligent enough to list the unknown attributes
in a linear or indented format base in users layout preferences described
in the previous section.