55 lines
No EOL
3.1 KiB
HTML
55 lines
No EOL
3.1 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>ui — Ludic</title>
|
||
<meta name="description" content="Declare a retained widget tree as data; the engine lays it out and draws it.">
|
||
<link rel="stylesheet" href="base.css">
|
||
<link rel="stylesheet" href="docs.css">
|
||
</head>
|
||
<body>
|
||
<header class="nav"><div class="wrap nav-in"><a class="brand" href="index.html"><span class="logo">L</span> Ludic</a><button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">☰</button><nav class="nav-links"><a href="index.html">Home</a><a href="api.html">API Reference</a><a class="nav-cta" href="https://git.workshopsoft.io/workshopsoft/ludic">Source ↗</a></nav></div></header>
|
||
<main class="wrap item">
|
||
<div class="crumbs"><a href="api.html">API Reference</a> <span>›</span> <a href="api.html#structure">Program structure</a> <span>›</span> <span class="here">ui</span></div>
|
||
<div class="item-head">
|
||
<span class="kind-badge kind-keyword">keyword</span>
|
||
<h1 id="top">ui</h1>
|
||
</div>
|
||
<code class="sig">ui { panel { … } }</code>
|
||
<div class="desc"><p>A <code>ui</code> block declares a <b>retained</b> widget tree as data — panels, labels and buttons — and hands layout, drawing and keyboard focus to the engine, so you describe the interface once instead of repainting it every frame. Widget types are <code>panel</code> (a container with optional skin/background/border), <code>col</code>/<code>row</code> (pure stacks), <code>label</code>, <code>button</code> (focusable), <code>image</code> and <code>spacer</code>, and their props are evaluated at build time, so <code>font: title_font</code> reads a value the program set first. Each <code>id: Name</code> mints a <code>UI_Name</code> handle you drive from handlers: call <code>Ui.build()</code> then <code>Ui.open(UI_MainMenu)</code> at start, <code>Ui.tick(Input.key())</code> each update to move focus and activate, and <code>Ui.clicked(UI_Name)</code> to react. Draw it during <code>Render</code> with <code>Ui.render()</code> between <code>Screen.clear</code> and <code>Screen.show()</code>.</p></div>
|
||
|
||
<div class="examples"><h2>Example</h2><pre data-lang="ludic">program TitleScreen {
|
||
var title_font: int = 0
|
||
|
||
ui MainMenu {
|
||
panel id: Root w: 288 pad: 16 gap: 6 bg: 0x1a1a2c align: center {
|
||
label text: "CHRONO RIFT" font: title_font size: 26 fg: 0xffe060 align: center
|
||
button id: NewGame text: "New Game" font: title_font size: 16 w: 236
|
||
button id: Quit text: "Quit" font: title_font size: 16 w: 236
|
||
}
|
||
}
|
||
|
||
handler Boot phase Start {
|
||
title_font = Font.load("/System/Library/Fonts/Supplemental/Arial.ttf")
|
||
Ui.build()
|
||
Ui.open(UI_MainMenu)
|
||
}
|
||
|
||
handler Navigate phase Update {
|
||
Ui.tick(Input.key())
|
||
if Ui.clicked(UI_Quit) { quit() }
|
||
}
|
||
|
||
handler DrawWorld phase Render {
|
||
Screen.clear(Color.MidnightBlue)
|
||
Ui.render()
|
||
Screen.show()
|
||
}
|
||
}</pre></div>
|
||
|
||
<a class="back" href="api.html">← All symbols</a>
|
||
</main>
|
||
<script src="ludic-highlight.js"></script>
|
||
<script>Ludic.highlightAll(); Ludic.installCards(); Ludic.flashTarget();</script>
|
||
</body></html> |