User Interface Components

white-space: nowrap;

}

/* Some extra spacing is needed */

.v-select-optiongroup-horizontal

.v-select-option.v-radiobutton { padding-right: 10px;

}

Use of the above rules requires setting a custom horizontal style name for the component. The result is shown in Figure 5.43, “Horizontal OptionGroup”.

Figure 5.43. Horizontal OptionGroup

5.14.6. Twin Column Selection with TwinColSelect

The TwinColSelect field provides a multiple selection component that shows two lists side by side, with the left column containing unselected items and the right column the selected items. The user can select items from the list on the left and click on the ">>" button to move them to the list on the right. Items can be deselected by selecting them in the right list and clicking on the "<<" button.

TwinColSelect is always in multi-select mode, so its property value is always a collection of the item IDs of the selected items, that is, the items in the right column.

The selection columns can have their own captions, separate from the overall component caption, which is managed by the containing layout. You can set the column captions with setLeftColumnCaption() and setRightColumnCaption().

final TwinColSelect select =

new TwinColSelect("Select Targets to Destroy");

//Set the column captions (optional) select.setLeftColumnCaption("These are left"); select.setRightColumnCaption("These are done for");

//Put some data in the select

String planets[] = {"Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"};

for (int pl=0; pl<planets.length; pl++) select.addItem(planets[pl]);

// Set the number of visible items select.setRows(planets.length);

The resulting component is shown in Figure 5.44, “Twin Column Selection”.

User Interface Components

Figure 5.44. Twin Column Selection

The setRows() method sets the height of the component by the number of visible items in the selection boxes. Setting the height with setHeight() to a defined value overrides the rows setting.

CSS Style Rules

.v-select-twincol {}

.v-select-twincol-options-caption {}

.v-select-twincol-selections-caption {}

.v-select-twincol-options {}

.v-select-twincol-buttons {}

.v-button {}

.v-button-wrap {}

.v-button-caption {}

.v-select-twincol-deco {}

.v-select-twincol-selections {}

The TwinColSelect component has an overall v-select-twincol style. If set, the left and right column captions have v-select-twincol-options-caption and v-select-twincol-options-caption style names, respectively.The left box, which displays the unselected items, has v-select-twincol-options-caption style and the right box, which displays the selected items, has v-select-twincol-options-selections style. Between them is the button area, which has overall v-select-twincol-buttons style; the actual buttons reuse the styles for the Button component. Between the buttons is a divider element with v-select-twincol-deco style.

5.14.7. Allowing Adding New Items

The selection components allow the user to add new items, with a user interface similar to combo boxes in desktop user interfaces. You need to enable the newItemsAllowed mode with the setNewItemsAllowed() method.

myselect.setNewItemsAllowed(true);

The user interface for adding new items depends on the selection component and the selection mode. The regular Select component in single selection mode, which appears as a combo box, allows you to simply type the new item in the combo box and hit Enter to add it. In most other selection components, as well as in the multiple selection mode of the regular Select component, a text field that allows entering new items is shown below the selection list, and clicking the + button will add the item in the list, as illustrated in Figure 5.45, “Select Component with Adding New Items Allowed”.

User Interface Components

Figure 5.45. Select Component with Adding New Items Allowed

The identifier of an item added by the user will be a String object identical to the caption of the item.You should consider this if the item identifier of automatically filled items is some other type or otherwise not identical to the caption.

Adding new items is possible in both single and multiple selection modes and in all styles. Adding new items may not be possible if the Select is bound to an external Container that does not allow adding new items.

5.14.8. Multiple Selection Mode

Setting the Select, NativeSelect, or OptionGroup components to multiple selection mode with the setMultiSelect() method changes their appearance to allow selecting multiple items.

Select and NativeSelect

These components appear as a native HTML selection list, as shown in Figure 5.45, “Select Component with Adding New Items Allowed”. By holding the Ctrl or Shift key pressed, the user can select multiple items.

OptionGroup

The option group, which is a radio button group in single selection mode, will show as a check box group in multiple selection mode. See Section 5.14.5, “Radio Button and Check Box Groups with OptionGroup”.

The TwinColSelect, described in Section 5.14.6, “Twin Column Selection with TwinColSelect”, is a special multiple selection mode that is not meaningful for single selection.

myselect.setMultiSelect(true);

As in single selection mode, the selected items are set as the property of the Select object. In multiple selection mode, the property is a Collection of currently selected items. You can get and set the property with the getValue() and setValue() methods as usual.

A change in the selection will trigger a ValueChangeEvent, which you can handle with a Propery.ValueChangeListener. As usual, you should use setImmediate(true) to trigger the event immediately when the user changes the selection. The following example shows how to handle selection changes with a listener.

public class SelectExample

extends CustomComponent

implements Property.ValueChangeListener { // Create a Select object with a caption.

Select select = new Select("This is a Select component");