Skip to content
Plume3D Docs

UI Input Demo

apps/ui_input_demo shows the retained UI’s editable text input — a focusable, single-line type = "input" field (engine PLM-142, ADR 0041). Click a field to focus it (a caret appears), type to edit, and the game reads the value straight off the element. Two fields demonstrate the two starting states: a Name field that opens with initial text, and a City field that shows a dimmed placeholder until you type.

What it demonstrates

Section titled “What it demonstrates”
  • A type = "input" element renders a focusable field. Clicking it focuses the field (a caret bar, tinted by caret_color, appears); a press elsewhere blurs it. Typing edits the buffer — insert, backspace, delete, and Left/Right/Home/End caret movement are all UTF-8-aware (whole codepoints), handled by the engine’s device-free edit core.
  • text seeds the field’s initial value (the Name field starts as Ada Lovelace); placeholder is a dimmed hint shown only while the field is empty (the City field shows Type a city…).
  • The game reads the current value through the existing elem.text accessor — there is no new Wren method. Two optional handlers dispatch to Game.<name>(): on_change fires whenever the buffer changes, and on_submit fires on Enter.
  • This is the v1 field: single-line, focus-by-click. Selection, clipboard, multi-line, and IME composition are a documented follow-up.
// Fired when a focused field's buffer changes.
onChange() {
  var f = Ui.get(_doc, "nameField")
  if (f != null && f.valid) Logger.info("name = '%(f.text)'")   // read the value via elem.text
}


// Fired on Enter in a focused field.
onSubmit() { Logger.info("submitted") }

The document

Section titled “The document”

The layout lives in apps/ui_input_demo/ui/main.ui: a full-window background panel, two labels, and two type = "input" fields. nameField carries a starting text; cityField carries a placeholder instead. Both set a color (the field frame) and a caret_color, and route on_change / on_submit to the Game methods above. See the Ui API for the full field reference.

[[element]]
id          = "nameField"
type        = "input"
parent      = "root"
text        = "Ada Lovelace"        # opens with an initial value
color       = [0.20, 0.22, 0.28, 1.0]
caret_color = [0.95, 0.80, 0.35, 1.0]
on_submit   = "onSubmit"            # -> Game.onSubmit() on Enter
on_change   = "onChange"            # -> Game.onChange() when the buffer changes


[[element]]
id          = "cityField"
type        = "input"
parent      = "root"
placeholder = "Type a city…"        # dimmed hint shown while empty
color       = [0.20, 0.22, 0.28, 1.0]
caret_color = [0.95, 0.80, 0.35, 1.0]
on_submit   = "onSubmit"

The demo auto-captures ui_input_demo.png after ~1.5 s so the render can be verified headlessly.

See the Ui API for the input field reference and the elem.text accessor, and the UI Widgets demo for the retained UI’s other interactive widgets.