Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

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-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.