ListBox - Grisgram/gml-raptor GitHub Wiki

Base Controls - Containers - Tooltips - Clickables - Checkables - ✔ListBox - InputBox - Mouse Cursor - ControlTree

This is a dropdown list, that lets the user select one item. It is fully LG compatible and takes care of the text length. If the text does not fit into the ListBox, it adds ellipsis (...) characters and a tooltip, which shows the full text.

The ListBox adds these Variable Definitions:

list_style	You may choose between listbox_style.dropdown and listbox_style_listview. The latter does not offer a box with an arrow, it displays only the panel of the list:
down_arrow_sprite	You may change the sprite used to display the down-arrow. Look at the default sprite to know, how to design it and take care of the origin of the sprite!
on_list_openeing on_list_opened on_list_closed	Callbacks for the events, when the user interacts with the ListBox. NOTE: You may fill the items array in the on_list_opening callback too. You don't have to prefill it at design time.
on_item_selected	The most important callback. Gets invoked, when the User selected an item from the list. The callback receives two arguments: The valuemember and the displaymember of the item
list_item_object	The object type to use to display a list item
sorting	Sort the items ascending or descending based on their text or do not sort them at all
wheel_scroll_lines	The number of items the list shall scroll when the user uses the mouse wheel
max_items_shown	Defines the maximum height of the dropdown. If more items are added, a scrollbar gets displayed
items	An array of items. They must follow this pattern: value:text Example: ["en:English", "de:German"] The part before the ":" colon will be the valuemember, and the second part will be the displaymember. This can be a LG string, like: "de:=settings/languages/german" Here is a small example, how a language-select box could look like when you use scribble texts with icons: This list has been created with this items array: ["de:[ci_white][sprLG_de][/] Deutsch","en:[ci_white][sprLG_en][/] English"]
selected_index	The currently selected index in the list. Settings this at design time lets you pre-select a specific item

To manage the contents of your ListBox, you have several choices, like:

• Add the items at design time directly in the Variable Definitions (quite uncomfortable)
• Fill the list with data in your Create event of your UI object
• Use the on_list_opening callback of the ListBox to fill it just before the contents get shown

No matter, which way you choose in your game, these are the functions, that allow you to modify the list contents:

The most comfortable way to add something to the list, because you may cleanly supply a displaymember and a valuemember, without any "value:string" tricks.

/// @function add_item(_displaymember, _valuemember)
/// @description Adds a new item to the list
add_item = function(_displaymember, _valuemember) {

/// @function clear_items()
/// @description Clear all items from the listbox and set selected_index to -1.
///		 NOTE: This will NEVER trigger the on_item_selected callback!
clear_items = function() {

/// @function remove_item_by_value(_valuemember)
/// @description Removes an item by its value from the list
remove_item_by_value = function(_valuemember) {

/// @function remove_item_by_name(_displaymember)
/// @description Removes an item by its name from the list
remove_item_by_name = function(_displaymember) {

/// @function get_selected_value()
/// @description Gets the valuemember of the selected item or undefined, if nothing is selected
get_selected_value = function() {

Base Controls - Containers - Tooltips - Clickables - Checkables - ✔ListBox - InputBox - Mouse Cursor - ControlTree