ColdBox Basic – Layouts


According to the ColdBox wiki:

“A layout is simply an HTML file that acts as your shell where views can be rendered in and exists in the layouts folder of your application. The layout is a complete html document and you basically describe where views will be rendered. Much easier to build and simpler to maintain”.

Here are some notes about layouts (source: ColdBox wiki):

  • it can be composed of multiple views and one main view
  • can have as many as needed in your application
  • are easy to override or assign to different parts of your application
  • all layouts reside in the layouts folder
  • can also consume other layouts, and hence
  • can create nested layouts very easily via the renderLayout() method

In this exercise, we will use the Advanced Script ColdBox application template and:

  • Modify the Main layout to separate out the content for the navigation, body and footer
  • Create a navigatioin to access users and roles

Please note that the default event by convention is main.index and the default layout for an application is  main.cfm.

However, it is possible to choose a different default layout that can be used to render all your views in. This is done by setting that default layout in your Configuration CFC (i.e. in config/ColdBox.cfc) in the layoutSettings structure:

//Layout Settings
layoutSettings = {
	defaultLayout = "your-default-layout.cfm"
}

It is also possible to override layouts on-the-fly using the setLayout method from the event object, i.e.

event.setLayout( name )

Main Layout

Let’s edit layouts/Main.cfm and delete everything inside the body tag and replace it with the following:

<body>

<!---Container And Views --->
<div class="container-fluid">
 <div class="navbar navbar-inverse">
 <nav role="navigation">#renderView('tags/nav',cache=true,cacheTimeout='30')#</nav>
 </div>
 <!--- body content --->
 <div>#renderView()#</div>
 <footer class="footer">#renderView('tags/footer',cache=true,cacheTimeout='30')#</footer>
</div>

</body>

As you can see, the navigation, body content and footer for a page are now separated. The benefit of separating the navigation and footer is that we can reuse these same views in all other layouts. We then use the renderView() method to output the contents of the views (nav and footer) and the body content.

Let’s create a separate view for he nav and footer views.  Firstly under the views folder, create the tags subfolder. Within the tags subfolder, create the following files:

  • nav.cfm
  • footer.cfm

nav.cfm

<cfoutput>
<!---Top NavBar --->
<div class="navbar navbar-inverse navbar-fixed-top">
 <div class="navbar-inner">
   <!---Brand --->
   <div class="container">
     <!---Responsive Design --->
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </a>
 
     <ul class="nav navbar-nav">
       <li class="active"><a href="#event.buildLink('')#">Home</a></li>
       <li class="dropdown">
         <a href="#event.buildLink('')#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Manage <span class="caret"></span></a>
         <ul class="dropdown-menu">
           <li><a href="#event.buildLink('security/users/list')#"><i class="icon-user"></i> Users</a></li>
           <li><a href="#event.buildLink('security/roles/list')#"><i class="icon-tags"></i> Roles</a></li>
         </ul>
       </li>
     </ul>
 
     <!---About --->
     <ul class="nav navbar-nav pull-right">
       <li class="dropdown">
         <a href="##" class="dropdown-toggle" data-toggle="dropdown">
         <i class="icon-info-sign icon-white"></i> About <b class="caret"></b>
         </a>
         <ul id="actions-submenu" class="dropdown-menu">
           <li><a href="#event.buildLink('security.logout')#"><i class="icon-fire"></i> Logout</a></li> 
         </ul>
       </li>
     </ul>
    </div> <!---end container --->
  </div> <!---end navbar-inner --->
</div> <!---end navbar --->
</cfoutput>

footer.cfm


 <p class="pull-right">
 <a href="##"><i class="icon-arrow-up"></i> Back to top</a>
 </p>
 <p>
 <a href="http://www.coldbox.org">ColdBox Platform</a> is a copyright-trademark software by
 <a href="http://www.ortussolutions.com">Ortus Solutions, Corp</a>
 </p>

Main View

Open main view (views/main/index.cfm). Remove all the content and add the following:


 <div class="row">
 <div class="col-md-12"><h1 align="center">Home Page</h1></div>
 </div>

Browse the main page. It should now look like this:

new-home-1

And the new navigation:


new-home-nav-2

Further Learning

For more detailed information  and discussion on layouts, please check out the ColdBox Layouts and Views page.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s