A component used to make a number of selections from a list. The general look is a
pair of <select>
elements. with a pair of buttons between them. The right
element is a list of values that can be selected. The buttons move values from the
right column ("available") to the left column ("selected").
This all takes a bit of JavaScript to accomplish (quite a bit), which means a
Body
component must wrap the Palette. If JavaScript is not enabled in the client browser,
then the user will be unable to make (or change) any selections.
Cross-browser compatibility is not perfect. In some cases, the
MultiplePropertySelection
component may be a better choice.
See also: MultiplePropertySelection
Name | Type | Required | Default | Description |
---|---|---|---|---|
selected | java.util.List | yes |
A List of selected values. Possible selections are defined by the model;
this should be a subset of the possible values. This may be null when
the component is renderred. When the containing form is submitted, this
parameter is updated with a new List of selected objects.
The order may be set by the user, as well, depending on the sortMode parameter. |
|
model | IPropertySelectionModel | yes | Works, as with a PropertySelection component, to define the possible values. | |
sort | SortMode | no | SortMode.NONE | Controls automatic sorting of the options. |
id | string | no |
Sets the id for the rendered <select> element that displays the
selected items.
|
|
displayName | string | no | The user-presentable name for the component, which will be used by a FieldLabel connected to the component. | |
validators | Array or collection of Validator | no |
The validators to apply to the component. Something along the lines of:
validators:required .See also:Validation |
|
rows | int | no | 10 |
The number of rows that should be visible in the Pallete's
<select> elements.
|
tableClass | String | no | tapestry-palette | The CSS class for the table which surrounds the other elements of the Palette. |
selectedTitleBlock | Block | no | "Selected" |
If specified, allows a Block to be placed within the <th> reserved
for the title above the selected items <select> (on the right).
This allows for images or other components to be placed there. By
default, the simple word Selected is used.
|
availableTitleBlock | Block | no | "Available" | As with selectedTitleBlock, but for the left column, of items which are available to be selected. The default is the word Available. |
selectImage
selectDisabledImage deselectImage deselectDisabledImage upImage upDisabledImage downImage downDisabledImage |
IAsset | no |
If any of these are specified then they override the default images
provided with the component. This allows the look and feel to be
customized relatively easily.
The most common reason to replace the images is to deal with backgrounds. The default images are anti-aliased against a white background. If a colored or patterned background is used, the default images will have an ugly white fringe. Until all browsers have full support for PNG (which has a true alpha channel), it is necessary to customize the images to match the background. |
Body: removed
Informal parameters: forbidden
Reserved parameters: none
A Palette requires some CSS entries to render correctly, especially the middle
column, which contains the two or four buttons for moving selections between the
two columns. The width and alignment of this column must be set using CSS.
Additionally, CSS is commonly used to give the Palette columns a fixed width,
and to dress up the titles. Here is an example of some CSS you can use to format
the palette component:
TABLE.tapestry-palette TH { font-size: 9pt; font-weight: bold; color: white; background-color: #330066; text-align: center; } TD.available-cell SELECT { font-weight: normal; background-color: #FFFFFF; width: 200px; } TD.selected-cell SELECT { font-weight: normal; background-color: #FFFFFF; width: 200px; } TABLE.tapestry-palette TD.controls { text-align: center; vertical-align: middle; width: 60px; }