<<

Code Reuse

Hands On 14

By Simon Free (Bio)
gist

In this hands on, we will create a custom tag that will handle the display of the header and footer.

Tags Used: <cfif>, <cfelse>, <cfset>, <cfimport>

  1. Create a folder called customTags in the /www/ folder.
  2. Create a file called page.cfm in the /www/customTags/ folder.
  3. Open the /www/customTags/page.cfm file in your code editor.
  4. Create a <cfif> tag that checks if thisTag.executionMode is equal to "Start".
  5. Create a <cfelse> tag after the <cfif> tag.
  6. Create a closing </cfif> tag after the <cfelse> tag.
  7. Your code should look similar to this:
    <cfif thisTag.executionMode eq "start">
    	
    <cfelse>
    	
    </cfif>		
    
  8. Open up the /www/includes/header.cfm file in your code editor.
  9. Copy the contents of header.cfm and paste them into the first part of the <cfif> tag block in page.cfm.
  10. Open up the /www/includes/footer.cfm file in your code editor.
  11. Copy the contents of footer.cfm and paste them into the <cfelse> part of the <cfif> statement in page.cfm.
  12. Open up the /www/about.cfm file in your code editor and navigate to the <cfset> tag located on or around line 4.
  13. Replace the <cfset> tag with a <cfimport> tag with the following attributes:
    • taglib: customTags/
    • prefix: layout
  14. Your code should look similar to this:
    <cfimport taglib="customTags/" prefix="layout" />
    
  15. Replace the <cfinclude> tag, which includes the header.cfm file, with a call to your custom tag. The code should look similar to this:
    <layout:page>	
    
  16. Replace the <cfinclude> tag, which includes the footer.cfm file, with a closing tag to your custom tag. Your code should look similar to this:
    </layout:page>
    
  17. Open up your browser and navigate to the /www/about.cfm page. Notice that the page loads as it did before. The page is now using your custom tag rather than the include files. The only exception is that the 'Home' navigation item is being selected rather than the 'About' navigation item.
  18. Open up the /www/customtags/page.cfm file in your code editor.
  19. Find the <cfparam> tag that should be on or around line 2.
  20. Change the name attribute from section to attributes.section.
  21. Locate the Navigation <ul> block on or around line 51. For each reference to section in the <cfif> tags in the <li> tags, update them to read attributes.section rather than section. Your code should look similar to this:
    <ul class="arrowunderline" id="nav">
      <li class="home" <cfif attributes.section eq "home">id="selected"</cfif>><a href="index.cfm">Home</a></li>
      <li class="about" <cfif attributes.section eq "about">id="selected"</cfif>><a href="about.cfm">About</a></li>
      <li class="resume" <cfif attributes.section eq "resume">id="selected"</cfif>><a href="resume.cfm">Resume</a></li>
      <li class="blog" <cfif attributes.section eq "blog">id="selected"</cfif>><a href="blog.cfm">Blog</a></li>
      <li class="portfolio" <cfif attributes.section eq "portfolio">id="selected"</cfif>><a href="portfolio.cfm">Portfolio</a></li>
      <li class="contact" <cfif attributes.section eq "contact">id="selected"</cfif>><a href="contact.cfm">Contact</a></li>	
    </ul>	
    
  22. Refresh the about.cfm page in your browser notice the home nav item is highlighted.
  23. Open up the /www/about.cfm file in your code editor.
  24. Locate the <layout:page> tag and add an attribute called section with a value of "about". Your code should look similar to this:
    <layout:page section="about">	
    
  25. Refresh the about.cfm page in your browser and confirm that the 'About' navigation item is now highlighted.

Homework

Convert all other pages to use the page custom tag