Select

The Select component allows for adding new items by the user, with a user interface similar to combo boxes in desktop user interfaces (HTML does not allow exactly identical element). If the newItemsAllowed mode is enabled with setNewItemsAllowed() method, an text box for entering new items will be displayed besides the selection component. Clicking on the "+" button adds the item to the component.

Figure 4.10. 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 take this into account 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.

Setting the Select in multiple selection mode with the setMultiSelect() method changes the appearance to a scrollable list box. By holding the Ctrl or Shift key pressed, the user can select multiple items.

See also the behaviour of the component in multiSelect mode with other styles below. With the twincol style, the selection is done by moving items from a list to a list of selected items. With the optiongroup style, the items are displayed as check boxes.

myselect.setMultiSelect(true);

Figure 4.11. Multiple Selection as a List Box with the Select Component

In multiple selection mode, the property of a Select object will be an array of currently selected items.

The optiongroup style of the Select component shows the items as radio buttons for single selection.

myselect.setStyle("optiongroup");

Figure 4.12. Radio Button Group

The optiongroup style of the Select component shows the items as check boxes when multiSelect mode is enabled.

Another way to use check boxes is to use the switchMode mode of a Button object to make it look like a check box. See the section called “Check Box”. The advantages of the Select component is that it maintains the individual check box objects, you can get the array of all currently selected items easily, and that you can easily change the appearance of the component to another style.

myselect.setStyle("optiongroup");
myselect.setMultiSelect(true);

Figure 4.13. Check Box Group

The twincol style of the Select component enables a multiple selection component that shows two lists side by side. 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 moved back by selecting them and clicking on the "<<" button.

myselect.setStyle("twincol");
myselect.setMultiSelect(true);

Figure 4.14. Twin Column Selection

The component has little meaning for single selection.

The Select component allows powerful dynamic filtering of the items available for selection. The select component shows like a combo box for entering text. The text entered in the input box will be 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, or moving with the keyboard, will jump to the next or previous page. The shown items are loaded from the server as needed, so the number of items held in the component can be quite large.

Filters are classes that implement the OptionFilter interface. IT Mill Toolkit provides two filters: the ContainsFilter for matching any item that contains the given string and StartsWithFilter for matching items that begin with the given string.

The filtering mode of the Select component is enabled with the setLazyLoading(true) method. It changes the appearance of the item to include the text input field. The filter may be set with setOptionFilter(), which takes as a parameter an object that has the OptionFilter interface. If the filter is not set, the default filter (StartsWithFilter) will be used.

/* Create the Select component. */
Select select = new Select("Filter Select");
        
/* Enable Filter Select functionality with lazyLoading attribute. */
select.setLazyLoading(true);
        
/* Use a specific filter. */
select.setOptionFilter(new ContainsFilter(select));
        
/* Add some items in the component. */
String planets[] = new String[]{"Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn"};
for (int i=0; i<planets.length; i++)
    for (int j=0; j<planets.length; j++)
        select.addItem(planets[i] + " to " + planets[j]);

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

Figure 4.15. Filtered Selection

The FilterSelect demo of the IT Mill Toolkit Demo Application provides an example of filtering of the items in Select component. It also demontrates the creation of a custom filter.