If you missed the part 1 of this tutorial, you may get it here.
Now that we have set up the main Fusebox structure for our application, let’s continue to implement it.
Layouts
Clik here to view.
Figure 2.1
I want you to pay particular attention to the circuit “layout”. That circuit will not be called by any page, it is an internal circuit, basically a “view” circuit which will assemble all the contents of the page into the layout templates we choose.
Now that we have our “Hello World” page working, let’s play a little with layouts. Suppose you want to have a header, content and footer as your layout (Figure 2.1). First you will have to create the contents for the header, main content and footer blocks and then insert them into the layout template. Let’s see how it is done.
On the fusebox.xml.cfm template there is a tag <globalfuseactions>, followed by two tags <preprocess> and <postprocess>. Every action that you include between those tags will be processed either before or after Fusebox assembles the page.
We will set the header, footer and the layout actions into the <postprocess> tag, because they will be shown at the end of all Fusebox processing.
The code is:
<globalfuseactions>
<preprocess></preprocess>
<postprocess>
<fuseaction action="vhome.header" contentvariable="content.header" />
<fuseaction action="vhome.footer" contentvariable="content.footer" />
<fuseaction action="layout.checkLayout" />
</postProcess>
</globalfuseaction>
Note, in the <postprocess> block, the attribute “contentvariable” in the fuseaction tag. That means Fusebox will process that action and will place the results into a variable instead of rendering it to the screen. Later on, we will use that variable in the layout context. We are calling actions from the “view” of the home circuit. That’s why we are calling the fuseactions vhome.header and vhome.footer before the layout.checklayout, because we want to load the header and footer into variables that will be used in the layout template.
So, let’s work now on the “layout” circuit and prepare the header, footer and default layout templates.
Create a ColdFusion template named dspHeader.cfm and another dspFooter.cfm inside the “home view” folder: \circuits\home\vhome. Add the following code to the templates:
dspHeader.cfm
<cfoutput> <h2>#request.pageTitle#></h2> <hr/> </cfoutput>
dspFooter.cfm
<hr/> <h4>©2009 Your Name</h4>
Now, let’s edit the circuit.xml.cfm template in the “vhome” circuit:
<!DOCTYPE circuit>
<? xml version="1.0" encoding="UTF-8"?>
<!-- vhome -->
<circuit access="internal" xmlns:cf="cf/">
<fuseaction name="main">
<set name=”request.pageTitle” value=”Fusebox Tutorial” overwrite=”true” />
<include template="dspMain" required="true" />
</fuseaction>
<fuseaction name="header">
<include template="dspHeader" required="true" />
</fuseaction>
<fuseaction name="footer">
<include template="dspFooter" required="true" />
</fuseaction>
</circuit>
With that, we accomplished the Header and Footer to be included in our layout. Notice the setting of the variable request.pageTitle with an attribute of overwrite=’true’; that will be used in the header when included into the layout template. Now, let’s look at the layout itself.
You noticed the call to the layout fuseaction in the fusebox.xml.cfm under the tag <postprocess> in the global fuseactions section:
<postprocess> <fuseaction action="layout.checkLayout" /> </postProcess>
That fuseaction will call the “checkLayout” fuse in the circuit “layout”, and it will check if we want to use a layout or which layout template to load.
So, let’s write that “checkLayout” in \circuits\layout\circuit.xml.cfm:
<? xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE circuit>
<!-- circuit: LAYOUT -->
<circuit access="internal" xmlns:cf="cf/">
<fuseaction name="checkLayout">
<set name="request.useLayout" value="default" overwrite="false" />
<if condition="request.useLayout is 'default'">
<true>
<include template="layDefault" required="true" />
</true>
</if>
<if condition="request.useLayout is 'brochure'">
<true>
<include template="layBrochure" required="true" />
</true>
</if>
</fuseaction>
</circuit>
First we set a default value for the variable “request.useLayout” with the attribute “overwrite” to “false” because we don’t want overwrite it in case it already exists.
Then we start checking for its value, if it is “default”, include the default template, if it is “brochure” then include the brochure layout template, and so on (you may have as many layouts you want).
Have you noticed that you do not need to write the file extension .cfm for the template names in the <include> tag? Fusebox will assume you are loading ColdFusion templates if you do not specify the file extension.
Now that we have the header, footer and layout calls, let’s work on the default layout template in \circuits\layout\layDefault.cfm:
<cfparam name="content.header" default="This is the Header" />
<cfparam name="content.footer" default="This is the Footer" />
<cfparam name="content.mainContent" default="This is the main content" />
<cfparam name="request.pageTitle" default="FPTutorial" />
<html>
<head>
<cfoutput><title>#request.pageTitle#</title></cfoutput>
</head>
<body>
<cfoutput>
<p>#content.header#</p>
<p>#content.mainContent#</p>
<p>#content.footer#</p>
</cfoutput>
</body>
</html>
Run your application and you should receive a page like Figure 2.2.
Clik here to view.
Figure 2.2
On the next part of this tutorial we will work with some content for the main page, to replace the “Hello World”.
The idea is to make you comfortable with the framework showing where to add fuses, variables, include templates, etc.
Just keep in mind that if you are using layouts, you must create all your content, save it to variables before Fusebox finishes processing and throwing the layout page.
Thank you for your interest and feel free to write any comment to this post.
Download here the zip file with the files for this tutorial. Please note that the fusebox.xml.cfm contain commented circuits for future development.