Versions Compared

Old Version 1

changes.mady.by.user Former user

Saved on

compared with

New Version Current

changes.mady.by.user Geoff Bowers

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

Getting

...

started to skin farcry (3/6 on Webskin Template Authoring)

Now lets have a look at the farcry project architecture.

Note

...

This

...

manual is based on the assumption that you already have a working farcry project to modify. If you need to install farcry and get a project working you will need to follow the installation guide at http://farcry.daemon.com.au/go/documentation/user-manuals

Note: these screen shots have been taken from within cfeclipse so don't be concerned if it looks different from your file system.
The folder we are interested at the moment is the www, the document root for your website. Now you have to copy all the necessary folders supplied by the designer into the www directory and replace the existing ones and add the new ones if necessary. For example the following folders and files were supplied for the new Daemon website.

...

Now that we have all the images and styles in place it is time to check and see if the style and images are rendering correctly. Copy one of the .html pages over to the root directory (www) and in the URL go to that specific page. In my case I used the homepage.html. For example type into the URL address bar. http://daemonmx.localhost/homepage.html. Note: I set this website up locally on my machine and then commit the changes via cvs. Depending on your working environment this will be different.
If the page doesn't look as it should and the images are not being displayed then you have either copied the directories to the wrong place or the permissions on the directories haven't been set.

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

...


<!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>Daemon: serious web solutions</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>

	<div id="nav">
		<ul>
		<li id="nav-1"><a href="homepage.html"><strong>Home</strong></a></li>
		<li id="nav-2"><a href="solutions.html"><strong>Solutions</strong></a></li>
		<li id="nav-3"><a href="services.html" class="active"><strong>Services</strong></a></li>
		<li id="nav-4"><a href="casestudies.html"><strong>Case studies</strong></a></li>
		<li id="nav-5" class="last"><a href="aboutus.html"><strong>About us</strong></a></li>
		</ul>
	</div>
	
	<div id="content">

...


<div id="main">

<h1><span>Services Daemon offer</span></h1>
			
	<div class="superlist">
		<h2><span><a href="devtodo">Training</a></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 
		expertise and real-world experience you are looking for.
		<br />
		<strong>More information:</strong> <a href="devtodo">Macromedia</a> | 
		<a href="devtodo">FarCry Training</a>
		</p>
		<h2><span><a href="devtodo">Support</a></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
		<br />
		<strong>More information:</strong> <a href="devtodo">FarCry support</a> | 
		<a href="devtodo">WebTeam</a> | <a href="devtodo">Custom agreements</a>
		</p>
		<h2><span><a href="devtodo">Products</a></span></h2>
		<p>
		Daemon can provide the professional guidance, technical expertise and 
		real-world experience you are looking for.Daemon can provide experience 
		you are looking for.
		<br />
		<strong>More information:</strong> <a href="devtodo">MLVP</a>
		</p>
	</div>
</div>
<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>
			
		<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>	
		<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>

...


</div>
</body>
</html>

Figure 2.3

You can see the separate areas of the website. We have a clear header, footer and content area. We now have to separate them into different templates. You will put them into the header and footer files under the includes directory under the web skin directory of the farcy project.

Create two new files in the include directory one called project_header.cfm and another called project_footer.cfm depending on what the project is called project will be the name of your project. In my case I use daemon_header.cfm and daemon_footer.cfm. You will notice that there is all ready dm_header.cfm and dm_footer.cfm if this is a brand new project. I would keep them there for now so you can reference them as a guide as you go. The content section will be put into the dmHTML (and other content types) directory at a later stage. Copy and paste the header and footer sections into the in new header and footer files. At this point my daemon_header.cfm file looks like this.

...


<!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>Daemon: serious web solutions</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>

	<div id="nav">
		<ul>
		<li id="nav-1"><a href="homepage.html"><strong>Home</strong></a></li>
		<li id="nav-2"><a href="solutions.html"><strong>Solutions</strong></a></li>
		<li id="nav-3"><a href="services.html" class="active"><strong>Services</strong></a></li>
		<li id="nav-4"><a href="casestudies.html"><strong>Case studies</strong></a></li>
		<li id="nav-5" class="last"><a href="aboutus.html"><strong>About us</strong></a></li>
		</ul>
	</div>
	
	<div id="content">

Figure 2.4

And my daemon_footer.cfm looks like this

...


</div>
</body>
</html>

Figure 2.5
For this design I am going to create another file in the includes directory called sidebar.cfm. Obviously you will not need to do this if your web page design does not have sidebarsâ˜ș. Copy the sidebar part of the content area and paste it into the sidebar.cfm file.

At this point my sidebar.cfm looks like this

...


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

Figure 2.6

Lets modify this example further and separate the search form. This way we will be able to include the form into any other template. For example you might have different sidebars one for the homepage and one for standard page displays. Create another file in the includes directory called searchForm.cfm. Once again this may not be applicable for your designs if there is not a search form.

My Sidebar.cfm now looks like this.

...


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

Figure 2.7

And the searchForm.cfm now looks like this.

...


<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 &#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

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

...

Next step: D Webskin Templates (4/6 on Webskin Template Authoring)