User Interface Components

Figure 5.36. Selected Item

5.14.2. Basic Select Component

The Select component allows, in single selection mode, selecting an item from a drop-down list. The component also has a text field area, which allows entering search text by which the items shown in the drop-down list are filtered.

In multiple selection mode, the component shows the items in a vertical list box, identical to

ListSelect.

Figure 5.37. The Select Component

Filtered Selection

The Select component allows filtering the items available for selection. The component shows as an input box for entering text. The text entered in the input box is used for filtering the available items shown in a drop-down list. Pressing Enter will complete the item in the input box. Pressing Up- and Down-arrows can be used for selecting an item from the drop-down list. The drop-down list is paged and clicking on the scroll buttons will change to the next or previous page. The list selection can also be done with the arrow keys on the keyboard. The shown items are loaded from the server as needed, so the number of items held in the component can be quite large.

Vaadin provides two filtering modes: FILTERINGMODE_CONTAINS matches any item that contains the string given in the text field part of the component and FILTERINGMODE_STARTSWITH matches only items that begin with the given string. The filtering mode is set with setFilteringMode(). Setting the filtering mode to the default value FILTERINGMODE_OFF disables filtering.

Select select = new Select("Enter containing substring");

select.setFilteringMode(AbstractSelect.Filtering.FILTERINGMODE_CONTAINS);

Basic Select Component

131

User Interface Components

/* Fill the component with some items. */ final String[] planets = new String[] {

"Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune" };

for (int i = 0; i < planets.length; i++)

for (int j = 0; j < planets.length; j++) { select.addItem(planets[j] + " to " + planets[i]);

The above example uses the containment filter that matches to all items containing the input string. As shown in Figure 5.38, “Filtered Selection” below, when we type some text in the input area, the drop-down list will show all the matching items.

Figure 5.38. Filtered Selection

CSS Style Rules

.v-filterselect { }

.v-filterselect-input { }

.v-filterselect-button { }

.v-filterselect-suggestpopup { }

.v-filterselect-prefpage-off { }

.v-filterselect-suggestmenu { }

.v-filterselect-status { }

.v-select { }

.v-select-select { }

In its default state, only the input field of the Select component is visible. The entire component is enclosed in v-filterselect style, the input field has v-filterselect-input style and the button in the right end that opens and closes the drop-down result list has v-filterselect-button style.

The drop-down result list has an overall v-filterselect-suggestpopup style. It contains the list of suggestions with v-filterselect-suggestmenu style and a status bar in the bottom with v-filterselect-status style. The list of suggestions is padded with an area with v-filterselect-prefpage-off style above and below the list.

In multiselect-mode, the styles of the component aere identical to ListSelect component, with v-select overall style and v-select-select for the native selection element.

132	Basic Select Component