| <?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"><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"><tc:selectItem></code> (static) or |
| <code class="language-markup"><tc:selectItems></code> (dynamic).</p> |
| <p>Tag Library Documentation: |
| <tc:link label="<tc:selectManyShuttle/>" image="#{request.contextPath}/image/feather-leaf.png" |
| link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/selectManyShuttle.html"/> |
| | |
| <tc:link label="<tc:selectItem/>" image="#{request.contextPath}/image/feather-leaf.png" |
| link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/selectItem.html"/> |
| | |
| <tc:link label="<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"><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"><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"><tc:selectManyShuttle label="Planets" ...> |
| <tc:selectItems value="\#{selectManyShuttleController.planets}" .../> |
| </tc:selectManyShuttle></code></pre> |
| <tc:selectManyShuttle id="s4" 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="o1" label="Selected Planets" value="#{selectManyShuttleController.selectedPlanetsAsString}"/> |
| <tc:button label="Submit"/> |
| </tc:section> |
| |
| <tc:section label="Ajax"> |
| <p>The entries in the right list are shown in |
| <code class="language-markup"><tc:out id="outputStars" .../></code>. |
| <code class="language-markup"><tc:selectManyShuttle .../></code> contain |
| <code class="language-markup"><f:ajax render="outputStars"/></code>. Every time, the value in the shuttle list |
| change, the outputfield is rerendered.</p> |
| <tc:selectManyShuttle id="s5" 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> |