Implementing Master Page concept in ColdFusion
One of the functionality I like in asp.net platform is the master page concept, it really helpful to keep the layout clean and gives really good control to developer in terms of placement of content/data on the rendered page. Having worked on aps.net side of it, I figured it’s fairly easy to implement the similar concept in ColdFusion, let me first explain what master page is.
“Master pages allow you to create a consistent layout for the pages in your application. A single master page defines the look and feel and standard behavior that you want for all of the pages (or a group of pages) in your application. You can then create individual content pages that contain the content you want to display. When users request the content pages, they merge with the master page to produce output that combines the layout of the master page with the content from the content page.” Reference : http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx (can read more about master page..)
How does master page functionality work
a) Create a master page
You need a master page (i.e. the template) with global layout of your web application, there can be multiple templates if you want different look and feel for different section or can have just one global master page for the entire web app, part of the template you will have to also put in placeholder that can be updated by the developer that will be creating functionality for individual pages.
b) Create content page
Content page is the actual page that gets shown to the user; it’s the combination of template + the content relevant to that page. In this page the developer fills in the master page placeholder with page relevant content and there for have full control over what gets rendered to the end user.
Why is master page required in ColdFusion application?
Before I even answer this question, lets walk through the scenario of how page template are created in most of the ColdFusion application, normally the header and footer or other section gets broken into separate file like Header.cfm, footer.cfm etc etc, and the individual content page like index.cfm will include header.cfm on top and then add some html code for the page and finally include footer.cfm something like this.
<cfinclude template="header.cfm"/>
Some content, static, via db or other means.
<cfinclude template="footer.cfm"/>
So what’s the big deal?
Normally this is not a problem when you start with the project, but slowly and slowly as the number of pages for the site increases you start to realize that header and footer has to change on page by page basis, and you start introducing variables and start having conditional logic in your header and footer pages, or another situation can be that for some special pages you need to add css or javascript because those pages are doing special ajax stuff, but you don’t want to add that to header, because it will get included for all pages and that will slow down the site, so basically start adding the css and javascript withing the content page and after some time your page looks like javascript and css all over the place, plus your header and footer files have ton’s of conditional logic.
Check out http://www.sys-con.com/ and perform view source, scroll through the html and see how css and javascript is pretty much all over the page, and not consolidated in header section, where it should be right?
How does master page help?
By using master page you get multiple benefits,
- don’t have to break the layout in multiple files like the header.cfm and footer.cfm earlier
- the layout logic is clean and does not have to be conditional
- by providing placeholder at proper places you give the developer an opportunity to put in page related content
- master page maintains the rendered document structure and can help you comply with w3c standards
- Other benefits are also possible -)
How to implement Master page in coldfusion
Along with this entry I have also posted sample code, that shows standard way of using template and how that can be implemented as master page in coldfusion. The examples are self explanatory but to provide brief overview the concept is to first define master page somewhat like this (just an example).
<cfoutput><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title><cfif isDefined("variables.master_page_title")>#master_page_title#<cfelse>Free Css Layout 1</cfif></title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><link rel="stylesheet" type="text/css" href="css/style.css" /><cfif isDefined("variables.master_page_javascript")>#variables.master_page_javascript#</cfif><cfif isDefined("variables.master_page_css")>#variables.master_page_css#</cfif></head><body><div id="container"><div id="header"><h1><a href="http://www.free-css.com/free-css-layouts.php">Free CSS Layouts</a></h1></div><div id="wrapper"><div id="content"><cfif isDefined("variables.master_page_body")>#variables.master_page_body#</cfif></div></div><div id="navigation"><p><strong>Navigation Here</strong></p><ul><li><a href="http://www.free-css.com/">Free CSS Templates</a></li><li><a href="http://www.free-css.com/free-css-layouts.php">Free CSS Layouts</a></li></ul></div><div id="extra"><p><strong>More stuff here.</strong></p><p>sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p></div><div id="footer"><p>Footer</p></div></div></body></html></cfoutput>- Download this code: global_masterpage.cfm
Important thing to note is the cfif tag followed by the variable.name , basically these are the values that can be supplied by individual page developer and that gets merged when final page is rendered
The content page will look like this
<cfsavecontent variable="variables.master_page_body"><p><strong>Content here.</strong></p><p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy</p><p>Montegeraliquam sed pede in cursus praesenec vestas rhoncus wisi at wisi. Condisseloborttis enim et ipsum mauristie id felit adipiscipit ac auctortorttitor sempor. Vitantesqueat sempus non sed et mus sit vivamus purus netus hendiment. Pretiuma diam et id tempus dolor por wisi sed volutpat facilisi.</p><p>Wisiet sus adipit phasellentum elit condissim consecteturpiscing sapien vivamus et congue. Utvel tris quismod cursus liberos elit nisse curabitur tur parturpis tellenterdum. Semperligula curabitae tellentesque nulla trices vestas ristibulum id justo auctor facinia. Natisdonec consequat nibh pellus.</p><p>Vestibusodio euisque id elerisus lacus tincidunt sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p></cfsavecontent>- Download this code: index.cfm
Another example
<cfset variables.master_page_title="updated page.."><cfsavecontent variable="variables.master_page_javascript"><script language="javascript" src="http://www.cachefile.net/scripts/prototype/1.6.0.2/prototype.js" type="text/javascript"></script><script language="javascript">Event.observe(window, 'load', function() {alert("page loaded..");});</script></cfsavecontent><cfsavecontent variable="variables.master_page_css"><style type="text/css">.style1 {font-size:10px;}</style></cfsavecontent><cfsavecontent variable="variables.master_page_body"><p><strong>Content here.</strong></p><p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy</p><p>Montegeraliquam sed pede in cursus praesenec vestas rhoncus wisi at wisi. Condisseloborttis enim et ipsum mauristie id felit adipiscipit ac auctortorttitor sempor. Vitantesqueat sempus non sed et mus sit vivamus purus netus hendiment. Pretiuma diam et id tempus dolor por wisi sed volutpat facilisi.</p><p>Wisiet sus adipit phasellentum elit condissim consecteturpiscing sapien vivamus et congue. Utvel tris quismod cursus liberos elit nisse curabitur tur parturpis tellenterdum. Semperligula curabitae tellentesque nulla trices vestas ristibulum id justo auctor facinia. Natisdonec consequat nibh pellus.</p><p>Vestibusodio euisque id elerisus lacus tincidunt sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p></cfsavecontent>- Download this code: newupdates.cfm
Here you can see the content page have to supply the value to master page placeholder , also to note is that content page does not have to supply all the values, it can omit what it does not care about (that’s why the master page had conditional if logic)
The actual magic of merging master page and template page happens in the onRequestEnd.cfm file where this file basically removes all the previous content and based on setting loads the appropriate template file! Download Code to view files
Conclusion
If the master page approach is used in your web application development, you will end up getting multiple benefits
- Single template file (though you can multiple template file for certain section of site, all you have to do is create another template file and define a variable on your content page like this
<cfset request.master_page_template = "the new template/master page name"/>) - Using master page you can get rid of empty white space on your page (specially on the very top of generate html page )
- Master page gives the content page developer flexibility on how to fill in the template
- Generated html page is clean
- Don’t have to deal with multiple include files
- Overall it’s easy to use.
[Update : Most of the Coldfusion MVC framework provides template concept - but the implementation varies]
6 comments December 19th, 2008
