et/article.php?ID=25">Check it don't select it
A scrollable check list is a more user friendly substitution for multiple-select-boxes. It is a scrollabe div which has many select-boxes.
To make the CheckList scrollable, set the height of the CheckList through {@link #setHeight(String)}.
Note when setting the height it is recommended that the CheckList should not be sortable, because of browser incompatibilities.
The CheckList is also sortable by drag-drop if the {@link #setSortable(boolean)} property is set to true. In this case themethod {@link #getSortorder()} returns the keys of all the options whetherthey where selected or not in the order provided by the user.
Sortable is provided by scriptaculous which is only supported on IE6, FF and Safari1.2 and higher. This control is only tested on IE6 and FF on Windows. With IE the text of the dragged element has a black-outline which does not look good. To turn this off define an explicit back-ground color for the <li> elements. Typically you will do this in a style: .listClass li {background-color: #xxx}, where the listClass is set through {@link #addStyleClass(String)}.
If a select is required at least one item must be selected so that the input is valid. Other validations are not done.
The Control listener will be invoked in any case whether the CheckList is valid or not.
The values of the CheckList are provided by {@link org.apache.click.control.Option} instances. To populate the CheckList withOptions, use the add methods.
The label of the Option is shown to the user and the value is what is provided in the {@link #getSelectedValues()} and {@link #getSortorder()}Lists.
The selected values can be retrieved from {@link #getSelectedValues()}. The get/setValue() property is not supported.
The select uses the /click/checklist/checklist.css style. By providing a style which extends this style the appearance of the list can be changed.
To set the additional style class use {@link #addStyleClass(String)}. This will append the given class to the default class of this control. Alternatively {@link #setStyle(String,String)} can be used to set the styleof the outer div.
For an example please look at the click-examples and the at the above blog.
CSS and JavaScript resources
The CheckList control makes use of the following resources (which Click automatically deploys to the application directories,
/click/checklist and
/click/prototype):
- click/checklist/checklist.css
- click/checklist/checklist.js
- click/prototype/builder.js
- click/prototype/controls.js
- click/prototype/dragdrop.js
- click/prototype/effects.js
- click/prototype/prototype.js
- click/prototype/slider.js
To import these CheckList files simply reference the variables
$headElements and
$jsElements in the page template.
@see org.apache.click.control.Option