Containers

Widgets that hold and organise other widgets or rows of data. Full method lists: Containers API. XML attributes and events: tag reference.

Widget	What it is	Constructor
Window	A movable, optionally resizable and closeable window with a title bar and a body. Can be modal.	new Window(name, title, family, size)
TabBar	Tabs, each with its own page; addTabPage(label, layout, spacing, padding) returns the page.	new TabBar(name, family, size)
List	A scrolling list of ListItem(data) rows with selection; recycles row views, so it handles long lists.	new List(name, itemHeight)
TileList	A scrolling grid of tiles, for inventories and galleries.	new TileList(name, tileW, tileH)
TreeList	An expandable tree of TreeNodes.	new TreeList(name, itemHeight)
SortableList	A list the player reorders by dragging (or the keyboard).	new SortableList(name, itemHeight)
SortableTreeList	A tree the player reorders and reparents by dragging.	new SortableTreeList(name, family, size)
TreeTable	A tree with columns, sortable by column.	new TreeTable(name, family, size)
Accordion	Stacked sections that open and close; exclusive keeps one open at a time.	new Accordion(name)
NavDrawer	A panel that slides in from the left or right edge; open(), close(), pinned.	new NavDrawer(name)
AnchorLayout	An anchor-layout container with a background and border.	new AnchorLayout(name)
TwoColumnLayout	Label and control pairs in two aligned columns; addRow(left, right).	new TwoColumnLayout(name)

Windows

Put content in window.body, add the window to the screen, then register it with DEFAULT_WINDOW_MANAGER.add(window) so clicking brings it to the front and focus moves with it. setModal(true) blocks the rest of the screen behind an overlay. setEscResult("cancel") and setEnterResult("ok") close the window on Escape or Enter and pass that string to setOnResult(fn). Constants: DEFAULT_WINDOW_WIDTH, DEFAULT_WINDOW_HEIGHT, WINDOW_TITLE_BAR_HEIGHT.

Lists

setItems([...]) replaces the rows, bindItems(reactiveArray) follows a ReactiveArray<ListItem>, bindSelected(Ref<int>) follows and writes the selected index, setOnChange(fn) fires on selection. Rows draw data as text by default; the API page lists the hooks for custom row content.

Example

import { DEFAULT_STAGE, DEFAULT_WINDOW_MANAGER, Label, List, ListItem, Ref, Screen, Window } from "willowui";

const screen: Screen = new Screen();

const win: Window = new Window("inventory", "Inventory", "default", 16.0);
win.setSize(300.0, 280.0);
win.setPosition(60.0, 60.0);
win.setResizable(true);

const picked: Ref<int> = new Ref<int>(0);
const list: List = new List("items", 28.0);
list.setSize(280.0, 180.0);
list.setItems([new ListItem("Potion"), new ListItem("Ether"), new ListItem("Lantern"), new ListItem("Rope")]);
list.bindSelected(picked);
win.body.addChild(list);

const status: Label = new Label("status", "Pick an item", "default", 14.0);
list.setOnChange((): void => { status.setText("Selected item " + (picked.peek() + 1)); });
win.body.addChild(status);

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