Template code Chunk output
{#example_1}
<p>{$list|join}</p>

<p>{$list|join( - )}</p>

<div>{$list|join(<br/>)}</div>
{#}
Theme theme = new Theme("examples");

// Fetch template from this file: themes/examples/joinzebra.chtml
// Inside that file there is a template "snippet" named #example_1
Chunk html = theme.makeChunk("joinzebra#example_1");

// This would work with any List<String> as well.
String[] list = new String[]{"Apple","Banana","Carrot","Durian"};
html.set("list", list);

html.render( out );
<p>AppleBananaCarrotDurian</p>

<p>Apple - Banana - Carrot - Durian</p>

<div>Apple<br/>Banana<br/>Carrot<br/>Durian</div>

AppleBananaCarrotDurian

Apple - Banana - Carrot - Durian

Apple
Banana
Carrot
Durian
Template code Chunk output
{#example_2}
{!--
  -- Zebra-striping your tables is easy
  -- with the |alternate(this,that) filter.
  --}
<style>
 table.zebra tr.even { background-color: whitesmoke; }
 table.zebra tr.odd  { background-color: lightgreen; }
 table.zebra th { text-align: left; padding: 0 10px 0 0; }
 table.zebra td { padding-right: 10px; }
</style>

<table cellspacing="0" cellpadding="2" border="0" class="zebra">
 <tr>
  <th>ID</th>
  <th>Name</th>
  <th>Balance</th>
 </tr>
 
{% loop in $accounts as $acct counter="$i" %}
 <tr class="{$i|alternate(even,odd)}">
  <td>{$acct.id}</td>
  <td>{$acct.name}</td>
  <td align="right">{% $acct.balance|sprintf($%,.2f) %}</td>
 </tr>
{% endloop %}

</table>
{#}
Theme theme = new Theme("examples");

// Fetch template from this file: themes/examples/joinzebra.chtml
// Inside that file there is a template "snippet" named #example_2
Chunk html = theme.makeChunk("joinzebra#example_2");

// getAccounts can return an object that implements com.x5.util.TableData
// or any array/list of Map<String,Object> objects
// or an array/list of objects that implement com.x5.util.DataCapsule
html.set("accounts", getAccounts());

html.render( out );
<style>
 table.zebra tr.even { background-color: whitesmoke; }
 table.zebra tr.odd  { background-color: lightgreen; }
 table.zebra th { text-align: left; padding: 0 10px 0 0; }
 table.zebra td { padding-right: 10px; }
</style>

<table cellspacing="0" cellpadding="2" border="0" class="zebra">
 <tr>
  <th>ID</th>
  <th>Name</th>
  <th>Balance</th>
 </tr>
 
 <tr class="even">
  <td>2312323</td>
  <td>Bob</td>
  <td align="right">$30.00</td>
 </tr>
 <tr class="odd">
  <td>4324323</td>
  <td>Jim</td>
  <td align="right">$424,353.22</td>
 </tr>
 <tr class="even">
  <td>9879879</td>
  <td>Jenny</td>
  <td align="right">$42,003.34</td>
 </tr>
 <tr class="odd">
  <td>8748747</td>
  <td>John</td>
  <td align="right">$3.23</td>
 </tr>
 <tr class="even">
  <td>2535235</td>
  <td>Julia</td>
  <td align="right">$424.35</td>
 </tr>

</table>

ID Name Balance
2312323 Bob $30.00
4324323 Jim $424,353.22
9879879 Jenny $42,003.34
8748747 John $3.23
2535235 Julia $424.35