BackUp LevelNext

Example Tags

You may have already jumped to the Tag Gallery to peruse the selections; your own interests and development needs will guide you there. A few samples will be presented here to illustrate their rich variety. These samples are taken from some of the Gallery's major tag categories.

Utility tags

CF_MERGEQUERY, written by Michael Dinowitz, performs a single task that can be very useful when outputting multiple query result sets. It is distributed with ColdFusion and can be selected from the Custom Tags folder in the Tag Chooser (CTRL+E) in ColdFusion Studio.

<CF_MERGEQUERY Query1 = "query1" Query2="query2">

Function tags

Custom tags are often developed to perform a specific operation within an application. They can be written to supply interface elements and data for ColdFusion tags and functions.

CF_COUNTWORD, written by Rob Bilson, performs a well-defined function using just three CFSET tags to handle input, processing, and output. This tag replicates the function of an existing CFX tag written in C++ but it is easier to implement because it does not have to be explicitly registered. The code is well-commented and the author created a custom editor in VTML for the tag, making it easy for others to use.

<!--- set local variable to the passed attribute --->
<CFSET MyString = attributes.Mystring>

<!--- Get the number of words in the string by treating 
the string as a list and using the space character as the 
delimiter. Note that the tag assumes a single line string 
where words are separated by one or more spaces --->

<CFSET WordsInString = ListLen(MyString, " ")>

<!--- return the count back to the calling template --->
<CFSET Caller.NumberOfWords = WordsInString>

User interface tags

CF_COOLLINK, written by Brian Shin, allows you to generate links that change color on mouseover and then change color again when you click the link. You can also specify a custom message to appear in the browser's status bar.

As you read through the code you will notice that it utilizes a number of familiar CFML and HTML elements:

The CoolLink code

<--- CoolLink.cfm to change link appearance 
    and properties --->
<--- This tag should be called as follows:
    CF_CoolLink
        LinkName = "Allaire"
        LinkHref = "http://www.allaire.com"
        OnColor = "Purple"
        OffColor = "Orange"
        ClickColor = "Red"
        >
        etc.  --->

<!--- NOTE: This tag allows links to change color in IE4, 
and the most control can be achieved in IE4. However, it 
should gracefully degrade (not give errors) for all 
other browsers -->

<!--- Initialize all Attribute Scope variables so 
they have defaults --->
<CFPARAM NAME="Attributes.LinkName" DEFAULT="Allaire">
<CFPARAM NAME="Attributes.LinkHref" 
    DEFAULT="http://www.allaire.com">
<CFPARAM NAME="Attributes.OnColor" DEFAULT="violet">
<CFPARAM NAME="Attributes.OffColor" DEFAULT="Navy">
<CFPARAM NAME="Attributes.ClickColor" DEFAULT="Red">
<CFPARAM NAME="Attributes.LinkFont" DEFAULT="Arial">
<CFPARAM NAME="Attributes.LinkSize" DEFAULT="14">
<CFPARAM NAME="Attributes.LinkMessage" 
    DEFAULT="#Attributes.LinkHref#">

<BODY LINK=<CFOUTPUT>"#Attributes.OffColor#"</CFOUTPUT>
vlink="<CFOUTPUT>#Attributes.OffColor#"</CFOUTPUT> >

<STYLE>
    BODY
    {font-family:<CFOUTPUT>#Attributes.LinkFont#</CFOUTPUT>
    ;color:black;font-size:
        <CFOUTPUT>#Attributes.LinkSize#</CFOUTPUT>;}

</STYLE>

<SCRIPT LANGUAGE="javascript">
<!--- find out what browser is being used --->
browserType = navigator.appName
browserVer = parseInt(navigator.appVersion)

    if (browserType == "Microsoft Internet Explorer" && browserVer >= 4)
    browser = "IE4";
    else browser = "other"

    if (browser == "IE4") { document.body.onmouseover=makeCool;
    document.body.onmouseout=makeNormal;

<!--- this will change the color of the link when moused-over, 
if you have IE4--->
    function makeCool() {
        src = event.toElement;
        if (src.tagName == `A') {
            src.oldcol = `<CFOUTPUT>#Attributes.OffColor#</CFOUTPUT>';
            src.style.color `<CFOUTPUT>#Attributes.OnColor#</CFOUTPUT>'; 
        }
    }
    function makeNormal() {
        src=event.fromElement;
        if (src.tagName == `A')  {
            src.style.color `<CFOUTPUT>#Attributes.OffColor#</CFOUTPUT>';
        }
    }

<!--- this will change the color of the link 
when it's clicked, if you have IE4 --->
    function makeCooler() {
    if (src.tagName == `A') {
        src.oldcol = `<CFOUTPUT>#Attributes.OffColor#</CFOUTPUT>';
        src.style.color `<CFOUTPUT>#Attributes.ClickColor#</CFOUTPUT>';
        }
    }

</SCRIPT>

<CFSET BROWSERTYPE=#CGI.HTTP_USER_AGENT#>
    <!--- If IE4 --->
<CFIF (FIND("MSIE 4.0", BROWSERTYPE))>
    <!--- Make the Link Cool --->
    <CFSET CLICKACTION = "onclick='makeCooler()'">
<CFELSE>
    <!--- Otherwise don't make the link highlighted --->
    <CFSET CLICKACTION = "   ">
</CFIF>

<!--- Output the Link --->
<CFOUTPUT>
<A HREF="#Attributes.linkhref#" TARGET="main"
ONMOUSEOVER="window.status='#Attributes.linkmessage#'; return true"
#CLICKACTION#  >#Attributes.linkname#</A>
</CFOUTPUT>

<--- /CoolLink.cfm to change link appearance and properties --->

BackUp LevelNext

allaire

AllaireDoc@allaire.com
Copyright © 1998, Allaire Corporation. All rights reserved.