Elephant renders its contexts using layouts.

Template layout is the new default layout for new Elephant versions. In order to make template layout compliant with current table layout versions, template layout makes use of different CSS files.

To activate templates for the whole site, use the template element under layout on the root context. For local templates, those applying to the context where are defined, use the local-template element.

Typical configuration is:

context.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<elephant-context lang="_en">
  <i18n>
    <name>
      <_en>Home</_en>
    </name>
  </i18n>
  <layout>
    <local-template name="landing"/>
    <template name="web"/>
  </layout>
</elephant-context>

webTemplate.html

<#include "header.html"/>

<div class="webBody" style="width:100%;background:#fff;">
  <div style="width:1000px;margin:auto;">
    <table style="width:100%">
      <tr style="vertical-align:top;">
        <#if nav.hasOptions(2,1,true)>
          <td style="width:25%;padding-top:15px;padding-right:15px;">
            ${nav.drawOptions(false,2,1,true)}
          </td>
        
        <td style="padding-top:15px;">
          <#if traversal>${nav.drawTraversal(true)}
          ${body.startConstruction()}
          <#if traversal>${nav.drawTraversal(false)}
          <#if printVersion??>${printVersion}
          <#if fileVersion??>${fileVersion.render()}
        </td>
      </tr>
    </table>
  </div>
</div>

<#include "footer.html"/>

header.html

<div class="header">
  <div style="width:1000px;margin:auto;">
    <table cellpadding="0" cellspacing="0" style="width:100%;height:40px;">
      <tr style="vertical-align:bottom;">
        <td>
          <a href="${constructor.rootWebPath}">
            <img src="${constructor.rootWebPath}/_internal/repository/logo.png"/>
          </a>
        </td>
        <td>
          ${nav.drawTabulator(1)}
        </td>
      </tr>
    </table>
  </div>
</div>
<div style="width:100%;margin-top:43px;">
  <div style="width:1000px;margin:auto;">
    ${nav.drawLocation()}
  </div>
</div>

footer.html

<div class="footer">
  <div style="width:1000px;margin:auto;">
    <table cellpadding="5">
      <tr style="vertical-align:top;">
        <td>${webmap.draw(3)}</td>
        <td width="20%"><#include "credentials.html"/></td>
      </tr>
    </table>
  </div>  
</div>

landingTemplate.html

<#include "header.html"/>

${body.startConstruction()}

<#include "footer.html"/>

Table layout was the out-of-the-box configured layout from the beginning. Table layout creates an HTML table as the main container. Uses context/_internal/context.xml files to read the configuration. Tipical web root configuration is:

<?xml version="1.0" encoding="ISO-8859-1"?>

<elephant-context lang="_en">
  <i18n>
    <name>
      <_en>Home</_en>
    </name>
  </i18n>
  <layout>
    <element id="20060126192226678" align="top" type="default-container" container="true">
      <attrib name="type" value="header"/>
      <element id="20060126192226654" align="top" type="default-element">
      </element>
      <element id="20060126192226679" align="left" type="default-navigator">
        <attrib name="type" value="tabulator"/>
        <attrib name="level" value="1"/>
      </element>
    </element>
    <element id="20060126192226680" align="top" type="default-container" container="true">
      <attrib name="type" value="locator"/>
      <element id="20060126192226681" align="left" type="default-navigator">
        <attrib name="type" value="location"/>
      </element>
    </element>
    <element id="20060126192226682" align="left" type="default-container" container="true">
      <attrib name="type" value="container"/>
      <attrib name="width" value="180px"/>
      <element id="20060126192226683" align="top" type="default-navigator">
        <attrib name="type" value="options"/>
        <attrib name="level" value="2"/>
        <attrib name="children" value="2"/>
        <attrib name="show-current" value="true"/>
      </element>
    </element>
    <element id="20060126192226685" align="bottom" type="default-container" container="true">
      <attrib name="type" value="footer"/>
      <element id="20060126192226684" align="top" type="default-element">
        <attrib name="type" value="footer-inside"/>
      </element>
    </element>
  </layout>
</elephant-context>

Elephant uses ElephantMarker as the template parser. It's based on FreeMarker and adds the necessary configuration to operate with the Elephant IConstructor.

ElephantMarker uses a template root to locate templates. The template root is configured in the site.xml file.

Templates are used at different levels to generate the final HTML, CSS and JavaScript.

Naming templates

The conventional way ElephantMarker uses to locate a template is by searching [templates_root]/[context]/[name]Template.html. The context variable is the child explained is the above table and helps to differentiate templates usage. Name is the actual template name and the marker appends Template.html.

This convention allows the overriding system Overriding templates .

To understand the override mechanism used by the Elephant library you need to understand how templates are found. By default, ElephantMarker searches templates in /WEB-INF/elephant/[templates_root]/[context]/[name]Template.html, being context and name variables. templates_root is defined in /elephant/conf/site.xml configuration file.

Provided the templates_root is templates-semantic, a context and a name, Elephant will first search /WEB-INF/elephant/templates-semantic/site/[context]/[name]Template.html and, if no file existed, in /WEB-INF/elephant/templates-semantic/[context]/[name]Template.html.

This is a list of commonly used content templates. Does not reflect the actual number of templates available for layouts, entities and email senders.

The banner templates use a JSON source as banner data. Its form is:

• name
• minHeight
• banners (array of:)
• imageLink
• background
• color
• header
• meta
• description
• action
• link
• subaction
• sublink

The most common way to use it would be the marker-jason macro {@marker-json:tmpl-root:template:repository-file}, where tmpl-root is files, template can be bannerImage or bannerCard, and repository-file would be the location of the JSON file.

In the example will be using the banners.json file, located at this context's repository.

With {@marker-json:files:bannerImage:*/banners.json} you get:

With {@marker-json:files:bannerCard:*/banners.json} you get:

Some header

Sub header

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Visit... Or visit...

Some other header

Some header support

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Visit...

JSON file

{
  "name" : "slider",
  "minHeight" : "400px",
  "banners" : [
    {
      "imageLink" : "banners/_internal/repository/elementals.jpg",
      "background" : "#00000066",
      "color" : "#fff",
      "header" : "Some header",
      "meta" : "Sub header",
      "description" : "Lorem Ipsum is simply dummy text of the printing and typesetting industry...",
      "action" : "Visit...",
      "link" : "#",
      "subaction" : "Or visit...",
      "sublink" : "#"
    },
    {
      "imageLink" : "banners/_internal/repository/emotion-ocean.jpg",
      "background" : "#ffffff66",
      "color" : "#000",
      "header" : "Some other header",
      "meta" : "Some header support",
      "description" : "Lorem Ipsum is simply dummy text of the printing and typesetting industry...",
      "action" : "Visit...",
      "link" : "#"
    }
  ]
}