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">

Shuttle List

Read Only

Disabled

Large

Small

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 byvar. 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>

Planets

Left List

Right List

Selected Planets[]

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.

Stars

Selected Stars[]

Menu

Shuttle

Basics

Simple Usage

Ajax