Creating a custom component in ColdFusion

Readability

Creating a custom component in ColdFusion

The fol­low­ing exam­ple shows how you can cre­ate a sim­ple cus­tom com­po­nent in ColdFusion.



    


    
    I am a custom component, but I forgot to set my type (so I'll use whatever default the custom tag decides).
    
    I am a custom component with an "info" icon.
    
    

This is some content.

I am a custom component with a "success" icon. I am a custom component with an "error" icon. I am a custom component with a "warning" icon. I'm sort of a custom component, but I forgot to add an end tag, so I'm not really a custom component anymore. I'm annoying because I use a custom "id" attribute and CSS to blink (if your browser supports that). I am a custom component with an "information" icon, but that type isn't valid (so I'll use whatever default the custom tag decides).

And the cus­tom Cold­Fu­sion com­po­nent, infoBox.cfm (put in the same direc­tory as your .CFM code above, is as follows:










    




    




    
id="#attributes.id#">#trim(thisTag.generatedContent)#

And the out­put of the cus­tom <cf_​infoBox/​> tag is as fol­lows:
CF_INFOBOX custom tag

The Cold­Fu­sion gen­er­ated HTML out­put of the cus­tom <cf_​infoBox/​> tag is as follows:

I am a custom component, but I forgot to set my type (so I'll use whatever default the custom tag decides).
I am a custom component with an "info" icon.

This is some content.

I am a custom component with a "success" icon.
I am a custom component with an "error" icon.
I am a custom component with a "warning" icon.
I'm sort of a custom component, but I forgot to add an end tag, so I'm not really a custom component anymore.
I'm annoying because I use a custom "id" attribute and CSS to blink (if your browser supports that).
I am a custom component with an "information" icon, but that type isn't valid (so I'll use whatever default the custom tag decides).

If you wanted to add a bit of inter­ac­tiv­ity, you could use the jQuery JavaScript Library to hide or fade an info box out when clicked by adding the fol­low­ing code into the HTML <head> section:



The pre­vi­ous JavaScript/​jQuery snip­pet looks for the <div> info box with an “id” of “box1” and fades the info box out when the user clicks on it.

If you want to make all of the <cf_​infoBox> instances fade out or hide when clicked, you can uncom­ment the sec­ond block of code in the snip­pet above. This code looks for any <div> tags with a class name of “infoBox” (which is all of them) and then calls the jQuery hide() method on that info box.

The following example shows how you can create a simple custom component in ColdFusion.

<html>
<head>
    <style type="text/css">
        /* CSS from http://css.dzone.com/news/css-message-boxes-different-me/ */
        div.info, div.success, div.warning, div.error {
            background-repeat: no-repeat;
            background-position: 10px center;
            border: 1px solid;
            margin: 5px 0px;
            padding:10px 10px 10px 40px;
        }
        div.info {
            background-color: #BDE5F8;
            background-image: url("information.png");
            color: #00529B;
        }
        div.success {
            background-color: #DFF2BF;
            background-image: url("accept.png");
            color: #4F8A10;
        }
        div.warning {
            background-color: #FEEFB3;
            background-image: url("error.png");
            color: #9F6000;
        }
        div.error {
            background-color: #FFBABA;
            background-image: url("delete.png");
            color: #D8000C;
        }
 
        div#box1 {
            font-family: "Comic Sans MS";
            font-variant: small-caps;
            font-weight: bold;
            text-decoration: blink;
        }
    </style>
</head>
<body>
 
    <cf_infoBox>I am a custom component, but I forgot to set my type (so I'll use whatever default the custom tag decides).</cf_infoBox>
 
    <cf_infoBox type="info">I am a custom component with an "info" icon.</cf_infoBox>
 
    <p>This is some content.</p>
 
    <cf_infoBox type="success">I am a custom component with a "success" icon.</cf_infoBox>
 
    <cf_infoBox type="error">I am a custom component with an "error" icon.</cf_infoBox>
 
    <cf_infoBox type="warning">I am a custom component with a "warning" icon.</cf_infoBox>
 
    <cf_infoBox>
    I'm sort of a custom component, but I forgot to add an end tag, so I'm not really a custom component anymore.
 
    <cf_infoBox id="box1" type="error">I'm annoying because I use a custom "id" attribute and CSS to blink (if your browser supports that).</cf_infoBox>
 
    <cf_infoBox type="information">I am a custom component with an "information" icon, but that type isn't valid (so I'll use whatever default the custom tag decides).</cf_infoBox>
 
</body>
</html>

And the custom ColdFusion component, infoBox.cfm (put in the same directory as your .CFM code above, is as follows:

<!--- Set a default info box type, in case the user neglects to set the "type"
        attribute, or specifies an invalid value. --->
<cfset DEFAULT_ICON_TYPE = "info" />
 
<!-- Set default "id" and "type" properties in the 'attributes' scope if they weren't
        specified in the custom tag (via the calling script). --->
<cfparam name="attributes.id" type="string" default="" />
<cfparam name="attributes.type" type="string" default="#DEFAULT_ICON_TYPE#" />
 
<!--- Validate the specified attributes.type value, in case the user tried
        setting an invalid value. --->
<cfif NOT listContains("info,warning,error,success", trim(attributes.type))>
    <cfset attributes.type = DEFAULT_ICON_TYPE />
</cfif>
 
<!--- Make sure the user specified a closing tag for the custom component
        and exit gracefully using <CFEXIT/> if they didn't. Conversely, you
        could call <CFABORT/> here to hard exit, if you want. --->
<cfif NOT thisTag.hasEndTag>
    <cfexit />
</cfif>
 
<!--- This code gets excuted if the user specified a closing tag, and sets a
        default <div> class, as well as the specified attributes.type. Also,
        if the user specified a custom attributes.id, add that to the <div>
        as well so they can target this specific <div> using CSS or JavaScript.
        Also, because we added a generic <div> class of "infoBox", users can
        target ALL instances of this custom tag info box using CSS and/or
        JavaScript/jQuery in case they want to add some additional styling or
        jQuery effects/behaviors. Finally, set the <div> text based on the code
        between the opening <cf_infoBox> and closing </cf_infoBox> tags using
        #thisTag.generatedContent#. After we've displayed the generated content
        from the text between the opening and closing tags, clear the
        #thisTag.generatedContent# property so the output isn't displayed
        twice. --->
<cfif thisTag.executionMode IS "end">
    <cfoutput><div class="infoBox #attributes.type#"<cfif len(trim(attributes.id)) GT 0> id="#attributes.id#"</cfif>>#trim(thisTag.generatedContent)#</div></cfoutput>
    <cfset thisTag.generatedContent = "" />
</cfif>

And the output of the custom <cf_infoBox/> tag is as follows:
CF_INFOBOX custom tag

The ColdFusion generated HTML output of the custom <cf_infoBox/> tag is as follows:

<div class="infoBox info">I am a custom component, but I forgot to set my type (so I'll use whatever default the custom tag decides).</div>
<div class="infoBox info">I am a custom component with an "info" icon.</div> 
<p>This is some content.</p>
<div class="infoBox success">I am a custom component with a "success" icon.</div>
<div class="infoBox error">I am a custom component with an "error" icon.</div>
<div class="infoBox warning">I am a custom component with a "warning" icon.</div> 
I'm sort of a custom component, but I forgot to add an end tag, so I'm not really a custom component anymore.
<div class="infoBox error" id="box1">I'm annoying because I use a custom "id" attribute and CSS to blink (if your browser supports that).</div>
<div class="infoBox info">I am a custom component with an "information" icon, but that type isn't valid (so I'll use whatever default the custom tag decides).</div>

If you wanted to add a bit of interactivity, you could use the jQuery JavaScript Library to hide or fade an info box out when clicked by adding the following code into the HTML <head> section:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("div#box1").click(function() {
            $(this).fadeOut();
        });
 
        /*
        $("div.infoBox").click(function() {
            $(this).hide();
        });
        */
    });
</script>

The previous JavaScript/jQuery snippet looks for the <div> info box with an “id” of “box1” and fades the info box out when the user clicks on it.

If you want to make all of the <cf_infoBox> instances fade out or hide when clicked, you can uncomment the second block of code in the snippet above. This code looks for any <div> tags with a class name of “infoBox” (which is all of them) and then calls the jQuery hide() method on that info box.

Leave a Reply

Your email address will not be published.