Webskin Templates
Cutting up the html
Now we have to cut up the HTML and separate parts into header, footer and content. You will have to open up other html templates supplied to compare with and find what parts are common to all so we can separate the header and the footer. For the Daemon Home page I have marked out what my header, footer and content will be. See Figure 2.3
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<div class="featurebox search">
<form action="devtodo">
<label for="searchbox"><b>Search</b></label>
<input id="searchbox" name="searchbox" type="text" />
<input type="submit" value="Go" />
</form>
</div>
|
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 © 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 © 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
Putting farcy into a template
Templates are stored under the webskin directory and under the different object types. In this example we will be using a dmHtml content type. The template we will modify is the displayPageStandard.cfm. The first stage in this process is to include the header and the footer. My displayPageStandarde.cfm. looks like this at this stage.
...
<!--- @@displayname: Standard Page --->
<!--- @@author: code:GAVIN STEWART (gavin@daemon.com.au) styles:Peter Ottery (pottery@daemon.com.au)--->
<cfsetting enablecfoutputonly="yes">
<cfimport taglib="/farcry/farcry_core/tags/container" prefix="con">
<cfimport taglib="/farcry/farcry_core/tags/webskin" prefix="skin">
<cfmodule template="/farcry/#application.applicationname#/webskin/includes/daemonHeader.cfm"
pagetitle="#stObj.title#">
<cfoutput>
<h1>Conent goes here</h1>
</cfoutput>
<!--- include standard Sidebar, we have to pass through the object structure cause it is needed in the sidebar--->
<cfmodule template="/farcry/#application.applicationname#/webskin/includes/standardSidebar.cfm" object="#stObj#">
<cfmodule template="/farcry/#application.applicationname#/webskin/includes/daemonFooter.cfm">
<cfsetting enablecfoutputonly="no">
Figure 4.1
Lets test if things are working. Log into farcry and assign the home page content item a template of "Standard Page" and test to see if the home page is now rendering the header and footer and displaying "Content goes here" in big letters. If the page doesn't look write check the following
*Check to see if coldfusion has thrown an error by appending &debug=1 to end of the URL. If there is an error then debug accordingly
*Make sure the header and footer files are in the correct location i.e. the includes directory under the webskin directory
*Recheck all your output tags. You might want to remove all white space control to make sure you are getting the page and implement again once the problem has been found
The next stage is to copy and paste some mark-up from a html page into the content area. My displayPageStandard.cfm now looks like this
| Code Block | ||
|---|---|---|
| xml | xml |
<!--- @@displayname: Standard Page --->
<!--- @@author: code:GAVIN STEWART (gavin@daemon.com.au) styles:Peter Ottery (pottery@daemon.com.au)--->
<cfsetting enablecfoutputonly="yes">
<cfimport taglib="/farcry/farcry_core/tags/container" prefix="con">
<cfimport taglib="/farcry/farcry_core/tags/webskin" prefix="skin">
<cfmodule template="/farcry/#application.applicationname#/webskin/includes/daemonHeader.cfm"
pagetitle="#stObj.title#">
<cfoutput>
<div id="main">
<h1><span>End to end online solutions</span></h1>
<p>Daemon has extensive experience in all aspects of technical web application
development utilising the Macromedia range of server and development products.
Our professional services team has extensive experience across ColdFusion, Flash MX,
Flash Remoting, Flash Communications Server, Java, XML, Linux, Windows and Unix systems,
SQL and Oracle databases.
<span class="linkset-moreinfo"><strong>More information:</strong>
<a href="devtodo">Web Development</a> | <a href="devtodo">Design</a> |
<a href="devtodo">Content Management</a></span>
</p>
<h2><span>Outsource training & services</span></h2>
<p>This combination of skills means that whether you are updating an
existing web-based business application to take advantage of the latest
products and technologies, or are planning a completely new project,
Daemon can provide the professional guidance, technical expertise and real-world
experience you are looking for.
<span class="linkset-moreinfo"><strong>More information:</strong>
<a href="devtodo">Website support</a> | <a href="devtodo">Training</a> |
<a href="devtodo">Products</a></span>
</p>
<hr />
<h2><span>All Services:</span></h2>
<ul class="splitlist">
<li><a href="devtodo">Website Development</a></li>
<li><a href="devtodo">Content Management</a></li>
<li><a href="devtodo">Case Studies</a></li>
<li><a href="devtodo">Custom Development</a></li>
<li><a href="devtodo">Code Reviews</a></li>
<li><a href="devtodo">Usability Reviews</a></li>
</ul>
<ul class="splitlist">
<li><a href="devtodo">Graphic Design</a></li>
<li><a href="devtodo">Information Architecture</a></li>
<li><a href="devtodo">Database Development</a></li>
<li><a href="devtodo">E-Commerce Solutions</a></li>
<li><a href="devtodo">Flash Development</a></li>
<li><a href="devtodo">Game Design</a></li>
</ul>
<br class="clear" />
<hr />
<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>
</cfoutput>
<!--- include standard Sidebar, we have to pass through the object structure cause it is needed in the sidebar--->
<cfmodule template="/farcry/#application.applicationname#/webskin/includes/standardSidebar.cfm" object="#stObj#">
<cfmodule template="/farcry/#application.applicationname#/webskin/includes/daemonFooter.cfm">
<cfsetting enablecfoutputonly="no">
|