Getting started

This page takes you from an empty project to a window with a label and a button. It assumes you have thicket installed and have read Your first window.

1. Make a window project

thicket new myui window
cd myui

2. Add the package

willowui is a package, so your thicket.json lists it under packages. It draws with the willow system and builds some images with bitmap, so your project lists both systems too. A package never grants itself systems or permissions: your project does.

{
    entry: "app.tks",
    systems: ["willow", "bitmap"],
    packages: { willowui: "../willowui-tks" },
    window: { title: "My UI", width: 800, height: 600 },
}

The key, willowui, is the name you import from. The value is the path to the package folder.

If your app reads files (templates, themes, images from disk), add the fs system and permissions: { fs: true }.

3. Write the app

Replace app.tks with this:

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

const screen: Screen = new Screen();

const hello: Label = new Label("hello", "Hello from willowui", "default", 20.0);
hello.setPosition(24.0, 24.0);
screen.add(hello);

const button: Button = new Button("greet", "Say hi", "default", 16.0);
button.setSize(120.0, 36.0);
button.setPosition(24.0, 70.0);
button.setOnClick((): void => {
    hello.setText("Hi!");
});
screen.add(button);

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

Run it:

thicket run

What each part does

Line	What it does
new Screen()	A screen holds one tree of widgets plus its own focus and input handling.
new Label(name, text, font, size)	Most widgets take a name first. Names let you find a widget later with screen.findByName(name). "default" is the built-in font family.
screen.add(widget)	Puts the widget in the screen's root.
DEFAULT_STAGE.setScene(engine.root2d)	The stage draws its screens into willow's 2D scene.
DEFAULT_STAGE.add(screen)	Pushes the screen onto the stage and shows it.
DEFAULT_STAGE.update(dt)	Called once per frame. It runs input, focus, controllers and layout. Without it nothing responds.

Importing

Everything public is exported from the package root, so one import line covers most apps:

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

You can also import a single file by its path, which is what the examples in the willowui repository do:

import { Button } from "willowui/src/core/button";

Next

• Concepts: screens, the stage, controllers and components.
• Layout: stop positioning by hand.
• XML templates: describe the screen in markup instead of code.