Adding A Layout

Master Class Video Training Community Support
Search…
Adding A Layout
Every time the framework renders a view, it will try to leverage the default layout which is located in layouts/Main.cfm by convention. This is an HTML file that gives format to your output and contains the location of where the view you want should be rendered.
Tip : The request context can also be used to choose a different layout at runtime via the event.setLayout() method or the layout argument in the event.setView() method.
Tip : The request context can also be used to render a view with NO layout at all via the event.noLayout() method.
Layout Code
This location is identified by the following code: renderView()
1
<div id="maincontent">
2
#renderView()#
3
</div>
Copied!
The call to the renderView() method with no arguments tells the framework to render the view that was set using event.setView(). This is called a rendering region. You can use as many rendering regions within layouts or even within views themselves.
Named Regions: The setView() method even allows you to name these regions and then render them in any layout or other views using the name argument.
Creating A Layout
Let's create a new simple layout with two rendering regions. Open up CommandBox and issue the following commands:
1
# Create a Funky layout
2
coldbox create layout name="Funky"
3
​
4
# Create a footer
5
coldbox create view name="main/footer"
Copied!
Open the layouts/Funky.cfm layout and let's modify it a bit by adding the footer view as a rendering region.
1
<h1>funky Layout</h1>
2
<cfoutput>#renderView()#</cfoutput>
3
​
4
<hr>
5
<cfoutput>#renderView( "main/footer" )#</cfoutput>
Copied!
If you are use to using cfinclude to reuse templates, think about it the same way.  renderview() is a much more powerful cfinclude.
Using The Layout
Now, let's open the handler we created before called handlers/hello.cfc and add some code to use our new layout explicitly via adding a layout argument to our setView() call.
1
function index( event, rc, prc ){
2
    // param an incoming variable.
3
    event.paramValue( "name", "nobody" );
4
    // set a private variable
5
    prc.when = dateFormat( now(), "full" );
6
​
7
    // set the view to render with our new layout
8
    event.setView( view="hello/index", layout="Funky" );
9
}
Copied!
Go execute the event now: http://localhost:{port}/hello/index and you will see the view rendered with the words funky layout and footer view at the bottom. Eureka, you have now created a layout.
You can also leverage the function event.setLayout( "Funky" ) to change layouts and even concatenate the calls:
event
  .setView( "hello/index" )  
  .setLayout( "Funky" );
Working With Event Handlers
Adding A Model
Last modified 1d ago
Copy link
Edit on GitHub
Contents
Layout Code
Creating A Layout
Using The Layout