Multiple selection component. Generates a UI consisting of two <select> elements configured
for multiple selection; the one on the left is the list of "available" elements, the one on the
right is "selected". Elements can be moved between the lists by clicking a button, or double
clicking an option (and eventually, via drag and drop).
The items in the available list are kept ordered as per
SelectModel order. When items are
moved from the selected list to the available list, they items are inserted back into their
proper positions.
The Palette may operate in normal or re-orderable mode, controlled by the reorder parameter.
In normal mode, the items in the selected list are kept in the same "natural" order as the items
in the available list.
In re-order mode, items moved to the selected list are simply added to the bottom of the list. In addition,
two extra buttons appear to move items up and down within the selected list.
Much of the look and feel is driven by CSS, the default Tapestry CSS is used to set up the
columns, etc. By default, the <select> element's widths are driven by the length of the
longest <option>, and it is common to override this to a fixed value:
<style>
DIV.t-palette SELECT { width: 300px; }
</style>
This ensures that the two columns are the same width, and that the column widths don't change
as items move back and forth.
Option groups within the
SelectModel will be rendered, but are not supported by the many
browsers, and are not fully handled on the client side.
|