ScriptWeaver

Widget basics

Everything you put on screen is a widget — buttons, labels, entries, frames, and so on. They all share the same small model, described here once; the widget reference pages then list only what's specific to each.

Creating widgets

Create a widget as a child of a container, using the container's factory method:

const frame = app.TFrame(); // a frame inside the main window
const btn = frame.TButton({ text: 'OK' }); // a button inside that frame

The global app is the main window, and it's a container — so the usual starting point is app.Something({…}).

Prefer the factory form (parent.Widget({…})). It parents the widget correctly and keeps it alive as long as its parent lives. You can write new TButton({…}), but then you must keep a reference to it yourself — a widget with no references can be garbage-collected and vanish from the window.

Options are live properties

Every option you can pass to the constructor is also a property you can read and write at any time:

const e = app.TEntry({ width: 30 }); // set at creation
e.width = 40; // change later
console.log(e.width); // read

Writing a property updates the widget immediately.

Common methods

Every widget inherits these:

Member What it does
.pack / .grid / .place Geometry-manager proxies, e.g. w.pack.configure({ fill: 'x' }). See Layout.
.bind(seq, handler) Handle an event, e.g. w.bind('<Double-1>', …). See Events.
.focus() Give the widget keyboard focus.
.destroy() Remove the widget (and its children).
.winfo Geometry queries: w.winfo.width(), .height(), .rootx(), …
.wm Window-manager ops — title, geometry, … Meaningful on the main window and TopLevel windows: app.wm.title('My App').

Containers vs. leaf widgets

Some widgets are containers: the main window (app), TFrame, TNotebook tabs, PanedWindow, and others. A container exposes a factory method for each widget type, so you build a tree by nesting:

const card = app.TFrame({ padding: 10 });
card.TLabel({ text: 'Title' }).pack.configure();
card.TButton({ text: 'Go' }).pack.configure();
card.pack.configure({ fill: 'x' });

Leaf widgets — a button, an entry, a label — hold no children.

Reactive variables

For two-way binding — keeping a value and one or more widgets in sync — use a variable (StringVar, IntVar, BoolVar, DoubleVar) together with a widget's textVariable or variable option. See Variables & reactivity.

Next