← Articoli

clogs: programmi Shoes su CRuby standard

Shoes è il piccolo toolkit GUI che _why the lucky stiff ha creato per Ruby. Invece di classi di widget e layout manager, si descrive una finestra in poche righe di Ruby: stack e flow per il layout, para per il testo, button con un blocco per ciò che accade al clic. Hackety Hack, un kit introduttivo alla programmazione con editor e strumenti utili, è stato costruito su questa base.

Hackety Hack ha smesso di funzionare quando ha smesso di funzionare Shoes. Shoes 4, una riscrittura su JRuby, non è mai arrivato abbastanza lontano da poterlo eseguire. Volevo rivederlo in funzione, così nel mio fork su github.com/Largo/hacketyhack ho preso un’altra strada e ho scritto un’implementazione di Shoes che gira sul Ruby che avete già installato. Questa implementazione è clogs: Shoes, indossato sopra libui.

Hello, Shoes

Questo è l’esempio del README:

require "clogs"

Shoes.app(title: "Hello", width: 400, height: 200) do
  para "Hello, ", strong("Shoes"), "!", size: :title
  button("Push me") { @note.replace "Aha! Clicked." }
  @note = para "Nothing pushed so far"
end

Salvatelo come hello.rb, poi:

gem install clogs
ruby hello.rb

La gem richiede Ruby 3.2 o successivo. Dipende da lacci, da libui (libui-ng più librerie condivise precompilate per Linux, macOS e Windows) e da chunky_png, perché libui non è in grado di caricare da sola un file immagine. Niente compilatore, niente motore browser, niente JVM.

Come si combinano i pezzi

clogs non reimplementa il DSL di Shoes. Quella parte proviene da Lacci, la metà di Scarpe indipendente dalla visualizzazione. Lacci gestisce il DSL, l’albero dei drawable e gli eventi. clogs è un display service di Lacci: si occupa di layout, disegno, widget e input, mentre libui-ng fornisce una finestra nativa e un canvas.

your Shoes program
        |
      Lacci          the Shoes DSL, drawable tree, events
        |
      Clogs          layout, painting, widgets, input
        |
      libui          one native window, one canvas

Poiché si aggancia a Lacci, potete anche selezionarlo esplicitamente. È comodo quando lo stesso programma deve girare anche con il backend webview di Scarpe:

SCARPE_DISPLAY_SERVICE=clogs ruby my_app.rb

Vale la pena conoscere una scelta di progettazione: clogs disegna l’intero documento Shoes in un unico canvas libui, widget compresi. libui non permette di posizionare un controllo nativo in un punto arbitrario, ed è proprio ciò di cui Shoes ha bisogno. Il compromesso è che pulsanti e campi di testo hanno l’aspetto dei widget Shoes anziché di quelli nativi, e non beneficiano dell’accessibilità della piattaforma né del supporto per i metodi di input. I controlli nativi di libui vengono comunque usati dove sono adatti: menu, finestre di messaggio, selettori di file e i dialoghi ask/confirm.

Cosa funziona

Secondo il README: layout, testo, link, drawable grafici, immagini, widget, eventi, animazioni e dialoghi. Video, audio, sfocatura e finestre multiple no. La matrice funzionalità per funzionalità in libui_shoes_coverage.md documenta cosa è stato testato e su quale piattaforma: libui-ng dalla gem libui 0.2.4 su Linux con Ruby 3.3.

La gem include examples/kitchen_sink.rb, una panoramica di ciò che clogs sa disegnare. Eccone un estratto abbreviato:

require "clogs"

Shoes.app(title: "Clogs kitchen sink", width: 640, height: 620) do
  stack(width: 620, height: 170) do
    background rgb(255, 255, 255)
    border rgb(200, 200, 210), strokewidth: 2

    fill rgb(220, 60, 60)
    stroke rgb(60, 0, 0)
    rect 20, 20, 120, 60

    fill rgb(60, 120, 220)
    oval 170, 20, 100, 60

    nostroke
    fill rgb(250, 200, 40)
    star 320, 20, 6, 34, 16
  end
end

Due variabili d’ambiente rendono le app Shoes automatizzabili. È così che clogs testa se stesso, e potete usarle per catturare uno screenshot di un’app in CI:

CLOGS_EXIT_AFTER_MS=800 CLOGS_SCREENSHOT=shot.png ruby hello.rb

Dalla 0.1.0 in poi

La gem su RubyGems è la versione 0.1.0 di agosto 2026. Da allora il lavoro è proseguito nella cartella clogs/ del repository:

E Hackety Hack?

L’IDE funziona di nuovo. Nel repository, ruby hacketyhack.rb apre Hackety Hack su clogs: l’animazione iniziale, le schede laterali e la scheda Home vengono visualizzate. Undici dei dodici esempi Shoes originali funzionano senza modifiche. Le correzioni di compatibilità con Shoes 3 di cui Hackety Hack ha bisogno si trovano nell’albero di Hackety Hack (lib/compat/shoes3.rb), non nella gem.

In alcuni punti è ancora grezzo. L’editor ora accetta testo ma non è finito, e le funzioni online puntano a un server che non esiste più.

Se avete un vecchio programma Shoes nel cassetto, provatelo e ditemi cosa non funziona. Il codice è sotto licenza MIT e si trova su github.com/Largo/hacketyhack. E se la versione per browser vi ha incuriositi, ho scritto anche di jsg, un piccolo aiuto per i progetti ruby.wasm.