Code Reuse - Hands On 14

gistfile1.md

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" />
    

    	</li>
    	<li>
    		Replace the <span class="code">&lt;cfinclude></span> tag, which includes the <span class="code">header.cfm</span> file, with a call to your custom tag. The code should look similar to this:
    

    <layout:page>	
    

    	</li>
    	<li>
    		Replace the <span class="code">&lt;cfinclude></span> tag, which includes the <span class="code">footer.cfm</span> file, with a closing tag to your custom tag. Your code should look similar to this:
    

    </layout:page>
    

    	</li>
    	<li>
    		Open up your browser and navigate to the <span class="code">/www/about.cfm</span> 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.
    	</li>
    	<li>
    		Open up the <span class="code">/www/customtags/page.cfm</span> file in your code editor.
    	</li>
    	<li>
    		Find the <span class="code">&lt;cfparam></span> tag that should be on or around line 2.
    	</li>
    	<li>
    		Change the <span class="code">name</span> attribute from <span class="code">section</span> to <span class="code">attributes.section</span>.
    	</li>
    	<li>
    		Locate the Navigation <span class="code">&lt;ul></span> block on or around line 51. For each reference to section in the <span class="code">&lt;cfif></span> tags in the <span class="code">&lt;li></span> tags, update them to read <span class="code">attributes.section</span> rather than <span class="code">section</span>. 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>	
    

    	</li>
    	<li>
    		Refresh the <span class="code">about.cfm</span> page in your browser notice the home nav item is highlighted.
    	</li>
    	<li>
    		Open up the <span class="code">/www/about.cfm</span> file in your code editor.
    	</li>
    	<li>
    		Locate the <span class="code">&lt;layout:page></span> tag and add an attribute called <span class="code">section</span> with a value of "about". Your code should look similar to this:
    

    <layout:page section="about">	
    

    	</li>
    	<li>
    		Refresh the <span class="code">about.cfm</span> page in your browser and confirm that the 'About' navigation item is now highlighted.
    	</li>
    </ol>
    

    Homework

    Convert all other pages to use the page custom tag