| Use the ui:orderableList tag to create a list with
buttons that allow the items on the list to be reordered.
HTML Elements and Layout
The textField component renders an XHTML fragment consisting of a
selectelement representing a list, an input
type="hidden" element which represents the current order of the
list items, two or four input type="submit" elements for the
buttons, and a label element for the label. The buttons are
organized using a table, and the whole component is laid
out using divs.
Configuring the ui:orderableList Tag
Use the list attribute to associate the component
with a set of orderable items. The value of the list attribute
must be a JavaServer Faces EL expression that evaluates to an
array of Objects or to a java.util.List.
To allow users to select more than one item to move at a time,
set multiple to true. To display buttons which moves
the selected items to the top and bottom of the list, set
moveTopBottom to true.
To specify a label for the component, use the
label attribute, or specify a label facet. To place
the label above the component, set labelOnTop to
true.
Facets
label: use this facet to specify a custom
component for the label.readOnly: use this facet to specify a custom
component for displaying the value of this component when it is
marked as readonly. The default is a
ui:staticText. moveUpButton: use this facet to specify a custom
component for the button that moves items up one step.moveDownButton: use this facet to specify a custom
component for the button that moves items down one step.moveTopButton: use this facet to specify a custom
component for the button that moves items to the top.moveBottomButton: use this facet to specify a custom
component for the button that moves items to the bottom.
Client-side JavaScript functions
The functions below must be invoked on the JavaScript object
that corresponds to the orderableList. The name of this object is
OrderableList_id where id is the
DOM ID of the OrderableList component (the id of the outermost
div with the colons replaced by underscores,
e.g. OrderableList_form_taskOrder.
object.updateValue()
|
Use this method to update the hidden field which represents the
component value in any JavaScript function that changes the order
of the items on the list.
|
object.moveUp()
|
Moves the selected items up one step and updates the component
value.
|
object.moveDown()
|
Moves the selected items down one step and updates the component
value.
|
object.moveTop()
|
Moves the selected items to the top of the list and updates the
component value.
|
object.moveBottom()
|
Moves the selected items to the bottom of the list and updates the
component value.
|
object.updateButtons()
|
Use this method to update which buttons are selected in any
JavaScript method that programmatically selects elements on the
list.
|
Example
Example 1: OrderableList with Move to Top and Move to Bottom
Buttons
This example uses a backing bean called
AutomatedTasks with a property taskList
which represents a list of tasks. Users are allowed to
select more than one task to move. Buttons to move the items to
the top and to the bottom are shown in addition to the default
move up and move down buttons.
<ui:orderableList id="taskOrder"
list="#{AutomatedTasks.taskList}"
label="Task execution order: "
multiple="true"
moveTopBottom="true"/>
Example 1: OrderableList with Move to Top and Move to Bottom
Buttons
This example uses a backing bean called Volunteers and
a property rotationOrder which is an ordered list of
objects representing individual persons. A converter is used to
derive a string representation of the person. Only the default
move up and move down buttons are shown.
<ui:orderableList id="callUpOrder"
list="#{Volunteers.rotationOrder}"
label="Call Up Order:" >
<f:converter converterId="org.example.Person"/>
<ui:orderableList>
Auto-generated component class.
Do NOT modify; all changes
will be lost!
|