willowui

willowui is the UI toolkit for ThicketScript: buttons, labels, text input, lists, trees, tables, windows, menus, tooltips, toasts, color and date pickers, and more. It lays widgets out for you, styles them with themes, keeps them in step with your data through reactive refs, and can build a whole screen from an XML template.

It is written entirely in ThicketScript on top of willow, the 2D module, and it ships as a package that your project lists.

Illustration

A first screen

This is a complete window app: a label that counts and a button that adds one.

import { Button, DEFAULT_STAGE, Label, Ref, Screen } from "willowui";

const screen: Screen = new Screen();
const clicks: Ref<int> = new Ref<int>(0);
const text: Ref<string> = new Ref<string>("Clicks: 0");

const label: Label = new Label("count", "", "default", 24.0);
label.bindText(text);
label.setPosition(24.0, 24.0);
screen.add(label);

const button: Button = new Button("add", "Click me", "default", 16.0);
button.setSize(140.0, 40.0);
button.setPosition(24.0, 80.0);
button.setOnClick((): void => {
    clicks.set(clicks.peek() + 1);
    text.set("Clicks: " + clicks.peek());
});
screen.add(button);

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

The same screen as an XML template:

<Panel layout="vbox" spacing="12" padding="20">
    <Label bind:text="'Clicks: ' + clicks" fontSize="24" />
    <Button text="Click me" on:click="add" />
</Panel>

XML templates shows the controller that supplies clicks and add.

Where to go next

If you want to	Read
Add willowui to a project and open a window	Getting started
Understand screens, the stage and components	Concepts
Arrange widgets in rows, columns, grids and anchors	Layout
Build screens from XML	XML templates
Look up a widget	Widget catalogue
Style with variants and themes	Variants and inline themes
Get typed input back into your data	Recipe: a form

What is in the box

Family	Widgets
Core	Component, Panel, Label, Button, IconButton, Image, Tooltip, ScrollBar, ScrollPanel
Display	Badge, ProgressBar, MeterBar, RichText, AnimatedImage, StatWeb, Toast, Spacer
Interactive	Toggle, Checkbox, Radio, Slider, Select, OptionRotator, ToggleButtonBar, MenuBar, ContextMenu, Popover, ToolBar, DragHandle, TimePicker, CalendarSelector, KeybindInput, ImageCropper
Text	TextInput, TextArea, MaskedInput, InputField, SearchBox, NumberStepper, Tag, TagBar, ColorPicker
Containers	Window, TabBar, List, TileList, TreeList, SortableList, SortableTreeList, TreeTable, Accordion, NavDrawer, AnchorLayout, TwoColumnLayout
Composites	DataTable, GradientEditor

Status

willowui is a port of an earlier Go library, and some files and comments in its source still say so. The pages here describe what the code does today; where a feature is partial, the page says so.