Overwriting HTML tags using cfimport

Posted At : April 11, 2007 3:59 PM | Posted By : Mark Drew
Related Categories: coldfusion, tips

Here is a quick, ColdFusion tip about using cfimport that I learned many years ago in some ColdFusion training I did for CFMX 6, but I guess its still relevant.

You can re-implement any HTML tag using a custom tag by using cfimport. To do this you have to firstly create a directory where you are going to store your custom tags, so lets say /htmltags under your webroot. Then at the top of the page that you are going to be doing the replacement in put the following:

<cfimport prefix="" taglib="/htmltags">

<a href="somelink">I dont like how Links are done</a>

Now in your /htmltags add a file called a.cfm with the following content:

<cfparam name="attributes.href" default="">
<cfif ThisTag.executionmode IS "start">
<a href="<cfoutput>#attributes.href#</cfoutput>" style="overWrittenStyle">
</cfif>
<cfif ThisTag.executionmode IS "end">
</a>
</cfif>

And you will get the style attribute added. This is just an example, you could loop through all the attributes and output them in the tag, and do whatever you like of course.

(now back to document writing... fun fun fun)

Comments (9) | Print | Send | del.icio.us | Digg It! | Linking Blogs | 3026 Views
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
[Add Comment] Add comments window
Terrence P Ryan's Gravatar I'm not sure where I would ever use this. But it's so frickin cool that I want to do this somewhere.

Thanks for sharing this Mark.
# Posted By Terrence P Ryan | 4/11/07 5:00 PM
Mark Drew's Gravatar If you ever get to a stage where you are parsing any field (such as adding spry to divs for example?) it makes it a lot easier.
# Posted By Mark Drew | 4/11/07 5:09 PM
Phillip Senn's Gravatar I remember toying with this about a year ago.
I was trying to use cfdocument, but the submit buttons looked ugly in the generated pdf file.
My cfinput's are styled, but they lose their styling with the cfdocument command.
Hal Helms talks about the same phenom with Jeff Peters in one of their episodes.
20 minutes into their Downtime podcast, they talk about style sheets with cfdocument.
I've never gotten around to actually doing it - it's just something I'm keeping on my radar.
Perhaps a print CSS would be better rather than creating a pdf file.
# Posted By Phillip Senn | 4/11/07 5:21 PM
Phillip Senn's Gravatar The ColdFusio Muse mused about this on May 10, 2006.

http://mkruger.cfwebtools.com/index.cfm/2006/5/10/...
# Posted By Phillip Senn | 4/11/07 6:53 PM
Dan Sorensen's Gravatar Mark: this is brilliant! I've been looking for a way to do this programatically. I modified your custom tag slightly to check if a given link points outside my server and appends an offsite link icon to outgoing links.

Replace your executionmode IS start with the following:
<cfset linkStyle = "normalLink">
   
<cfif FindNoCase("http://";, attributes.href) AND NOT FindNoCase(cgi.SERVER_NAME, attributes.href)>
<cfset linkStyle = "offsiteLink">
</cfif>
<cfoutput>
<a href="#attributes.href#" class="#linkStyle#">
</cfoutput>
</cfif>

Then add the following CSS to your stylesheet:
a.normalLink {/*stying for internal links here */}
a.offsiteLink {padding-right: 12px; background: url(/icons/offsite.gif) no-repeat right;}

Note: You'll need to find a little offsite icon image to reference with your CSS. You can see an example of my icon at my page here: http://www.nwserviceacademy.net/apply.cfm

Thank for the good idea. :-)
# Posted By Dan Sorensen | 4/11/07 6:57 PM
Mark Drew's Gravatar @Phillip: I didnt mean for it to be groundbreaking, it was a solution for a question I was asked today, but then we decided to do something else (there was a different problem) and I realised Tim Buntel showed us this ages ago (when CFMX 6 come out) ... and its strange that I dont see more peope (ab)using this technique!

@Dan: that is a great little hint, I think we should put this into blog CFC, of course, I don't thing it would work if you are outputting from a query. You would have to render the content down and add the import, which is a bit annoying.
# Posted By Mark Drew | 4/11/07 10:03 PM
Marcos Placona's Gravatar cfimport is very nice, I just hate having to use it in every single template. There should be a way to globally call it.

Nice tip though!

Cheers
# Posted By Marcos Placona | 4/12/07 8:51 AM
Phillip Senn's Gravatar My comments were to reinforce that if a reader were interested in this topic, there was another blog post for more information.
I wasn't trying to say "This is old news".
I was trying to encourage anyone interested in developing this idea further.
# Posted By Phillip Senn | 4/12/07 5:50 PM
Mark Drew's Gravatar Point taken Phillip ;)

Still thinking of more ways to (ab)use this too...
# Posted By Mark Drew | 4/12/07 6:03 PM
[Add Comment]