tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/70-selectManyShuttle/Shuttle.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<!--
 * 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://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core">

  <p>The shuttlelist component can be created with <code class="language-markup">&lt;tc:selectManyShuttle/></code>.
    In general, the height of the list depends on the number of items and is set to an amount, where no
    scrollbar is needed. You can set the number of rows with the <code>size</code> attribute. The shuttle list
    has at least seven rows, values less than seven have no effect.
    Items are added via <code class="language-markup">&lt;tc:selectItem></code> (static) or
    <code class="language-markup">&lt;tc:selectItems></code> (dynamic).</p>
  <p>Tag Library Documentation:
    <tc:link label="&lt;tc:selectManyShuttle/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/selectManyShuttle.html"/>
    |
    <tc:link label="&lt;tc:selectItem/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/selectItem.html"/>
    |
    <tc:link label="&lt;tc:selectItems/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/selectItems.html"/></p>

  <tc:section label="Basics">
    <pre><code class="language-markup">&lt;tc:selectManyShuttle label="Shuttle List" size="7"></code></pre>
    <tc:selectManyShuttle id="s1" label="Shuttle List" size="7">
      <tc:selectItem itemLabel="Item1"/>
      <tc:selectItem itemLabel="Item2"/>
      <tc:selectItem itemLabel="Item3"/>
      <tc:selectItem itemLabel="Item4"/>
      <tc:selectItem itemLabel="Item5"/>
      <tc:selectItem itemLabel="Item6"/>
      <tc:selectItem itemLabel="Item7"/>
      <tc:selectItem itemLabel="Item8"/>
      <tc:selectItem itemLabel="Item9"/>
      <tc:selectItem itemLabel="Item10"/>
      <tc:selectItem itemLabel="Item11"/>
      <tc:selectItem itemLabel="Item12"/>
    </tc:selectManyShuttle>
    <tc:selectManyShuttle id="s2" label="Read Only" readonly="true" size="7">
      <tc:selectItem itemLabel="Item1"/>
      <tc:selectItem itemLabel="Item2"/>
      <tc:selectItem itemLabel="Item3"/>
      <tc:selectItem itemLabel="Item4"/>
      <tc:selectItem itemLabel="Item5"/>
      <tc:selectItem itemLabel="Item6"/>
      <tc:selectItem itemLabel="Item7"/>
      <tc:selectItem itemLabel="Item8"/>
      <tc:selectItem itemLabel="Item9"/>
      <tc:selectItem itemLabel="Item10"/>
      <tc:selectItem itemLabel="Item11"/>
      <tc:selectItem itemLabel="Item12"/>
    </tc:selectManyShuttle>
    <tc:selectManyShuttle id="s3" label="Disabled" disabled="true" size="7">
      <tc:selectItem itemLabel="Item1"/>
      <tc:selectItem itemLabel="Item2"/>
      <tc:selectItem itemLabel="Item3"/>
      <tc:selectItem itemLabel="Item4"/>
      <tc:selectItem itemLabel="Item5"/>
      <tc:selectItem itemLabel="Item6"/>
      <tc:selectItem itemLabel="Item7"/>
      <tc:selectItem itemLabel="Item8"/>
      <tc:selectItem itemLabel="Item9"/>
      <tc:selectItem itemLabel="Item10"/>
      <tc:selectItem itemLabel="Item11"/>
      <tc:selectItem itemLabel="Item12"/>
    </tc:selectManyShuttle>
  </tc:section>

  <tc:section label="Simple Usage">
    <p>After a submit, the entries in the right list are shown in the outputfield with name and distance from the
      sun.</p>
    <p>A label is added to the left list via the <code>unselectedLabel</code> attribute and to the right list
      via <code>selectedLabel</code>. The label for the whole component is set on top by
      <code>labelLayout="top"</code>.</p>
    <p>In this example, the entries are added by
      <code class="language-markup">&lt;tc:selectItems ... var="planet" itemLabel="\#{planet.name}" itemValue="\#{planet}"/></code>.
      The name of a variable is defined by<code>var</code>. In this case, the <code>itemLabel</code> get the name of
      the planet, while the <code>itemValue</code> is object itself.</p>
    <pre><code class="language-markup">&lt;tc:selectManyShuttle label="Planets" ...>
  &lt;tc:selectItems value="\#{selectManyShuttleController.planets}" .../>
&lt;/tc:selectManyShuttle></code></pre>
    <tc:selectManyShuttle id="submitExample" label="Planets" labelLayout="top"
                          unselectedLabel="Left List" selectedLabel="Right List"
                          value="#{selectManyShuttleController.selectedPlanets}">
      <tc:selectItems value="#{selectManyShuttleController.planets}"
                      var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>
    </tc:selectManyShuttle>
    <tc:out id="submitExampleOutput" label="Selected Planets" value="#{selectManyShuttleController.selectedPlanetsAsString}"/>
    <tc:button id="submitButton" label="Submit"/>
  </tc:section>

  <tc:section label="Ajax">
    <p>The entries in the right list are shown in
      <code class="language-markup">&lt;tc:out id="outputStars" .../></code>.
      <code class="language-markup">&lt;tc:selectManyShuttle .../></code> contain
      <code class="language-markup">&lt;f:ajax render="outputStars"/></code>. Every time, the value in the shuttle list
      change, the outputfield is rerendered.</p>
    <tc:selectManyShuttle id="ajaxExample" label="Stars" labelLayout="top" value="#{selectManyShuttleController.selectedStars}">
      <tc:selectItems value="#{selectManyShuttleController.stars}"/>
      <f:ajax render="outputStars"/>
    </tc:selectManyShuttle>
    <tc:out id="outputStars" label="Selected Stars" value="#{selectManyShuttleController.selectedStarsAsString}"/>
  </tc:section>

</ui:composition>