← Blog

clogs: Shoes-Programme auf gewöhnlichem CRuby

Shoes ist das kleine GUI-Toolkit, das _why the lucky stiff für Ruby geschaffen hat. Statt mit Widget-Klassen und Layout-Managern beschreiben Sie ein Fenster in wenigen Zeilen Ruby: Stacks und Flows für das Layout, para für Text, button mit einem Block für das, was beim Klick passiert. Hackety Hack, ein Programmier-Starterkit mit Editor und hilfreichen Werkzeugen, wurde darauf aufgebaut.

Hackety Hack funktionierte nicht mehr, als Shoes nicht mehr funktionierte. Shoes 4, eine Neuentwicklung auf JRuby, kam nie weit genug, um es auszuführen. Ich wollte Hackety Hack wieder laufen sehen und habe deshalb in meinem Fork auf github.com/Largo/hacketyhack einen anderen Weg gewählt: eine Shoes-Implementierung, die auf dem Ruby läuft, das Sie ohnehin schon installiert haben. Diese Implementierung ist clogs: Shoes, getragen über libui.

Hallo, Shoes

Das Beispiel aus dem 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

Speichern Sie es als hello.rb und führen Sie dann Folgendes aus:

gem install clogs
ruby hello.rb

Das Gem benötigt Ruby 3.2 oder neuer. Es hängt von lacci ab, von libui (libui-ng samt vorkompilierten Bibliotheken für Linux, macOS und Windows) und von chunky_png, weil libui selbst keine Bilddateien laden kann. Kein Compiler, keine Browser-Engine, keine JVM.

Wie die Teile zusammenpassen

clogs implementiert die Shoes-DSL nicht neu. Dieser Teil kommt von Lacci, der darstellungsunabhängigen Hälfte von Scarpe. Lacci verwaltet die DSL, den Baum der Drawables und die Events. clogs ist ein Display Service für Lacci: Es übernimmt Layout, Zeichnen, Widgets und Eingaben, und libui-ng liefert ein natives Fenster und eine Zeichenfläche.

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

Weil clogs sich in Lacci einklinkt, können Sie es auch ausdrücklich auswählen. Das ist praktisch, wenn dasselbe Programm auch unter dem Webview-Backend von Scarpe laufen soll:

SCARPE_DISPLAY_SERVICE=clogs ruby my_app.rb

Eine Designentscheidung sollten Sie kennen: clogs zeichnet das gesamte Shoes-Dokument in eine einzige libui-Zeichenfläche, Widgets eingeschlossen. libui kann ein natives Bedienelement nicht an einer beliebigen Position platzieren, und genau das braucht Shoes. Der Preis dafür: Buttons und Textfelder sehen aus wie Shoes-Widgets statt wie native, und sie erhalten weder die Barrierefreiheit der Plattform noch Unterstützung für Eingabemethoden. Wo native libui-Elemente passen, werden sie weiterhin verwendet: Menüs, Meldungsfenster, Dateiauswahl und die Dialoge ask/confirm.

Was funktioniert

Laut README: Layout, Text, Links, Zeichenelemente, Bilder, Widgets, Events, Animation und Dialoge. Video, Ton, Weichzeichnen und mehrere Fenster funktionieren nicht. Die Funktionsmatrix in libui_shoes_coverage.md hält fest, was getestet wurde und womit: libui-ng aus dem libui-Gem 0.2.4 unter Linux mit Ruby 3.3.

Das Gem enthält examples/kitchen_sink.rb, einen Rundgang durch alles, was clogs zeichnen kann. Hier ein gekürzter Ausschnitt:

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

Zwei Umgebungsvariablen machen Shoes-Apps skriptfähig. So testet sich clogs selbst, und so können Sie in der CI einen Screenshot einer App erstellen:

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

Seit 0.1.0

Das Gem auf RubyGems ist Version 0.1.0 vom August 2026. Seither ging die Arbeit im Ordner clogs/ des Repositorys weiter:

Und Hackety Hack?

Die IDE läuft wieder. Im Repository öffnet ruby hacketyhack.rb Hackety Hack auf clogs: Die Splash-Animation, die seitlichen Tabs und der Home-Tab werden dargestellt. Elf der zwölf ursprünglichen Shoes-Beispiele laufen unverändert. Die Kompatibilitätsanpassungen für Shoes 3, die Hackety Hack braucht, liegen im Hackety-Hack-Verzeichnis (lib/compat/shoes3.rb), nicht im Gem.

An manchen Stellen ist es noch holprig. Der Editor nimmt inzwischen Text an, ist aber nicht fertig, und die Online-Funktionen zeigen auf einen Server, den es nicht mehr gibt.

Wenn Sie noch ein altes Shoes-Programm haben, probieren Sie es aus und sagen Sie mir, was nicht funktioniert. Der Code steht unter der MIT-Lizenz auf github.com/Largo/hacketyhack. Und falls Sie der Browser-Build neugierig gemacht hat: Ich habe auch über jsg geschrieben, einen kleinen Helfer für ruby.wasm-Projekte.