ColdBox Basic – Views


ColdBox views are HTML or XML content that can be rendered within a layout or on its own. They can be rendered on demand (explicit) or set by an event handler (implicit). Views can also produce and display any type of content apart from HTML such as JSON, XML, WDDX, PDF and much more, via the view renderer. All views and layouts have direct reference to the request collections so it’s incredibly easy to retrieve and place data into them.

Environment

  • ColdBox 3.8
  • Bootstrap 3.1
  • ColdFusion 10
  • Windows OS

Implicit Views

By default ColdBox looks for the view according to the executing event’s syntax. So if the incoming event is clients.list and no view is explicitly set in the model’s action handler, then ColdBox will look for a view in the views/clients folder called list.cfm. Let’s create a simple listing view, i.e. add the following code to list.cfm:

<cfoutput>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Clients</h3>
  </div>
  <div class="row">
    <div class="col-md-12">#getPlugin("MessageBox").renderit()#</div>
  </div>
  <div class="panel-body table-responsive">
    <table name="clients" id="clients" class="table table-striped table-bordered table-hover" width="100%">
      <thead>
        <tr align="left">
          <th>First Name</th>
          <th>Last Name</th>
          <th>DOB</th>
        </tr>
      </thead>
      <tbody>
        <cfloop from="1" to="#arrayLen(rc.clients)#" index="i">
          <tr>
            <td>#rc.clients[i].getFirstname()#</td>
            <td>#rc.clients[i].getLastname()#</td>
            <td>#dateFormat(rc.clients[i].getDOB(), "dd/mm/yyyy")#</td>
          </tr>
        </cfloop>
      </tbody>
    </table>
  </div> <!--- panel-body --->
</div> <!--- panel-primary --->
</cfoutput>

Important Notes:

  • With implicit views, the name of the view will ALWAYS be in lower case.
  • Create SES URL Mappings with explicit event declarations so case and location can be controlled.
  • Using implicit views will result in losing fine rendering control.
  • The above code assumes that there is a list function in the client handler (i.e. handlers/Clients.cfc), and that the returned data are stored in rc.clients

You can control the case-sensitivity of implicit views by creating a setting called: caseSensitiveImplicitViews in the ColdBox configuration file: configs/ColdBox.cfc, i.e.

settings = {
   //this means that case matters for implicit views
   caseSensitiveImplicitViews = true
};

Setting Views Explicity and with Specific Layout

Sometime we may want to control which view and layout are used to render the content. In this scenario we will need to explicitly employ the SetView method in the handler to specify the view and layout to use. Here’s a code snippet to illustrate:


public void function modal(event){
   var rc = event.getCollection();
   rc.phone = phoneService.get( rc.phone_id );
   event.setView(name="phones/modal",layout="Modal");
}

Notes:

  • The above method would reside in the phone model handler, i.e. handlers/Phones.cfc.
  • The modal view would be in this location: views/phones/modal.cfm
  • If you want to only explicitly set the view, then use this (i.e. omit the layout parameter):
    event.setView(name=”phones/modal”);

Views with No Layout

If we do not want to render the view within a layout, use the noLayout parameter, for example:

event.setView(name=”phones/modal”, noLayout=true);

Render Views On-Demand

We can render views on-demand using the renderView method. An example of this was provided earlier with the article on ColdBox Basic – Layouts when we customise the default Main layout. Here’s a partial code snippet to illustrate:


<!---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>

Displaying Other Content Types

Let’s say we want to produce and display pdf content. We can do this using the renderData and renderView methods. Here’s an example code snippet to illustrate:


public void function pdf(event,rc,prc){
   event.paramValue("client_id","");
   rc.clients = clientService.list(sortOrder="lastName desc",asQuery=false);
   event.renderData(data=renderView("clients/pdf"), type="pdf");
} //pdf

 

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