Foundation
Project Documentation

Summary

Tag name: <tr:selectManyShuttle>
UIComponent class: org.apache.myfaces.trinidad.component.core.input.CoreSelectManyShuttle
Component type: org.apache.myfaces.trinidad.CoreSelectManyShuttle
The selectManyShuttle component provides a mechanism for selecting multiple values from a list of values by allowing the user to move items between two lists. The "value" attribute of the selectManyShuttle, like any other selectMany component, must be a List or array of values that correspond to a value of one of the contained SelectItems. If a value of one of the SelectItems is in the List or array, that item will appear in the trailing list. Looked at another way, you can change a selectManyListbox directly into a selectManyShuttle; instead of the "value" driving which items are selected in the listbox, it affects which items appear in the trailing list of the shuttle.

The selectManyShuttle does not allow for reordering; the selectOrderShuttle component adds this functionality to selectManyShuttle. selectManyShuttle also does not include automatic messaging support, unlike most other Trinidad messaging components.

Attributes

Each list in the shuttle has a header, the text of which can be set as the "leadingHeader" attribute and the "trailingHeader" attribute.

Each container in the shuttle can have an area to display item descriptions below the list. To indicate whether or not a container should have such an area set the attributes "leadingDescShown" attribute and the "trailingDescShown" attribute.

To control the display size(number of items) of the lists, the size attribute has to be specified. The size specified must be between 10 and 20 items. If the attribute is not set or has a value less than 10, the size would have a default or minimum value of 10. If the attribute value specified is more than 20 items, the size would have the maximum value of 20.

Shuttle Footers

The shuttle allows the user to place components - typically, buttons or icons - below each of the lists. These buttons or icons will take up only one row below the lists (no wrapping), and should have a maximum height of 26 pixels if the layout of the shuttle is to remain consistent. The buttons and icons should be placed within the shuttle as the leadingFooter or the trailingFooter facet, depending on which list the buttons should go under. Leave the appropriate facet empty if no footer is required under a list. These buttons and icons can be used to perform operations upon the shuttle using a ShuttleProxy as described below.

Shuttle Filter

The shuttle allows the user to place a filter above the list in the leading container. The filter is added as the filter facet. The filter can be used to perform operations upon the shuttle using a ShuttleProxy as described below.

JavaScript proxies

In some cases, developers will need to use JavaScript to manipulate or use the contents of the lists. This may be required as actions for the buttons or icons in the shuttle footers or outside the shuttle all together. Thus, a set of Javascript utility methods are available that operate on the lists. These are located in the shuttle.js Javascript library, which is automatically loaded if you use the shuttle.

These methods can be accessed by creating a ShuttleProxy instance based on the shuttle client ID and form. 

                // create the proxy object
                var proxy2 = new ShuttleProxy("testShuttle2", "testForm2");

Once the proxy is created, you can use it to gain information about the lists or to manipulate the lists in the shuttle. The proxy provides the following functions:

  • move(fromLeadingList, allItems) : moves items from one list to the other. If fromLeadingList is true, the items move from the leading list to the trailing list. If fromLeadingList is false, the items move the opposite direction. If allItems is true, all the items are moved, otherwise only the selected items are moved.
  • reorderList(down, allTheWay, leadingList) : reorders a list. If down is true, the items move down in the list, otherwise they move up. If allTheWay is true, the items move all the way to the top or bottom of the list depending on the value of down. If leadingList is true, the leading list is reordered, otherwise the trailing list is reordered.
  • getItems(leadingList) : returns an array of option objects that make up a list. If leadingList is true, the array has the leading list's options, otherwise the items are from the trailing list. Note that the array will not include the horizontal bar at the end of the lists.
  • getSelectedItems(leadingList) : returns an array of option objects that are selected in a list. If leadingList is true, the array has the leading list's options, otherwise the items are from the trailingList. Note that the array will not include the horizontal bar at the end of the lists.
  • getItemCount(leadingList) : returns the number of items in a list. If leadingList is true, the number returned is the number of items in the leading list. Otherwise, the number returned is the number of items in the trailing list. Note that the horizontal bar at the end of the lists is not included in this count -- you only get the number of actual items.
  • getSelectedItemCount(leadingList) : returns the number of selected items in a list. If leadingList is true, the number returned is the number of selected items in the leading list. Otherwise, the number returned is the number of selected items in the trailing list. Note that the horizontal bar at the end of the lists is not included in this count -- you only get the number of actual items.
  • addItem(leadingList, index, text, value, description) : adds an item at the given index to a list. The item is added to the leading list if leadingList is true, otherwise it is added to the trailing list. The index should be 0 based. Thus, to insert an item at the end of a list, set index to shuttleProxy.getItemCount(leadinglist). The text parameter specifies the display text for the item, while the value parameter specifies the value that represents this item upon form submission. The description parameter specifies a description of the item. The description parameter can be omitted.
  • deleteItemByValue(leadingList, value) : deletes an item from a list. The item is deleted from the leading list if leadingList is true, otherwise it is deleted from the trailing list. The item deleted is the first item with the value (not text) of value.
  • deleteSelectedItems(leadingList) : deletes items from a list. The items are deleted from the leading list if leadingList is true, otherwise they are deleted from the trailing list. The items deleted are the items that are selected in the appropriate list.
  • reset() : reset the shuttle to its initial state.

Example(s): 

<tr:selectManyShuttle value="#{bean.valueList}">
  <f:selectItem itemLabel="Option1" itemValue="1"/>
  <f:selectItem itemLabel="Option1" itemValue="2"/>
  <f:selectItem itemLabel="Option1" itemValue="3"/>
</tr:selectManyShuttle>

Events

Type Phases Description
javax.faces.event.ValueChangeEvent Process Validations,
Apply Request Values		 The valueChange event is delivered when the value attribute is changed.
org.apache.myfaces.trinidad.event.AttributeChangeEvent Invoke Application,
Apply Request Values		 Event delivered to describe an attribute change. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.

Supported Facets

Name Description
filter the filter above the leading list.
leadingFooter the footer of buttons/images under the leading list.
trailingFooter the footer of buttons/images under the trailing list.

Attributes

Name Type Supports EL? Description
attributeChangeListener javax.el.MethodExpression Only EL a method reference to an attribute change listener. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.
binding org.apache.myfaces.trinidad.component.core.input.CoreSelectManyShuttle Only EL an EL reference that will store the component instance on a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.
converter javax.faces.convert.Converter Yes a converter object
disabled boolean Yes whether the element is disabled.
id String No the identifier for the component. The identifier must follow a subset of the syntax allowed in HTML:
  • Must not be a zero-length String.
  • First character must be an ASCII letter (A-Za-z) or an underscore ('_').
  • Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
immediate boolean Yes whether the value is converted and validated immediately in the Apply Request Values phase, or is handled in the Process Validators phase, the default. By default, values are converted and validated together in the Process Validators phase. However, if you need access to the value of a component during Apply Request Values - for example, if you need to get the value from an actionListener on an immediate commandButton - then setting this to "immediate" makes that possible.
inlineStyle String Yes the CSS styles to use for this component.
label String Yes the label for the shuttle that is used to identify the component only when displaying error messages. The label specified does not otherwise appear on the page.
leadingDescShown boolean Yes whether or not the leading list has an area to display descriptions.
leadingHeader String Yes the header of the leading list of the shuttle.
onblur String Yes the event handler for the component losing the focus.
Not supported on the following agents: pda
onchange String Yes event handler for when the value is changed.
onclick String Yes an onclick Javascript handler.
ondblclick String Yes an ondblclick Javascript handler.
onfocus String Yes the event handler for the component gaining the focus.
Not supported on the following agents: pda
onkeydown String Yes an onkeydown Javascript handler.
onkeypress String Yes an onkeypress Javascript handler.
onkeyup String Yes an onkeyup Javascript handler.
onmousedown String Yes an onmousedown Javascript handler.
onmousemove String Yes an onmousemove Javascript handler.
onmouseout String Yes an onmouseout Javascript handler.
onmouseover String Yes an onmouseover Javascript handler.
onmouseup String Yes an onmouseup Javascript handler.
partialTriggers String[] Yes the IDs of the components that should trigger a partial update.

This component will listen on the trigger components. If one of the trigger components receives an event that will cause it to update in some way, this component will request to be updated too.

Separate multiple triggers with a space. e.g., partialTriggers="cmp1 cmp2"

Identifiers must account for NamingContainers. You can use a single colon to start the search from the root, or use multiple colons to move up through the NamingContainer. For example, "::" will pop out of this component's naming container (it pops out of itself if it is a naming container), ":::" will pop out of two naming containers, etc. The search for the partialTrigger begins from there. e.g., partialTriggers=":::commandButton1" the search begins for the component with id = commandButton1 after popping out of two naming containers relative to this component. To go into naming containers, you separate the naming containers with ':', e.g.,partialTriggers= "nc1:nc2:nc3:componentId".
readOnly boolean Yes whether the element is read-only.
rendered boolean Yes whether the component is rendered. When set to false, no output will be delivered for this component (the component will not in any way be rendered, and cannot be made visible on the client).
required boolean Yes whether a non-null, non-empty value must be entered. If false, validators will not be executed when the value is null or empty.
requiredMessageDetail String Yes the message to be displayed, if 'required' validation fails.

Parameters:

  • {0} the label that identifies the component

shortDesc String Yes The short description of the component. This text is commonly used by user agents to display tooltip help text.
size int Yes the display size(number of items) of the lists. The size specified must be between 10 and 20 items. If the attribute is not set or has a value less than 10, the size would have a default or minimum value of 10. If the attribute value specified is more than 20 items, the size would have the maximum value of 20.
styleClass String Yes a CSS style class to use for this component.
trailingDescShown boolean Yes whether or not the trailing list has an area to display descriptions.
trailingHeader String Yes the header of the trailing list of the shuttle.
validator javax.faces.el.MethodBinding Only EL a method reference to a validator method
value Object Yes the value of the component. If the EL binding for the "value" points to a bean property with a getter but no setter, and this is an editable component, the component will be rendered in read-only mode.
valueChangeListener javax.faces.el.MethodBinding Only EL a method reference to a value change listener
valuePassThru boolean Yes whether or not the values are passed through to the client. When valuePassThru is false the value and the options' values are converted to indexes before being sent to the client. Therefore, when valuePassThru is false, there is no need to write your own converter when you are using custom Objects as your values and/or options. If you need to know the actual values on the client-side, then you can set valuePassThru to true. This will pass the values through to the client, using your custom converter if it is available; a custom converter is needed if you are using custom objects. The default is false.