The ListView class represents a list view control.
// the folder bitmap is built once and reused for every item
let folder_bitmap = null;
function getFolderBitmap() {
if (!folder_bitmap) {
folder_bitmap = new Bitmap(`
"16 16 6 1",
" c None",
"! c #000000",
"# c #808080",
"$ c #C0C0C0",
"% c #FFFF00",
"& c #FFFFFF",
" ",
" ",
" ##### ",
" #%$%$%# ",
"#%$%$%$%###### ",
"#&&&&&&&&&&&&#! ",
"#&%$%$%$%$%$%#! ",
"#&$%$%$%$%$%$#! ",
"#&%$%$%$%$%$%#! ",
"#&$%$%$%$%$%$#! ",
"#&%$%$%$%$%$%#! ",
"#&$%$%$%$%$%$#! ",
"#&%$%$%$%$%$%#! ",
"##############! ",
" !!!!!!!!!!!!!! ",
" "`);
}
return folder_bitmap;
}
class MyForm extends Form {
list = null;
text = null;
last_sort_order = false;
last_sort_column = -1;
constructor() {
super("ListView Test", 100, 100, 700, 520);
this.setMinSize(500, 360);
// create list view and add some columns
this.list = new ListView();
this.list.setView(ListView.Details);
this.list.addColumn("Test Column", 200, ListView.AlignLeft);
this.list.addColumn("Test Column 2", 200, ListView.AlignLeft);
this.list.addColumn("Test Column 3", 200, ListView.AlignLeft);
this.add(this.list);
// add some items
const bitmap = getFolderBitmap();
this.list.addItem(new ListViewItem("Finch", bitmap));
this.list.addItem(new ListViewItem("Bluebird", bitmap));
this.list.addItem(new ListViewItem("Goose", bitmap));
this.list.addItem(new ListViewItem("Sparrow", bitmap));
this.list.addItem(new ListViewItem("Hummingbird", bitmap));
this.list.addItem(new ListViewItem("Duck", bitmap));
// connect events
this.list.keyDown.connect(this, this.onKeyDown);
this.list.itemSelect.connect(this, this.onItemSelect);
this.list.itemActivate.connect(this, this.onItemActivate);
this.list.itemRightClick.connect(this, this.onItemRightClick);
this.list.itemBeginLabelEdit.connect(this, this.onItemBeginLabelEdit);
this.list.itemEndLabelEdit.connect(this, this.onItemEndLabelEdit);
this.list.columnClick.connect(this, this.onColumnClick);
this.list.columnRightClick.connect(this, this.onColumnRightClick);
// text box for event output
this.text = new TextBox("", 0, 0, 140, 140);
this.text.setMultiline();
// some extra buttons
const additem_button = new Button("Add Item");
additem_button.click.connect(this, this.onAddItem);
const changeitem_button = new Button("Change Item");
changeitem_button.click.connect(this, this.onChangeItem);
const deleteitem_button = new Button("Delete Item");
deleteitem_button.click.connect(this, this.onDeleteItem);
const deleteall_button = new Button("Delete All");
deleteall_button.click.connect(this, this.onDeleteAll);
const exit_button = new Button("Exit");
exit_button.click.connect(this, this.onExit);
// create button layout
const button_layout = new BoxLayout(Layout.Horizontal);
button_layout.add(additem_button);
button_layout.addSpacer(8);
button_layout.add(changeitem_button);
button_layout.addSpacer(8);
button_layout.add(deleteitem_button);
button_layout.addSpacer(8);
button_layout.add(deleteall_button);
button_layout.addStretchSpacer();
button_layout.add(exit_button);
// create main layout
const main_layout = new BoxLayout(Layout.Vertical);
main_layout.addSpacer(8);
main_layout.add(this.list, 1, Layout.Expand | Layout.Left | Layout.Right, 8);
main_layout.addSpacer(8);
main_layout.add(this.text, 0, Layout.Expand | Layout.Left | Layout.Right, 8);
main_layout.addSpacer(8);
main_layout.add(button_layout, 0, Layout.Expand | Layout.Left | Layout.Right, 8);
main_layout.addSpacer(8);
this.setLayout(main_layout);
}
onColumnClick(sender, event_args) {
const column_to_sort = event_args.index;
// clicking the same column again reverses the sort order
const sort_order = (column_to_sort === this.last_sort_column)
? !this.last_sort_order
: true; // ascending
this.list.sortItems(column_to_sort, sort_order);
this.last_sort_order = sort_order;
this.last_sort_column = column_to_sort;
}
onColumnRightClick(sender, event_args) {
this.addLogLine(`Column right clicked; index = ${event_args.index}`);
const sortasc_item = new MenuItem("Sort Ascending");
const sortdec_item = new MenuItem("Sort Descending");
const deletecol_item = new MenuItem("Delete Column");
sortasc_item.index = event_args.index;
sortasc_item.sort_order = true;
sortasc_item.click.connect(this, this.onDoColumnSort);
sortdec_item.index = event_args.index;
sortdec_item.sort_order = false;
sortdec_item.click.connect(this, this.onDoColumnSort);
deletecol_item.index = event_args.index;
deletecol_item.click.connect(this, this.onDoColumnDelete);
const menu = new Menu();
menu.add(sortasc_item);
menu.add(sortdec_item);
menu.addSeparator();
menu.add(deletecol_item);
menu.popup(this.list);
}
onDoColumnSort(sender, event_args) {
this.list.sortItems(sender.index, sender.sort_order);
}
onDoColumnDelete(sender, event_args) {
this.list.deleteColumn(sender.index);
}
onKeyDown(sender, event_args) {
this.addLogLine(`Key down; Char code = ${event_args.keyCode}` +
` shiftDown(${event_args.shiftDown})` +
` controlDown(${event_args.controlDown})` +
` altDown(${event_args.altDown})`);
// handle user pressing Del key
if (event_args.keyCode === 127) {
this.list.deleteItem(event_args.index);
}
}
onItemSelect(sender, event_args) {
this.addLogLine(`Item selected; index = ${event_args.index}`);
}
onItemActivate(sender, event_args) {
this.addLogLine(`Item activated; index = ${event_args.index}`);
}
onItemRightClick(sender, event_args) {
this.addLogLine(`Item right clicked; index = ${event_args.index}`);
const menu_item1 = new MenuItem("Test Menu Item 1");
const menu_item2 = new MenuItem("Test Menu Item 2");
const menu_item3 = new MenuItem("Delete Listview Item");
menu_item3.item_number = event_args.index;
menu_item3.click.connect(this, this.onRightClickDelete);
const menu = new Menu();
menu.add(menu_item1);
menu.add(menu_item2);
menu.addSeparator();
menu.add(menu_item3);
menu.popup(this.list);
}
onRightClickDelete(sender, event_args) {
this.list.deleteItem(sender.item_number);
}
onItemBeginLabelEdit(sender, event_args) {
this.addLogLine(`Begin label edit; index = ${event_args.index}`);
}
onItemEndLabelEdit(sender, event_args) {
this.addLogLine(`End label edit; index = ${event_args.index}`);
}
onAddItem(sender, event_args) {
const caption = `Test Item ${this.list.getItemCount() + 1}`;
this.list.addItem(new ListViewItem(caption, getFolderBitmap()));
}
onDeleteItem(sender, event_args) {
for (const item of this.list.getSelectedItems()) {
this.list.deleteItem(item);
}
}
onChangeItem(sender, event_args) {
let counter = 0;
for (const item of this.list.getSelectedItems()) {
counter++;
item.setText(`${item.getText()} Changed Text`);
item.setColumnText(1, `Hello ${counter}`);
item.setColumnText(2, `Hello ${counter}`);
}
}
onDeleteAll(sender, event_args) {
this.list.clear();
}
addLogLine(s) {
this.text.setText(`${this.text.getText()}${new Date()} - ${s}\n`);
}
onExit() {
Application.exit();
}
}
const form = new MyForm();
form.show();
Application.run();True if the column was properly added, false otherwise
Adds a column to the list view control. The list view must be in Details mode in order for the column to be displayed. See setView() for more information.
Adds a ListViewItem item to the ListView.
Deletes all list view items from the control, clearing it out. Columns are not removed.
True if the column was properly added, false otherwise
Deletes a column from the list view control.
True if the item was properly deleted, false otherwise
Deletes an item from the list view. Either an item index or a list view item object may be specified in the parameter.
Deselects all the items in the list view control
Deselects the specified item or the item at the specified index.
Returns the ListViewItem if it's found, and null if the item can't be found.
Finds an item with the specified text and returns the ListViewItem that was found. If a ListViewItem with the specified text can't be found, the function returns null.
A ListViewItem object. If the call failed, null is returned.
Retrieves an item from the list view. In the parameter, either an item index or a list view item object may be specified.
The number of items in the list view control
Returns the number of items in the list view control
An Array of ListViewItem objects
Returns an Array object containing all ListViewItem objects in the list view control
true if item labels may be edited by the user, false otherwise
Returns a boolean value indicated whether the list view item labels may be edited
Returns the zero-based index of the first selected ListViewItem object in the list view control after the start index. If there are no selected items, the function returns -1.
Returns the zero-based index of the first selected ListViewItem object in the list view control after the start index. If there are no selected items, the function returns -1.
A ListViewItem object, or null if no items are selected in the list view.
Returns the first selected ListViewItem object in the list view control. If no objects are selected in the list view control, null is returned.
An Array of ListViewItem objects
Returns an Array object containing all selected ListViewItem objects in the list view control. If no objects are selected in the list view control, an empty array is returned.
One of the following values: ListView.LargeIcon, ListView.SmallIcon, ListView.Details, or ListView.List
Returns the current view mode of the list view control. See setView() for more information.
Inserts a ListViewItem item into the ListView at the specified position.
Returns true if the item is selected, and false otherwise. If an error is encountered during the call, null is returned.
Indicates whether or not the specified item is selected. If the item is selected, the function returns true. If the item is not selected, the function returns false.
Selects the specified item or the item at the specified index.
Invoking setLabelEdit allows the caller to determine whether label edits are generally allowed in the list view control. Passing true to the allow_label_edit parameter effectively makes the control read-only from the user's perspective.
True if the view mode was successfully set, false otherwise
List view controls have several view modes which allow data to be represented in various ways on the screen. The modes are ListView.LargeIcon, ListView.SmallIcon, ListView.Details, and ListView.List. The ListView.LargeIcon and ListView.SmallIcon modes allow items with various icon sizes to be viewed in a window. The ListView.Details and ListView.List modes allow items to be viewed as a list, along with extra columns to displayed next to the main item. The ListView.Details mode, in contrast with the ListView.List mode, has column headers. To use the ListView.Details or ListView.List mode, the caller must first add columns to the control.
Sorts the items in the list view. The column_index parameter specifies the column index to use in the sort. The second parameter, which is optional, specifies the sort order. If this parameter is not specified, an ascending sort order is assumed.