trinidad-example/trinidad-demo/src/main/webapp/demos/tags/forEach/updates.jspx

<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>
<!--
    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.

-->
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
          xmlns:tr="http://myfaces.apache.org/trinidad" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core">
  <tr:panelHeader text="How to add and remove items from a forEach loop">
    <p>
      <tr:outputText value="It is not safe to add or remove items from a standard c:forEach tag due to the way IDs are handled and how component state functions. By using a tr:forEach tag that is key based (map or collection model), items may be added or removed from the collection." />
    </p>
    <p>
      <tr:outputText value="When using a key-based for each loop, each component must be given an ID. If components are not given an ID explicitly, the auto-generated IDs will not be correct when the item order changes. As a result, new components will be created and you will not be able to retain the component state." />
    </p>
    <p>
      <tr:outputText value="With the key-based data, the ID of any components not in a nested naming container in the for each tag must be given an ID that is tied to the key. This can be done using immediate EL and referring to the key in the var status object." />
    </p>
    <tr:panelGroupLayout id="forEachParent" layout="vertical"
                         inlineStyle="padding-left: 2em; padding-top: 1em"
                         partialTriggers="appendButton">
      <tr:forEach var="person" items="#{forEachBean.arrangeMap}" varStatus="vs">
        <f:subview id="sv_${vs.key}">
          <f:attribute name="forEachKey" value="#{vs.key}" />
          <tr:outputText id="ot1" value="#{person.firstName} #{person.lastName}"
                         shortDesc="Var status:  #{vs}"/>
          <tr:panelGroupLayout id="actions" layout="horizontal">
            <tr:panelPopup id="pp1" triggerType="click" inlineStyle="text-decoration: none;">
              <f:facet name="trigger">
                <tr:commandButton id="cb1" text="Insert new person" onclick="return false;" />
              </f:facet>
              <tr:panelFormLayout>
                <tr:outputText id="ot2" value="Enter the first and last name." />
                <tr:outputText id="ot3" value="The person will be added before the current person" />
                <tr:inputText id="fn" value="#{forEachBean.newPersonFirstName}"
                              label="First name:" />
                <tr:inputText id="ln" value="#{forEachBean.newPersonLastName}"
                              label="Last name:" />
              </tr:panelFormLayout>
              <tr:commandButton id="cb2" text="Add" partialSubmit="true"
                                actionListener="#{forEachBean.handleArrangeNewItem}"
                                onclick="TrPanelPopup.hidePopup(event);">
                <f:attribute name="forEachKey" value="#{vs.key}" />
              </tr:commandButton>
            </tr:panelPopup>
            <tr:commandButton id="cb3" text="Remove person" partialSubmit="true"
                              actionListener="#{forEachBean.handleArrangeRemoveItem}">
              <f:attribute name="forEachKey" value="#{vs.key}" />
            </tr:commandButton>
            <tr:commandButton id="cb4" text="Move person up" partialSubmit="true"
                              actionListener="#{forEachBean.handleArrangeMoveItemUp}"
                              disabled="#{vs.first}">
              <f:attribute name="forEachKey" value="#{vs.key}" />
            </tr:commandButton>
            <tr:commandButton id="cb5" text="Move person down" partialSubmit="true"
                              actionListener="#{forEachBean.handleArrangeMoveItemDown}"
                              disabled="#{vs.last}">
              <f:attribute name="forEachKey" value="#{vs.key}" />
            </tr:commandButton>
          </tr:panelGroupLayout>
          <tr:spacer id="s1" height="1em"/>
        </f:subview>
      </tr:forEach>
      <tr:panelPopup id="pp2" triggerType="click" inlineStyle="text-decoration: none;">
        <f:facet name="trigger">
          <tr:commandButton id="cb1" text="Append new person" onclick="return false;" />
        </f:facet>
        <tr:panelFormLayout>
          <tr:outputText id="ot4" value="Enter the first and last name." />
          <tr:outputText id="ot5" value="The person will be added before the current person" />
          <tr:inputText id="fn2" value="#{forEachBean.newPersonFirstName}"
                        label="First name:" />
          <tr:inputText id="ln2" value="#{forEachBean.newPersonLastName}"
                        label="Last name:" />
        </tr:panelFormLayout>
        <tr:commandButton id="appendButton" text="Add" partialSubmit="true"
                          actionListener="#{forEachBean.handleArrangeNewItem}"
                          onclick="TrPanelPopup.hidePopup(event);" />
      </tr:panelPopup>
    </tr:panelGroupLayout>
  </tr:panelHeader>
</jsp:root>