CFWheels — Using Layouts and Stylesheets

September 6th, 2009
No comments

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!

Clarke Bishop CFWheels, ColdFusion

CFWheels — Adding a Custom Index Page

September 6th, 2009
No comments

Starting on Page 73 of Head First Rails, we need to add an index page so that people can find the pages they want!

First, let’s add a new route so that http://localhost/index.cfm/ads/ goes to the new index action we’ll add in a minute.

Open up /config/routes.cfm, and change it to:

[cf]
<cfset addRoute(name="ads", pattern="/ads/[key]", controller="ads", action="show")>
<cfset addRoute(name="adsNoKey", pattern="/ads/", controller="ads", action="index")>
<cfset addRoute(name="catchall", pattern="[path]", controller="redirect", action="index")>
<cfset addRoute(name="home", pattern="", controller="redirect", action="index")>
[/cf]

Notice the new route on line 2: <cfset addRoute(name=”adsNoKey”, pattern=”/ads/”, controller=”ads”, action=”index”)>. CFWheels checks the routes in order. So, if the URL pattern matches /ads/[key], it will go to the show action. But, if the key isn’t there, it matches the /ads/ pattern and goes to the new index action.

Now, we need to add an index action to the controller and then an index.cfm view. Open up /controllers/Ads.cfc and add the new index function. Leave the show function alone.

[cf]
<!— ads/index —>
<cffunction name="index">
<cfset ads = model("Ad").findAll()>
<cfdump var="#ads#"><cfabort>
</cffunction>
[/cf]

Notice the that we set ads = model(“Ad”).findAll().  This tells Wheels, to go get the Ad model, and findAll the data — Pretty Powerful! The data comes back as a ColdFusion query object.

For testing, put the <cfdump>line  in your controller, and send your browser to:  http://localhost/index.cfm/ads/. You’ll see the query dumped out in all its glory! This is a pretty good debugging trick. Add a <cfdump> to your controller to see what variables and data the controller is passing to the view. Remove the <cfdump> line, and let’s go create the view.

Go create /views/ads/index.cfm:

[cf]
<h1>All Ads</h1>
<ul>
<cfoutput query="ads">
<li>#linkTo(text="#ads.name#", route="ads", key="#ads.id#")#</li>
</cfoutput>
</ul>
[/cf]

Pretty simple! Specifying the query attribute in <cfoutput> makes this just like a <cfloop>. You end up with a bunch of List Items (<li>) — One for each record in the query we got from the controller.

linkTo() is another cool Wheels helper function. You could just use an <a> tag. However, using the linkTo() function is a best practice because it makes your application more portable. We specified the “ads” route in the function. If, later on, we changed our subfolders or URL rewriting, everything would still work.

That’s it. Send your browser to: http://localhost/index.cfm/ads/ and you should see a list of ads. Each ad will have a link that takes you to the show action and displays the ad.

Clarke Bishop CFWheels, ColdFusion