Layout Components 1.0 Documentation: Nesting Layouts

Layout Components Information

Download from RIA Forge

Blog Entries

Nesting Layouts

Layouts can be nested by taking advantage of inheritence. For example, consider a site with a "Default" layout and a "Wide" layout, both of whom are nested inside some common HTML used for both layouts.

In this case, we could create a Base.cfc (nothing special about this name, just making a simple example) that would hold the common HTML:

<cfcomponent displayname="Base 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 XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>#arguments.title#</title>
	<link rel="stylesheet" type="text/css" href="/all.css" />
</cffunction><cffunction name="body" access="public" output="yes">
</head>
<body>
<div id="container">
	<div id="banner">
	</div>
</cffunction><cffunction name="end" access="public" output="yes"></div>
</div>
</body>
</html>
</cffunction>
</cfcomponent>

We could then create a Default.cfc that nests within that layout.

<cfcomponent displayname="Default Layout" extends="Base">
<cffunction name="body" access="public" output="yes">
#super.body()#
	<div id="sidebar">
	</div>
	<div id="contents">
</cffunction>
<cffunction name="end" access="public" output="yes"></div>
	</div>
#super.end()#
</cffunction>
</cfcomponent>

The Wide.cfc could use the same layout with different interior HTML.

<cfcomponent displayname="Wide Layout" extends="Base">
<cffunction name="body" access="public" output="yes">
#super.body()#
	<div id="contents">
</cffunction>
<cffunction name="end" access="public" output="yes"></div>
	</div>
#super.end()#
</cffunction>
</cfcomponent>