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 {@link SelectModel} order. When items are moved from theselected 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 200px, and it is common to override this to a specific value:
<style> DIV.t-palette SELECT { width: 300px; } </style> You'll want to ensure that both <select> in each column is the same width, otherwise the display will update poorly as options are moved from one column to the other.
Option groups within the {@link SelectModel} will be rendered, but are not supported by many browsers, and are notfully handled on the client side.