Tutorial to show how to use a custom tag.
Replace (<) with "<".
PSP will not allow some tags in the uploads.
Consider this HTML as an example:
(<)html>
(<)head>(<)title>Page Title (<)/title>
(<)/head>
(<)body>
(<)table width="800">
(<)tr>
(<)!--- Header --->
(<)td>
Header goes here(<)/td>
(<)/tr>
(<)tr>
(<)td>Menu or navigation goes here(<)/td>
(<)/tr>
(<)tr>
(<)td>!! Dynamic Content will go here !!(<)/td>
(<)/tr>
(<)tr>
(<)td>Some footer goes here(<)/td>
(<)/tr>
(<)/table>
(<)/body>(<)/html>
Its pretty straight forward for those who know HTML. Now consider the above example spread across 50 to 200 cfm files. When you want to change the back ground color of all your pages, then you have a lot of work on your hands.
With Cold Fusion, you create one custom tag that will hold all that static HTML. Then take your existing pages, and delete all the same HTML and wrap your code in the custom tag.
I know, I know, thats just as much work as change the back ground color on all your pages. But once you have your template in place, you can add or change anything about it making your change reflect across all your pages that use it.
If we take the above code and chop it into three parts, you will have the start of the template, the body, and the end of the template.
In the above code, we are only concerned with the part that says, !!!Dynamic Content !!!…
The rest of the code will not change. Thats our template.
Lets take the above code and turn it into a custom tag we can wrap around our dynamic code.
Create a new file called template.cfm
Add this section of code to the very top of your template page.
-------
(<)cfif ISDEFINED("thistag.executionmode") IS False>
(<)cfset thistag.executionmode = "start">
(<)/cfif>
(<)cfif thistag.executionmode is 'start'>
-------
These calls are using the “ThisTag.ExecutionMode” variable.
When a tag is called, the ExecutionMode is “Start” when it ends its “End”.
To call your tag, you would use something like this: (<)cf_filename>
In our situation we will be using the end tag too, (<)/cf_filename>
To make your template truly work, you have to think about every aspect of your static page that changes with each new page. Like the title, or calling javascript functions with the body onLoad, or similar events.
To handle this all you have to do is give your template some attributes. Like the following:
-----
(<)cfset pagetitle = "RINO Information Systems. - Blank Template Page">
(<)cfparam name="attributes.doctitle" default="#pagetitle#">
-----
We set a default page title variable called “pagetitle”.
Then we make a few params that hold our template attributes one of which is called “attributes.doctitle” its just a name I choose, you could use any name you want, but it has to have the “Attributes” scope on it.
Now I went ahead and created 3 body tag event attributes.
-----
(<)cfparam name="attributes.onload" default="">
(<)cfparam name="attributes.onfocus" default="">
(<)cfparam name="attributes.onresize" default="">
-----
Now I set my page title with my passed attribute value or the default.
-----
(<)cfoutput>
(<)title>#attributes.doctitle#(<)/title>
(<)/cfoutput>
-----
You can assign any number of attributes. And to call them inside of your template page, just use the #attributes.name#.
Next is our body tag. Again I could have created a background color attribute but this is just an example. I choose to pass the entire body tag attributes and values into my template attribute for my body events, meaning the variable
-----
#attributes.onload#
-----
would contain the text:
-----
“onLoad=’MyFunction()’;”
-----
(if I passed it one)
You could just use the function name instead.
-----
(<)body bgcolor="##FFFFFF" #attributes.onload# #attributes.onfocus# #attributes.onresize#>
-----
But if you don’t pass the attribute, then your body tag would contain
(<)body onLoad=’’> .
So I choose the other method.
The rest is very straight forward. From the above code what we have left is the following:
-------------------
(<)table>
(<)tr>
(<)!--- Header --->
(<)td>Header goes here, maybe a pic or something(<)/td>
(<)/tr>
(<)tr>
(<)td>Menu or navigation goes here(<)/td>
(<)/tr>
(<)tr>
(<)td>
<--- Content will go here --->
<--- End Content --->
(<)cfelse>
(<)/td>
(<)/tr>
(<)tr>
(<)td>Some footer goes here(<)/td>
(<)/tr>
(<)/table>
(<)/body>
(<)/html>
(<)/cfif>
-------------------
Notice the ?
Save your file as template.cfm, copy the above and finish it out.
Now, to wrap your template around your dynamic content, all you have to do is:
make a new file called NewFile.cfm:
-----
(<)cf_template doctitle=”My Page Title”>
Here is my dymanic content!!!
This part of the content will show up just after the <--- (<)cfelse> ---> tag above.
(<)/cf_template>
---------
Paste the above into your new file with NO OTHER Tags.
Thats It! you now have a static site wide template that you can modify once and the changes will be site wide. Pretty simple huh?
Your template can also contain other custom tags.
Here is all the code together for the template.cfm page:
(<)cfif ISDEFINED("thistag.executionmode") IS False>
(<)cfset thistag.executionmode = "start">
(<)/cfif>
(<)cfif thistag.executionmode is 'start'>
(<)html>
(<)head>
(<)cfset pagetitle = "RINO Information Systems. - Blank Template Page">
(<)cfparam name="attributes.doctitle" default="#pagetitle#">
(<)cfparam name="attributes.onload" default="">
(<)cfoutput>
(<)title>#attributes.doctitle#(<)/title>
(
(<)/head>
(<)cfoutput>
(<)body #attributes.onload#>
(<)/cfoutput>
(<)table width="800">
(<)tr>
(<)!--- Header --->
(<)td>Header goes here, maybe a pic or something(<)/td>
(<)/tr>
(<)tr>
(<)td>Menu or navigation goes here(<)/td>
(<)/tr>
(<)tr>
(<)td>
(<)!--- Content will go here --->
(<)!--- End Content --->
(<)cfelse>
(<)/td>
(<)/tr>
(<)tr>
(<)td>Some footer goes here(<)/td>
(<)/tr>
(<)/table>
(<)/body>
(<)/html>
(<)/cfif>
--------------
And to call your template you would use the following:
(<)cf_template doctitle“My Page Title”>
Page content would go here
(<)/cf_template>
The tag itself can be broken down to the following:
1) “(<)cf_” donotes the tag as custom and calls "filename" .cfm
2) “(<)cf_” + filename (without DOT.CFM) or your custom tag.
3) “(<)cf_” + FileName + attributes(Values) + “>” attribute names and their values
4) “(<)/cf_” + FileName + “>” Used to wrap your tag around other content.
You can use your custom tag in the following way as well:
custom tag myTag.cfm:
(<)cfoutput>#Now()#(<)/cfoutput>
AnyOtherFile.cfm
(<)cf_myTag/>
Would output todays date in every file that the myTag custom tag is called from.
Since the myTag.cfm file will not need execution mode processing and will not use the “End Tag” then we can just plop it any where on any page even in other custom tags.
You can even set variable values in the calling pages from inside your custom tags.
in template.cfm:
(<)cfset caller.MyName = "Tim">
in the calling page:
(<)cf_template>
(<)cfparam name="MyName" default="">
(<)cfoutput>#myName#(<)/cfoutput>
would output "Tim"
(<)/cf_template>
I use custom tags to write every possible template for my sites.
You may only need one, or you might need 100. The point is to “Reuse Code”, and this saves you LOTS of time and head aches later on.
If you found this interesting and helpfull or even usefull, please vote and comment if you would like.
Thankx |
Report Bad Submission