Tobago Demo

Menu

Shuttle

The shuttlelist component can be created with <tc:selectManyShuttle/>. 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 size attribute. The shuttle list has at least seven rows, values less than seven have no effect. Items are added via <tc:selectItem> (static) or <tc:selectItems> (dynamic).

Tag Library Documentation: <tc:selectManyShuttle/> | <tc:selectItem/> | <tc:selectItems/>

Basics

<tc:selectManyShuttle label="Shuttle List" size="7">

Simple Usage

After a submit, the entries in the right list are shown in the output field with name and distance from the sun.

A label is added to the left list via the unselectedLabel attribute and to the right list via selectedLabel. The label for the whole component is set on top by labelLayout="top".

In this example, the entries are added by <tc:selectItems ... var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>. The name of a variable is defined by var. In this case, the itemLabel get the name of the planet, while the itemValue is object itself.

<tc:selectManyShuttle label="Planets" ...> <tc:selectItems value="#{selectManyShuttleController.planets}" .../> </tc:selectManyShuttle>
Left List
Right List
[]

Ajax

The entries in the right list are shown in <tc:out id="outputStars" .../>. <tc:selectManyShuttle .../> contain <f:ajax render="outputStars"/>. Every time, the value in the shuttle list change, the output field is rerendered.

[]
© 2005-2023 Apache Software Foundation, Licensed under the Apache License, Version 2.0.