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.

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

Supported Client Events for Client Behaviors

  • blur
  • change (default)
  • click
  • dblclick
  • focus
  • keydown
  • keypress
  • keyup
  • mousedown
  • mousemove
  • mouseout
  • mouseover
  • mouseup
  • valueChange

Events

Type Phases Description
javax.faces.event.ValueChangeEventProcess Validations,
Apply Request Values
The valueChange event is delivered when the value attribute is changed.
org.apache.myfaces.trinidad.event.AttributeChangeEventInvoke 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 event might include the width of a column that supported client-side resizing.

Supported Facets

Name Description
filterthe filter above the leading list.
leadingFooterthe footer of buttons/images under the leading list.
trailingFooterthe footer of buttons/images under the trailing list.

Attributes

Name Type Supports EL? Description
attributeChangeListenerjavax.el.MethodExpressionOnly 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.
bindingorg.apache.myfaces.trinidad.component.core.input.CoreSelectManyShuttleOnly 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.
converterjavax.faces.convert.ConverterYes a converter object
disabledbooleanYes Default Value: false

whether the element is disabled.
idStringNo 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 ('-').
immediatebooleanYes Default Value: false

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.
inlineStyleStringYes the CSS styles to use for this component.
labelStringYes 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.
leadingDescShownbooleanYes Default Value: false

whether or not the leading list has an area to display descriptions.
leadingHeaderStringYes the header of the leading list of the shuttle.
onblurStringYes the event handler for the component losing the focus.
Not supported on the following agents: pda
onchangeStringYes event handler for when the value is changed.
onclickStringYes an onclick Javascript handler.
ondblclickStringYes an ondblclick Javascript handler.
onfocusStringYes the event handler for the component gaining the focus.
Not supported on the following agents: pda
onkeydownStringYes an onkeydown Javascript handler.
onkeypressStringYes an onkeypress Javascript handler.
onkeyupStringYes an onkeyup Javascript handler.
onmousedownStringYes an onmousedown Javascript handler.
onmousemoveStringYes an onmousemove Javascript handler.
onmouseoutStringYes an onmouseout Javascript handler.
onmouseoverStringYes an onmouseover Javascript handler.
onmouseupStringYes an onmouseup Javascript handler.
partialTriggersString[]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".

readOnlybooleanYes Default Value: false

whether the element is read-only.
renderedbooleanYes Default Value: true

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). If you want to change a component's rendered attribute from false to true using PPR, set the partialTrigger attribute of its parent component so the parent refreshes and in turn will render this component.
requiredbooleanYes Default Value: false

whether a non-null, non-empty value must be entered. If false, validators will not be executed when the value is null or empty.
requiredMessageDetailStringYes the message to be displayed, if 'required' validation fails.

Parameters:

  • {0} the label that identifies the component
shortDescStringYes The short description of the component. This text is commonly used by user agents to display tooltip help text.
sizeintYes 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.
styleClassStringYes a CSS style class to use for this component.
trailingDescShownbooleanYes Default Value: false

whether or not the trailing list has an area to display descriptions.
trailingHeaderStringYes the header of the trailing list of the shuttle.
validatorjavax.faces.el.MethodBindingOnly EL a method reference to a validator method
valueObjectYes 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.
valueChangeListenerjavax.faces.el.MethodBindingOnly EL a method reference to a value change listener
valuePassThrubooleanYes Default Value: false

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.