8th käyttää Nuklear pohjaista ratkaisua graafiseksi käyttöliittymäksi. Käyttöliittymän tekeminen hoituu kokonaan ohjelmallisesti. Minulla oli kotiautomaation käyttöliittymän toteuttavaa ohjelmaa varten tarve helposti muokattavaan deklaratiiviseen ratkaisuun mikä automaattisesti hoitaisi asettelun tarkasti ja responsiivisesti. Päädyin toteuttamaan "tileui" kirjaston mikä käyttää laajennettua JSON-syntaksia ohjelman ulkoasun ja toiminnallisuuden määrittämiseen. Minulla on työnalla graafinen työkalu mikä muodostaa automaattisesti JSON:in, tarjoaa live-näkymän asetteluun ja ohjelman toimintamalli on deklaratiisen ja ohjelmallisen sekoitus. Aikaisemmin ohjelman muuttujat piti tallentaa joko globaaleina tai ikkunan map-rakenteeseen. Omassa mallissani ne voidaan tallentaa loogisemmin JSON-rakenteen layout -ja tile-solmuihin.
Esimerkiksi:
"calculator.display" tileui:data@
Hakee "display" solmun "data" map:in
"calculator.display:num" tileui:data@
Hakee "display" solmun "data" map rakenteesta "num" avaimella tallennetun tiedon. Avaimia voi antaa useamman kerralla erottelemalla avaimet kaksoispisteellä. Tässä tapauksessa palautetaan taulukko.
Alla esimerkkikoodi laskimelle:
needs nk/gui
needs nk/tileui
32 constant FONTHEIGHT
FONTHEIGHT 1.75 n:* constant ROWHEIGHT
FONTHEIGHT font:system font:new "font1" font:atlas! drop
: +n \ nk n --
>r
"calculator.display:num" tileui:data@ 10 n:*
r> n:+ "calculator.display:num" swap tileui:data! ;
: mathop \ nk w -- nk
"calculator:op" swap tileui:data!
"calculator.display:num" tileui:data@ "calculator:a" swap tileui:data!
"calculator.display:num" 0 tileui:data! ;
{
name: "calculator",
grid: null,
layout: { rows: [ @ROWHEIGHT, -1], cols: 1, rgap: 4, cgap: 4, margin: 4 },
data: { },
cb: null ,
tiles: [
{
name: "display",
grid: { row: 0, rows: 1, col: 0, cols: 1 },
data: { num: 0 },
cb: ( nk:rect>local nk:grid-push
"num" m:@ >s 32 nk:EDIT_SELECTABLE nk:EDIT_CLIPBOARD n:bor
nk:PLUGIN_FILTER_FLOAT edit-string drop >n "num" m:_! drop )
},
{
name: "keypad",
grid: { row: 1, rows: 1, col: 0, cols: 1 },
layout: { rows: 4, cols: 4, rgap: 4, cgap: 4, margin: 4 },
data: { },
cb: ( 2 2 "black" nk:stroke-rect drop ),
tiles: [
{
name: "7",
grid: { row: 0, rows: 1, col: 0, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "7" ( 7 +n ) nk:button-label drop )
},
{
name: "8",
grid: { row: 0, rows: 1, col: 1, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "8" ( 8 +n ) nk:button-label drop )
},
{
name: "9",
grid: { row: 0, rows: 1, col: 2, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "9" ( 9 +n ) nk:button-label drop )
},
{
name: "+",
grid: { row: 0, rows: 1, col: 3, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "+" ( ' n:+ mathop ) nk:button-label drop )
},
{
name: "4",
grid: { row: 1, rows: 1, col: 0, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "4" ( 4 +n ) nk:button-label drop )
},
{
name: "5",
grid: { row: 1, rows: 1, col: 1, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "5" ( 5 +n ) nk:button-label drop )
},
{
name: "6",
grid: { row: 1, rows: 1, col: 2, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "6" ( 6 +n ) nk:button-label drop )
},
{
name: "-",
grid: { row: 1, rows: 1, col: 3, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "-" ( ' n:- mathop ) nk:button-label drop )
},
{
name: "1",
grid: { row: 2, rows: 1, col: 0, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "1" ( 1 +n ) nk:button-label drop )
},
{
name: "2",
grid: { row: 2, rows: 1, col: 1, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "2" ( 2 +n ) nk:button-label drop )
},
{
name: "3",
grid: { row: 2, rows: 1, col: 2, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "3" ( 3 +n ) nk:button-label drop )
},
{
name: "*",
grid: { row: 2, rows: 1, col: 3, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "*" ( ' n:* mathop ) nk:button-label drop )
},
{
name: "C",
grid: { row: 3, rows: 1, col: 0, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "C"
( "calculator:a" 0 tileui:data! "calculator.display:num" 0 tileui:data! )
nk:button-label drop
)
},
{
name: "0",
grid: { row: 3, rows: 1, col: 1, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "0" ( 0 +n ) nk:button-label drop )
},
{
name: "=",
grid: { row: 3, rows: 1, col: 2, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "=" ( "calculator:op" tileui:data@ >r
"calculator.display:num" tileui:data@ >r
"calculator:a" tileui:data@ r> r> w:exec
"calculator.display:num" swap tileui:data!
"calculator:a" 0 tileui:data! ) nk:button-label drop )
},
{
name: "/",
grid: { row: 3, rows: 1, col: 3, cols: 1 },
data: { },
cb: ( nk:rect>local nk:grid-push "/" ( ' n:/ mathop ) nk:button-label drop )
}
]
}
]
} constant UI
: init-window-size
mobile? if
hw:displaysize?
else
240 260
then ;
init-window-size constant HEIGHT constant WIDTH
: new-win
{
name: "main",
wide: @WIDTH,
high: @HEIGHT,
resizable: true,
title: "Calculator"
}
nk:win ;
: main-render
{
name: "main",
title: "main",
bg: "white",
padding: [0,0],
flags: [ @nk:WINDOW_NO_SCROLLBAR ]
}
nk:begin
UI tileui:render
nk:end ;
: app:main
UI tileui:init
new-win ' main-render -1 nk:render-loop ;Eikös sinua sitten kiinnosta XUL/UXP?
https://en.wikipedia.org/wiki/XUL
Minusta JSON on kyllä parempi formaatti, mutta HTML ja XML näyttävät liitolta.
mavavilj kirjoitti:
Eikös sinua sitten kiinnosta XUL/UXP?
Suoraan sanottuna ei. Tämä lähti alunperin omasta tarpeesta saada kotiautomaation hallintaohjelmaan mahdollisuus yksinkertaisesti sijoittaa widgetit tarkasti ja saada helposti aikaan responsiivinen sijoittelu. Tämä lähinnä siksi, että nykyään tarkka hiirityö rasittaa minua. Halusin myös, että käyttöliittymä toimisi puhelimella, tabletilla ja työpöydällä. Linux:illa halusin, että toimisi myös kokoruudun tilassa ilman X tai Wayland tukea.
Pitääkin sitten varmaan katsoa tätä sinun tuotosta. Pidin XUL:ia lupaavana, mutta siitä puuttuu mobiilialustojen tuki sinänsä, ja se on jotenkin sidottu selaimiin.
Nuklear oli minustakin kiinnostavin käyttöliittymäkirjasto, koska ei kiinnosta opetella wxWidgets:n kaltaisia järkäleitä (se kirja on 700 sivua). Mutta eipä tee natiiveja ikkunoita.
mavavilj kirjoitti:
(25.02.2024 08:02:46): Nuklear oli minustakin kiinnostavin käyttöliittymäkirjasto, koska ei kiinnosta opetella wxWidgets:n kaltaisia järkäleitä (se kirja on 700 sivua). Mutta eipä tee natiiveja ikkunoita.
Aikoinaan selasin kaksi viikkoa netistä näitä "järkäleitä" ja kolme viikkoa, kun lukaisin OpenGL:n red bookin läpi, jossa on 900 sivua. Tässä kolmessa viikossa kerkesin vielä koodailemaan läpi kirjan esimerkkejäkin.
mpni kirjoitti:
(07.03.2024 12:37:47): ”– –” Aikoinaan selasin kaksi viikkoa netistä näitä...
Ei kirjan lukeminen nopeasti tarkoita, että kirjasto on kätevä.
mavavilj kirjoitti:
Ei kirjan lukeminen nopeasti tarkoita, että kirjasto on kätevä.
Lukematta kirjaa (tai edes osia siitä) ei voi tietää onko kirja hyvä vai huono kirja.
Tai sitten arvosteluja kirjasta.
