Interactive widgets

Controls the player clicks, drags or picks from. Full method lists: Interactive API. XML attributes and events: tag reference.

Every value control has a two-way bind... method: the widget takes the ref's value, follows its changes, and writes the player's changes back into it.

Widget	What it is	Constructor	Two-way binding
Toggle	An on/off switch.	new Toggle(name)	bindValue(Ref<boolean>)
Checkbox	A box with a label.	new Checkbox(name, text, family, size)	bindValue(Ref<boolean>)
Radio	A group of mutually exclusive options; addOption(text, family, size).	new Radio(name)	bindSelected(Ref<int>)
Slider	Drag a thumb along a range; setRange, setStep, setOrientation.	new Slider(name)	bindValue(Ref<float>)
Select	A dropdown list of SelectOption(label, value).	new Select(name, options, family, size)	bindSelected(Ref<int>), bindOptions(ReactiveArray)
OptionRotator	Left and right arrows cycling through options, as in game settings. setWrap.	new OptionRotator(name, options, family, size)	bindSelected(Ref<int>), bindValue(Ref<string>)
ToggleButtonBar	A segmented row of buttons, one selected; addButton(label).	new ToggleButtonBar(name, family, size)	bindSelected(Ref<int>)
MenuBar	A desktop-style menu bar; setEntries([new MenuBarEntry("File", items)]).	new MenuBar(name, family, size)
ContextMenu	A popup menu of MenuItems; setItems, showAt(x, y), or attach with widget.setContextMenu(menu) for right-click.	new ContextMenu(family, size)
Popover	A floating panel anchored to a widget, with an optional title and close button; open(trigger).	new Popover(name)
ToolBar	A row or column of tool buttons and ToolGroups, which clip, wrap or scroll when crowded.	new ToolBar(name)	ToolGroup.bindSelected
DragHandle	A grip you drag along an axis, for splitters and resizers.	new DragHandle(name)
TimePicker	Hour, minute and optional second columns, 12 or 24 hour.	new TimePicker(name, family, size)	bindTime(Ref<TimeValue>)
CalendarSelector	A month grid for picking a date, inline or as a popup.	new CalendarSelector(name, family, size)	bindDate(Ref<Date>)
KeybindInput	Click, then press a key combination to capture it, for control remapping.	new KeybindInput(name, family, size)	bindValue(Ref<KeyBinding>)
ImageCropper	Drag a crop rectangle over an image.	new ImageCropper(name)

MenuItem(label, onSelect) has disabled, separator and shortcut (a display-only hint such as "Ctrl+S") fields.

Example

import { Checkbox, DEFAULT_STAGE, LAYOUT_VBOX, OptionRotator, Panel, Ref, Screen, Select, SelectOption, Slider, Toggle } from "willowui";

const screen: Screen = new Screen();
const form: Panel = new Panel("form");
form.layout = LAYOUT_VBOX;
form.spacing = 12.0;
form.setPosition(40.0, 40.0);

const music: Ref<boolean> = new Ref<boolean>(true);
const toggle: Toggle = new Toggle("music");
toggle.bindValue(music);
form.addChild(toggle);

const subtitles: Ref<boolean> = new Ref<boolean>(false);
const check: Checkbox = new Checkbox("subs", "Subtitles", "default", 15.0);
check.bindValue(subtitles);
form.addChild(check);

const volume: Ref<float> = new Ref<float>(70.0);
const slider: Slider = new Slider("volume");
slider.setSize(240.0, 24.0);
slider.setRange(0.0, 100.0);
slider.bindValue(volume);
form.addChild(slider);

const quality: Ref<int> = new Ref<int>(1);
const select: Select = new Select("quality", [
    new SelectOption("Low", "low"),
    new SelectOption("Medium", "medium"),
    new SelectOption("High", "high"),
], "default", 15.0);
select.setSize(200.0, 32.0);
select.bindSelected(quality);
form.addChild(select);

const difficulty: OptionRotator = new OptionRotator("difficulty", ["Easy", "Normal", "Hard"], "default", 15.0);
difficulty.setSize(220.0, 32.0);
form.addChild(difficulty);

form.sizeToContent();
screen.add(form);
DEFAULT_STAGE.setScene(engine.root2d);
DEFAULT_STAGE.add(screen);
App.onFrame((dt: float): void => { DEFAULT_STAGE.update(dt); });