Layout Components 1.0 Documentation: Create a Layout Component

Layout Components Information

Download from RIA Forge

Blog Entries

Create a Layout Component

To create a layout component, start by download the Layout Components project and putting the files in the "layouts" folder of your site. Your layout should extend "layouts.layout".

The file can be any valid file name for a CFC file. It should have (at least) the following three methods: head,body,end. Preferably, with the opening function tag for each on the same line as the as the closing function tag for the preceding method.

Each of these methods should have an output="true" and no returntype (or returntype="void").

The "head" method should have all of the output up to (but not including) "</head>".

The "body" method should have all of the output from (and including) "</head>" down to (but not including) the main output area for the page.

The "end" method should have all of the output after the main output for the page.

See the Default Bryant Web Consulting Layout as an example:
<cfcomponent displayname="Default Layout" extends="layouts.layout">
<cffunction name="head" access="public" output="yes"><cfargument name="title" type="string" required="yes">
<cfcontent reset="yes"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="/all.css" />
	<link rel="stylesheet" type="text/css" href="/print.css" media="print" />
	<!--[if gte IE 5.5000]><script type="text/javascript" src="/lib/sleight.js"></script><![endif]-->
</cffunction><cffunction name="body" access="public" output="yes">
<body class="home">
<div id="pagewrapper">
	<div id="header">
		<div id="header-text"><img src="/i/d/1/title.png" width="242" height="61" alt="Bryant Web Consulting"></div>
	<div id="menu-main">
		<span id="menui-home"><a href="/index.cfm">home</a></span>
		<span id="menui-about"><a href="/about.cfm">about</a></span>
		<span id="menui-writing"><a href="/writing.cfm">writing</a></span>
		<span id="menui-tools"><a href="/tools.cfm">tools</a></span>
		<span id="menui-resources"><a href="/resources.cfm">resources</a></span>
	<div id="main">
		<div id="menu-section">
				<li><a href="/index.cfm">Home</a></li>
				<li><a href="/contact.cfm">Contact Us</a></li>
				<li><a href="/sitemap.cfm">Site Map</a></li>
		<div id="content">
			<div id="content-text">
</cffunction><cffunction name="end" access="public" output="yes">
	<div id="logo"><img src="/i/d/1/logo.png" width="113" height="72" alt=""></div>