User Interface Components

5.14.3. ListSelect

The ListSelect component is list box that shows the selectable items in a vertical list. If the number of items exceeds the height of the component, a scrollbar is shown.The component allows both single and multiple selection modes, which you can set with setMultiSelect(). It is visually identical in both modes.

// Create the selection component

ListSelect select = new ListSelect("My Selection");

// Add some items select.addItem("Mercury"); select.addItem("Venus"); select.addItem("Earth");

...

select.setNullSelectionAllowed(false);

// Show 5 items and a scrollbar if there are more select.setRows(5);

The number of visible items is set with setRows().

Figure 5.39. The ListSelect Component

CSS Style Rules

.v-select {}

.v-select-select {}

The component has a v-select overall style. The native select element has v-select-select style.

5.14.4. Native Selection Component NativeSelect

NativeSelect offers the native selection component of web browsers, using the HTML <select> element. The component is shown as a drop-down list.

// Create the selection component

final NativeSelect select = new NativeSelect("Native Selection");

//Add some items select.addItem("Mercury"); select.addItem("Venus");

...

//Set the width in "columns" as in TextField select.setColumns(10);

select.setNullSelectionAllowed(false);

ListSelect

133