Hitri začetek
V petih minutah napiši program, ga preveri, testiraj in zaženi.
Ta vodnik zgradi števec: en orbital z eno lastnostjo. Je majhen, a je celoten program Orb, in vsak korak je enak tudi pri velikem.
1. Napiši program
Ustvari counter.lolo:
1app counter "1.0.0"
2"A counter with increment, decrement and reset."
3orbital CounterOrbital {
4 entity Counter [runtime] {
5 id : string!
6 count : number = 0
7 }
8
9 trait Counting -> Counter [interaction, instance] {
10 initial: ready
11
12 state ready {
13 INIT -> ready
14 (render-ui main { type: stack, direction: horizontal, gap: md, align: center, children: [
15 { type: button, label: "−", action: DECREMENT, variant: secondary, aria-label: "Decrease" },
16 { type: typography, content: @entity.count, variant: h2 },
17 { type: button, label: "+", action: INCREMENT, variant: primary, aria-label: "Increase" },
18 { type: button, label: "Reset", action: RESET, variant: ghost }
19 ] })
20 INCREMENT -> ready
21 (set @entity.count (+ @entity.count 1))
22 DECREMENT -> ready
23 (set @entity.count (- @entity.count 1))
24 RESET -> ready
25 (set @entity.count 0)
26 }
27 }
28
29 page "/counter" -> Counting
30}Beri od zgoraj navzdol: entiteta Counter hrani eno število, lastnost Counting ima eno stanje, ready. Ob INIT (ko se stran odpre) nariše vrsto gumbov in število. Vsak gumb pošlje dogodek, vsak dogodek pa ima prehod, ki posodobi število. Besedilo je vezano na @entity.count, zato se ob spremembi znova nariše.
2. Preveri
orb validate counter.loloMerilo je 0 napak in 0 opozoril. Poskusi ga pokvariti: izbriši prehod RESET -> ready in znova preveri. Prevajalnik sporoči, da gumb Reset pošilja dogodek, ki ga ne obravnava nobeno stanje. To je zaprti krog: vsak element, s katerim lahko uporabnik nekaj sproži, mora nekam voditi.
3. Testiraj
orb verify counter.loloPreverjanje izvede vsak prehod in preveri, da naredi, kar napoveduje: stanje, v katerem pristane, učinke, ki jih izvede, in zaslon, ki ga nariše.
4. Zaženi
orb serve counter.lolo --openorb serve prevede program v aplikacijo TypeScript in jo streže z vgrajenim izvajalnim okoljem, brez Node.js. Isti program teče na tej strani:
trait Counting -> Counter [interaction, instance] {
state ready {
INIT -> ready
(render-ui main <Stack align={center} direction={horizontal} gap={md}>
<Button action={DECREMENT} aria-label={Decrease} label={"−"} variant={secondary} />
<Typography content={@entity.count} variant={h2} />
<Button action={INCREMENT} aria-label={Increase} label={"+"} variant={primary} />
<Button action={RESET} label={Reset} variant={ghost} />
</Stack>)
INCREMENT -> ready
(emit MOVED { event: INCREMENT })
(set @entity.count (+ @entity.count 1))
DECREMENT -> ready
(emit MOVED { event: DECREMENT })
(set @entity.count (- @entity.count 1))
RESET -> ready
(emit MOVED { event: RESET })
(set @entity.count 0)
}
emits {
MOVED -> external {
event : string!
}
@description "Each move names the event it took, so the diagram beside the demo can follow it."
}
}1app std-orb-docex-counter "1.0.0"
2"std-orb-docex-counter — the smallest complete orbital: one entity, one trait with one state, three buttons and a closed circuit."
3orbital CounterOrbital {
4 entity Counter [runtime] {
5 id : string!
6 count : number = 0
7 }
8
9 trait Counting -> Counter [interaction, instance] {
10 initial: ready
11
12 state ready {
13 INIT -> ready
14 (render-ui main { type: stack, direction: horizontal, gap: md, align: center, children: [
15 { type: button, label: "−", action: DECREMENT, variant: secondary, aria-label: "Decrease" },
16 { type: typography, content: @entity.count, variant: h2 },
17 { type: button, label: "+", action: INCREMENT, variant: primary, aria-label: "Increase" },
18 { type: button, label: "Reset", action: RESET, variant: ghost }
19 ] })
20 INCREMENT -> ready
21 (emit MOVED { event: "INCREMENT" })
22 (set @entity.count (+ @entity.count 1))
23 DECREMENT -> ready
24 (emit MOVED { event: "DECREMENT" })
25 (set @entity.count (- @entity.count 1))
26 RESET -> ready
27 (emit MOVED { event: "RESET" })
28 (set @entity.count 0)
29 }
30
31 emits {
32 MOVED -> external {
33 event : string!
34 }
35 @description "Each move names the event it took, so the diagram beside the demo can follow it."
36 }
37 }
38
39 page "/counter" -> Counting
40}Kaj se zgodi, ko se sproži INCREMENT:
→
ready(set @entity.count (+ @entity.count 1))5. Prevedi
orb compile counter.lolo --output ./counter-appTo zapiše celotno aplikacijo, ki jo lahko namestiš kamorkoli. Program je vir; ustvarjene kode nikoli ne urejaš ročno.
Naprej
Spoznaj, kaj naredi vsak del: entitete, lastnosti in strani. Ali pa sledi vodniku za celoten orbital.