E Putting farcry magic into your header and footer and other includes

So far we have our html cut up and can now start putting farcry magic into the header. First we have to implement white space control. We do this by adding <cfsetting enableoutputonly ='true'> at the top of the page and <cfsetting enableoutputonly ='false'> at the bottom of the page. Anything in between that needs to be displayed must be within cfoutput tags. Next lets make the navigation generic and dynamically generated from farcry by including _genericNav.cfm.

We also should change the title so it picks up relevant farcry content by adding this code

 <title>#application.config.general.sitetitle#: #request.stObj.label#</title>.

My daemon_Header.cfm now looks like this.

<cfsetting enablecfoutputonly="yes">
<cfoutput>
<cfimport taglib="/farcry/farcry_core/tags/webskin" prefix="skin">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
		  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>#application.config.general.sitetitle#: #attributes.pageTitle#</title>
<style type="text/css" title="default" media="screen">@import url(css/main.css);</style>
<link rel="stylesheet" type="text/css" href="css/sIFR-print.css" media="print" />
<script src="sifr/sifr.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">

	<div id="header">
	<a href="homepage.html"><img src="images/daemon_logo.gif" 
		id="logo" alt="Daemon - Serious web solutions" /></a>
	</div>

	<!--- include primary navigation --->
		</cfoutput>
			<skin:genericNav navID="#application.navid.home#" 
id="nav" depth="1" bActive="true" bIncludeHome="true" bLast=1>
		<cfoutput>
	
	<div id="content">
<cfsetting enablecfoutputonly="no">

Figure 3.1

We don't have to do much to the footer except for the white space control. My daemon_footer.cfm now looks like this.

<cfsetting enablecfoutputonly="yes">	
</div>
</body>
</html>	
<cfsetting enablecfoutputonly="no">

Figure 3.2

Lets do the same for our sidebar and search form. The sidebar now looks like this.

<cfsetting enablecfoutputonly="yes">	
<cfimport taglib="/farcry/farcry_core/tags/container" prefix="con">
<cfoutput>
<div id="sidebar">
		
	<div id="subnav">
		<h4>Services</h4>
		<ul>
			<li><a href="devtodo">Training</a></li>
			<li><a href="devtodo">Support</a></li>
			<li><a href="devtodo" class="last">Products</a></li>
			</ul>
		</div>
		<!--- include search form --->
		</cfoutput><cfinclude template="searchForm.cfm"><cfoutput>
		<h2><span><a href="devtodo">Recent Daemon News</a></span></h2>
		<h4 class="date">January 26TH 2005</h4>
		<p>
		Daemon's application development services are underpinned by 
		best-practice coding standards and formal production methodologies 
		to ensure the effective delivery of complex, 
		<a href="devtodo">read more</a>
		</p>	
		<h4 class="date">December 16TH 2004</h4>
		<p>
		Daemon's application development services are underpinned by 
		best-practice coding standards and formal production methodologies 
		to ensure the effective delivery of complex, 
		<a href="devtodo">read more</a>
		</p>
	</div>
	<div id="footer">Copyright &#169; 2005 Daemon Pty Ltd</div>	
</div>
</cfoutput>

Figure 3.4

Notice search form is being included. This gives flexibility to the search form so we can include it in any template. Also notice that I have closed and reopened the output tags around the include. This is to preserve white space control If we include the include in our cfoutput we effectively output the white space inside the include.

Including Containers

A containers can be thought of as a place holder for listing rules for displaying content types such as news, facts etc.

We want to get rid of all the hard coded area so we can give the user a choice of what they want to put into the area. I think a container would be perfect in this example.

My side bar looks like this.

<cfsetting enablecfoutputonly="yes">	
<cfimport taglib="/farcry/farcry_core/tags/container" prefix="con">
<cfoutput>
<div id="sidebar">
		
	<div id="subnav">
		<h4>Services</h4>
		<ul>
			<li><a href="devtodo">Training</a></li>
			<li><a href="devtodo">Support</a></li>
			<li><a href="devtodo" class="last">Products</a></li>
			</ul>
		</div>
		<!--- include search form --->
		</cfoutput><cfinclude template="searchForm.cfm">
		<con:container label="#attributes.object.objectID#_sideBar"><cfoutput>
	</div>
	<div id="footer">Copyright &#169; 2005 Daemon Pty Ltd</div>	
</div>
</cfoutput>
<cfsetting enablecfoutputonly="no">

Figure 3.5

Notice how we labelled the container #stObj.ObjectID#_sidebar. This is to give the sidebar a unique name so the user can change this rule on different pages. Warning: If we were to label the conatainer just "sidebar" then the same rule and same display would appear on every page that uses this side bar. This is old school farcry- do not do this, you want shared containers.

We should modify the form search template so it has white space control and so the form works.

<cfsetting enablecfoutputonly="yes">
<div class="featurebox search">
	<form action="#application.url.conjurer#?objectid=#application.navid.search#">
	<label for="criteria"><b>Search</b></label>
	<input id="criteria" name="criteria" type="text" />
	<input type="submit" value="Go" />
	</form>	
</div>	
<cfsetting enablecfoutputonly="no">

Figure 3.6