Core widgets

The building blocks every screen uses. Full method lists: Core API. XML attributes: tag reference.

Widget	What it is	Constructor
Component	An invisible box that holds and lays out children. The base of every widget.	new Component(name)
Panel	A component with a background, border and corner radius. The usual container.	new Panel(name)
Label	A line (or wrapped block) of text.	new Label(name, text, family, size)
Button	A clickable button with text.	new Button(name, text, family, size)
IconButton	A button showing an icon from the theme's sprites.	new IconButton(name)
Image	A texture or theme sprite, with scale modes.	new Image(name)
Tooltip	Floating help shown on hover.	new Tooltip(name)
ScrollBar	A standalone scroll bar.	new ScrollBar(name)
ScrollPanel	A clipped viewport with scroll bars and wheel scrolling.	new ScrollPanel(name)

Panel

setBackground(color), setBorder(color, width), setCornerRadii(tl, tr, br, bl), setPadding(top, right, bottom, left). A panel with no explicit colors draws its theme entry for its variant.

Label

setText, bindText(ref), setColor, setFontSize, setBold, setItalic, setAlign(...) with TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER or TEXT_ALIGN_RIGHT, setWrapWidth(px) to wrap long text.

Button and IconButton

setOnClick(fn), setText, bindText(ref), setAutoSize(v) to size to the text, setSize. bindActive(ref) shows a pressed-in state that follows a Ref<boolean>, for toggle-style buttons. IconButton.setIconKey(key) picks a sprite from the theme.

Image

setImage(texture), setRegion(region), setScaleMode(mode) with IMAGE_SCALE_STRETCH, IMAGE_SCALE_FIT, IMAGE_SCALE_FILL, IMAGE_SCALE_CENTER or IMAGE_SCALE_TILE, setCornerRadius, setAlpha. An Image does not own a texture you give it: dispose the texture yourself.

In XML, src="path" takes bytes you registered with registry.putAsset(path, bytes), and atlas="key" takes a theme sprite.

Tooltip

Most of the time you do not make one: call widget.setTooltipText("Saves the game", "default", 14.0). For rich content, build a Tooltip, fill it, and pass it to widget.setTooltip(tt). Placement constants: TOOLTIP_AUTO, TOOLTIP_ABOVE, TOOLTIP_BELOW, TOOLTIP_LEFT, TOOLTIP_RIGHT, TOOLTIP_FOLLOW_MOUSE.

ScrollPanel

Give it its visible size with setSize, add children, and set the scrollable size with setContentSize(w, h). setScrollX, setScrollY scroll it from code.

Example

import { Button, DEFAULT_STAGE, LAYOUT_VBOX, Label, Panel, Screen, TEXT_ALIGN_CENTER } from "willowui";

const screen: Screen = new Screen();
const card: Panel = new Panel("card");
card.layout = LAYOUT_VBOX;
card.spacing = 10.0;
card.setPadding(16.0, 16.0, 16.0, 16.0);
card.setBackground(Color.rgbaf(0.1, 0.11, 0.14, 1.0));
card.setCornerRadii(8.0, 8.0, 8.0, 8.0);
card.setPosition(40.0, 40.0);

const title: Label = new Label("title", "Quest complete", "default", 22.0);
title.setAlign(TEXT_ALIGN_CENTER);
card.addChild(title);

const body: Label = new Label("body", "You found the lost lantern. The keeper will want to hear about it.", "default", 15.0);
body.setWrapWidth(260.0);
card.addChild(body);

const ok: Button = new Button("ok", "Continue", "default", 16.0);
ok.setSize(120.0, 36.0);
ok.setTooltipText("Back to the map", "default", 14.0);
card.addChild(ok);
card.sizeToContent();
screen.add(card);

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