CFWheels — Using Layouts and Stylesheets
On Page 73 of Head First Rails, we need to add a design for the meBay site.
Just like Rails, CFWheels supports layouts to create a master template and to avoid repeating yourself.
For our simple app, we could just work with the default layout located at /views/layout.cfm. But, to follow the book, let’s create a controller-specific layout at: /views/ads/layout.cfm. So, this layout.cfm in the /view/ads/ subdirectory will only be used for views associated with the ads controller.
[cf]
<!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>
<cfoutput>
<title>Ads: #params.action#</title>
#stylesheetLinkTag("default")#
</cfoutput>
</head>
<body>
<cfoutput>
<div id="wrapper">
<div id="header">
<div>
<h1>MeBay</h1>
<ul id="nav">
<li>#linkTo(text="All Ads", route="adsNoKey")#</li>
</ul>
</div>
</div>
<div id="content">
#contentForLayout()#
</div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
</cfoutput>
</body>
</html>
[/cf]
Most of this code is HTML boilerplate. #params.action# inserts the name of the current action in the Title tag. The params structure is always passed from the controller to the view. It includes the name of the action, variables, etc. You can always cfdump it out if you want to see what all is in there.
#stylesheetLinkTag(”default”)# uses another CFWheels helper function. By convention, stylesheets are located in the /stylesheets directory. So this function builds the link to our stylesheet named default.css. Download the code for Chapter 2 from the Head First Rails website, and get default.css from the /public/stylesheets/ folder. In CFWheels, put default.css in your /stylesheets folder. If you have trouble with the stylesheet, make sure all the images references are correct. If your web server configuration is different, you might need to adjust the paths.
On line 16, we’ve setup a link to our index action.
On line 22, you see #contentForLayout()#. This is where CFWheels puts the content from the other view pages — show.cfm and index.cfm. It’s the equivalent of <%= yield %> in Rails.
That’s it! Now we have a pretty, styled meBay application. Visit http://localhost/index.cfm/ads/ and see how pretty things look.
Next, it’s on to Chapter 3. In software development, things always change. And, now meBay wants to let people post ads online!
