Orkuncakilkaya
66a2bc2214
A `view Name { field = x; function q(..); on e(..) }` declaration is the one bridge between a
program and its UI: it writes view_<name>() -> UiView, whose model is a Value of every field and
whose call runs a query or an event by name.
ludic.ui is a template runtime:
- HTML-shaped XML screens and components, loaded at run time;
- {expression} bindings, if/else/each, props, slots, per-instance state;
- on-press / onclick actions (event, set, emit);
- component libraries (export="true", <import src as>).
Styling:
- stylesheets in <style> or importable .lss files (@import);
- CSS selectors (#id, .class, [attr=v], descendant and > combinators, :hover, :disabled,
:first-child, :last-child, :nth-child, :not) weighed by specificity;
- the box model and flex under CSS's property names.
Also:
- default parameters, and positional-then-named calls;
- Value gains a float kind;
- a function shadowing a runtime one is refused;
- an index is evaluated before the slice is read;
- runtime errors name the right file.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
28 lines
2.3 KiB
Text
28 lines
2.3 KiB
Text
# ui_html.ludic — ludic.ui read as HTML and CSS: HTML's elements with a browser's defaults, ids,
|
|
# classes, style="...", hidden and disabled, onclick; selectors with ids, descendants, children,
|
|
# attributes and pseudo-classes, weighed by specificity; CSS's own property names and the box model.
|
|
import "ludic.ui"
|
|
program UiHtml {
|
|
numbers float
|
|
var clicks: int = 0
|
|
view Page {
|
|
clicks = clicks
|
|
on clicked() { clicks += 1 }
|
|
}
|
|
const LOOK: string = "/* look.lss */\n.card { padding: 4 8 12 16; margin: 3; border: 2px solid #0000ff; width: 50% }\n#title { font-size: 40 }\nh1.big { font-size: 20 }\n.card p { color: #00ff00 }\nul > li { height: 30 }\nli:first-child { color: #ff0000 }\nli:nth-child(even) { color: #0000ff }\nli:last-child:not(.keep) { display: none }\n[kind=warn] { background-color: #ffff00 }\nbutton:disabled { opacity: 0.5 }\n"
|
|
const PAGE: string = "<ui>\n<import src='look.lss'/>\n<screen name='page'>\n <h1 id='title' class='big'>Title</h1>\n <div class='card'><p>inside</p><span kind='warn'>careful</span></div>\n <p>outside</p>\n <ul><li>one</li><li>two</li><li>three</li><li>gone</li></ul>\n <hr/>\n <p style='text-align: center; width: 200px'>mid</p>\n <button disabled='{clicks > 0}' onclick='clicked()'>Go</button>\n <p hidden='true'>never</p>\n</screen>\n</ui>\n"
|
|
entry {
|
|
ui_load_text(LOOK, "ui/look.lss")
|
|
ui_load_text(PAGE, "ui/page.ludic.xml")
|
|
var root: UiNode = ui_nodes("page", view_page())
|
|
ui_place(root, 0.0, 0.0, 400.0, 600.0)
|
|
let card = root.children[1]
|
|
let items = root.children[3].children
|
|
print(`id beats class: {int(root.children[0].rsize)}; card {int(card.cw)} wide at {int(card.x)},{int(card.y)} pad {int(card.pt)} {int(card.pr)} {int(card.pb)} {int(card.pl)} border {int(card.border)}`)
|
|
print(`inside {card.children[0].fg}, outside {root.children[2].fg}; warn bg {card.children[1].bg}; items {len(items)} of 30: {int(items[0].ch)}; colours {items[0].fg} {items[1].fg} {items[2].fg}; hr {int(root.children[4].ch)}; children {len(root.children)}`)
|
|
ui_press(root.children[6])
|
|
root = ui_nodes("page", view_page())
|
|
ui_place(root, 0.0, 0.0, 400.0, 600.0)
|
|
print(`clicks {clicks}; the button now disabled {not root.children[6].enabled} at opacity {root.children[6].alpha}; text-align {root.children[5].talign}`)
|
|
}
|
|
}
|