uiCheckListBox

Required: Aspire UI Components Standard Edition

The uiCheckListBox control creates a list box containing check box items, within a scrollable area.

Functionally, this is the same as the uiListBox except:

(i) drag-scrolling and drag-selection is not supported (ie end-users cannot mouse down and drag to scroll the list or drag to select multiple items). This is the intended behavior because selection of items is intended to be on a toggle-basis. Therefore, the original behavior of the uiListBox has to be changed to avoid user confusion.

(ii) the multipleSelect property is always true.

Also note that unlike the uiCheckBox control, toggling selection of an item in the uiCheckBoxList is done when the mouse is pressed down on the item, not upon mouse released over the item.

import com.ghostwire.ui.controls.uiCheckListBox;
import com.ghostwire.ui.data.uiModel;
 
// create the data model
var model:uiModel = new uiModel();
model.addItem( {label:"Item 1", data:"Data 1"} );
model.addItem( {label:"Item 2", data:"Data 2"} );
model.addItem( {label:"Item 3", data:"Data 3"} );
model.addItem( {label:"Item 4", data:"Data 4"} );
model.addItem( {label:"Item 5", data:"Data 5"} );
model.addItem( {label:"Item 6", data:"Data 6"} );
model.addItem( {label:"Item 7", data:"Data 7"} );
model.addItem( {label:"Item 8", data:"Data 8"} );
model.addItem( {label:"Item 9", data:"Data 9"} );
 
// create the checklistbox instance
var checkList:uiCheckListBox = new uiCheckListBox();
checkList.x = 10;
checkList.y = 10;
checkList.rowCount = 5;
checkList.model = model;
 
// add to display list
addChild(checkList);

Using the “classic” skin:

Using the “graylic” skin:

While a uiCheckListBox control has focus, the user can use the following keys to interact with the control:

Note: the user can also use SHIFT and/or CONTROL keys to create non-contiguous selections.

For more information on the members of the com.ghostwire.ui.controls.uiCheckListBox class, please refer to the API Reference.