tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/51-for-each/For_Each.xhtml

<!--
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
-->

<ui:composition template="/main.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:tc="http://myfaces.apache.org/tobago/component"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

  <p>Generating content with a loop can be done
    with the <code class="language-markup">&lt;c:forEach/></code> tag and
    with the <code class="language-markup">&lt;ui:repeat/></code> tag.</p>
  <p>Tag Library Documentation:
    <tc:link label="&lt;c:forEach/>"
             link="http://docs.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/c/forEach.html"/>
    |
    <tc:link label="&lt;ui:repeat/>"
             link="http://docs.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/ui/repeat.html"/></p>

  <tc:section label="Example">
    <p>The following example show three rivers with their length and average dischage by default.</p>

    <tc:section label="New River">
      <p>You can add a new river to the list
        or reset the list to the default value of 'Nile', 'Amazon' and 'Yangtze'.</p>
      <tc:form id="add">
        <tc:in id="inName" label="Name" value="#{forEachController.name}" required="true"/>
        <tc:in id="inLength" label="Length (km)" value="#{forEachController.length}" required="true" markup="number"/>
        <tc:in id="inDischarge" label="Discharge (m³/s)" value="#{forEachController.discharge}" required="true"/>
        <tc:button id="buttonAdd" label="Add" action="#{forEachController.addNewRiver}" defaultCommand="true"/>
      </tc:form>
      <tc:form id="reset">
        <tc:button id="buttonReset" label="Reset" action="#{forEachController.reset}"/>
      </tc:form>
    </tc:section>

    <tc:section id="forEach" label="For Each">
      <p>The rivers are displayed as <code class="language-markup">&lt;tc:box/></code>
        tags withing a <code class="language-markup">&lt;tc:segmentLayout/></code>.</p>
    <demo-highlight language="markup">&lt;tc:segmentLayout medium="6seg 6seg">
  &lt;c:forEach items="\#{forEachController.rivers}" var="river">
    &lt;tc:box label="\#{river.name}">
      ...</demo-highlight>
      <tc:segmentLayout medium="6seg 6seg">
        <c:forEach items="#{forEachController.rivers}" var="river">
          <tc:box label="#{river.name}">
            <tc:out label="Length" value="#{river.length} km" markup="number"/>
            <tc:out label="Discharge" value="#{river.discharge} m³/s" markup="number"/>
          </tc:box>
        </c:forEach>
      </tc:segmentLayout>
    </tc:section>

    <tc:section id="uiRepeat" label="UI:Repeat">
      <p>In this example, the each data of a river is put in a <code class="language-markup">&lt;tc:section/></code></p>
    <demo-highlight language="markup">&lt;ui:repeat value="\#{forEachController.rivers}" var="river">
  &lt;tc:section label="\#{river.name}">
    ...</demo-highlight>
      <ui:repeat value="#{forEachController.rivers}" var="river">
        <tc:section label="#{river.name}">
          <tc:out label="Length" value="#{river.length} km" markup="number"/>
          <tc:out label="Discharge" value="#{river.discharge} m³/s" markup="number"/>
        </tc:section>
      </ui:repeat>
    </tc:section>
  </tc:section>
</ui:composition>