Ruby + Shoes = einfache GUI Programmierung

In meinen vorherigen Artikeln über die Programmierung mit Ruby habe ich die Sprache kurz vorgestellt und einen kleinen Ausblick gegeben, wie man mit Ruby schnell und einfach sinnvolle Dinge anstellen kann (Daten aus dem Web holen, Worthäufigkeiten in einem Text finden usw.)

Doch oft benötigt man nicht nur einfache Programme, die in der Konsole laufen, sondern möchte man etwas benutzerfreundlicheres, mit GUI und alles drum und dran.

Auch in Sachen grafischen Benutzeroberflächen sieht es bei Ruby sehr gut aus. Und in diesem Tutorial zeige ich wie gut. Man hat die Auswahl zwischen folgenden GUI-Toolkits:

• GTK
• Qt
• wxWidgets
• Tk
• Shoes

Die ersten 4 sollten jedem Entwickler mehr oder weniger bekannt sein. Doch was ist "Shoes"?

"Nobody knows shoes" heißt es auf der Homepage des Toolkits. Jedoch bin ich (und viele Tausende Shoes-Anhänger) der Meinung, dass man Shoes zumindest ein Mal ausprobieren sollte.
Es gibt viele Gründe dafür, doch der wichtigste ist:Shoes ist komplett in Ruby geschrieben und lässt sich ideal in eigene Ruby-Programme integrieren.
Der Syntax ist dabei so einfach und selbstverständlich, dass man praktisch sofort loslegen kann, ohne vorerst (wie z.B. bei Qt) lange Handbücher und Tutorials zu studieren.

Legen wir los
Hier kann man Shoes herunterladen: shoes.heroku.com/downloads. Windows, Linux, MacOS… egal, denn Shoes ist plattformunabhängig! Das heißt "Write once, run everywhere".

Hier geht es zur Dokumentation: shoes.heroku.com/manual/Hello.html (mit viel Witz und Humor geschrieben und für solche eigentlich trockene Texte ziemlich ungewöhnlich). Die gibt es auch mitgeliefert. Es gibt natürlich viele Beispiele und Tutorials, was das Erlernen weiter vereinfacht.

Installation
Nach dem Herunterladen und der Installation von Shoes werden 3 Verknüpfungen erstellt:Shoes, Packager, Manual.
Shoes-Anwendungen können in einem beliebigen Editor erstellt werden und werden zu Testzwecken mit Shoes ausgeführt. Wenn das Programm fertig ist, kann es mit Shoes kompiliert werden und eine ausführbare Datei (EXE bei Windows) wird erstellt.



Kleines Beispiel
Als Beispiel für dieses Tutorial habe ich eine einfache binäre Uhr gewählt. Es zeigt, wie man mit Shoes zeichnen und Animationen erstellen kann. Ganz nach dem Prinzip "Learning by doing".


Binär
Noch mal zur Erinnerung. Binär heißt Zahlen haben Basis 2.  Also:

0 = 0
1 = 1
2 = 01
3 = 11
4 = 001 
usw.

Das Zeitformat bei dieser Uhr ist HH:MM:SS, und die zweistellige Dezimalzahlen werden als "zweistellige" Binärzahlen dargestellt: aus 53 wird 101 und 110.
Und die Länge der binären Zahlen wird angepasst: Stunden max. 24, also reichen für die erste Ziffer 2 Bits und für die zweite 4 Bits. Minuten und Sekunden max 59, dementsprechend 3 Bits für die erste und 4 Bits für die zweite Ziffer.

Somit sieht die Zeit 14:35:26 binär wie folgt aus:

10  0010  :  110  1010  :  010  0110

Und damit das platzsparend dargestellt werden kann, ordnen wir die Zahlen vertikal an:

1 0   1 1   0 0
0 0   1 0   1 1
  1     1   0 1
  0     0     1

Zum Code

# converts decimal to binary: dec2bin(5) => [1,0,1,0]
def dec2bin num, length
  bin = []
  length.times{|i| bin << num[i] }
  bin
end

# draws binary number
def drawbin bin
  width = 20
  flow :width => width, :margin => 20 do
    bin.each_with_index do |b, idx|
      fill rgb(255, 0, 0, 255*b)
      oval :top => idx*width, :left => 0, :radius => width*0.4
    end
  end
end

# draws time in format HH:MM:SS
def draw time
  drawbin dec2bin(time.hour/10, 2)
  drawbin dec2bin(time.hour%10, 4)
  flow :width => 10
  drawbin dec2bin(time.min/10, 3)
  drawbin dec2bin(time.min%10, 4)
  flow :width => 10
  drawbin dec2bin(time.sec/10, 3)
  drawbin dec2bin(time.sec%10, 4)
end

# main application
Shoes.app :width => 180, :height => 120, :title => "Binary Clock", :resizable => false do
  draw Time.now
  every 1 do
    clear do
      draw Time.now
    end
  end
end

Prinzip
Shoes.app definiert und startet die grafische Anwendung. Breite, Höhe, Titel des Fensters können gleich angegeben werden, sowie ob die Größe veränderbar sein soll oder nicht. Innerhalb dieses Blocks kann man dann mit Shoes-Funktionen GUI-Elemente platzieren oder direkt zeichnen (im Beispiel wird die Farbe mit "fill" als RGB Wert spezifiziert und "oval" zeichnet einen Kreis, die Parameter sind dabei selbsterklärend).
Ich habe die Umwandlung von dezimal zu binär als Extrafunktion definiert, so bleibt der Code übersichtlich. Dabei wird aus einer Dezimalzahl ein Array aus 0 und 1.
Es gibt bei Shoes einfache Möglichkeit Animationen zu erstellen. Der im "every"-Block platzierter Code wird 1 Mal pro Sekunde ausgeführt, "clear" löscht den Fensterinhalt und "draw"-Funktion zeichnet dann die Zeit.

Layout
Ein paar Worte zum Layout bei Shoes. Hierfür gibt es 2 Methoden: "flow" und "stack". Beim flow werden die im Block angelegte Elemente hintereinander platziert, und bei stack untereinander. Für mehr Informationen lest einfach in der Anleitung nach, es lohnt sich.
Testen

Das Programm speichert man ganz normal als eine Ruby-Datei (z.B. binclock.rb) und öffnet sie dann mit Shoes. Es startet sofort und wenn ein Fehler im Programm auftritt, wird die Stelle im Shoes-Fenster angezeigt.


Packen
Nachdem das Programm getestet wurde kann es natürlich als ausführbare Datei exportiert werden. Denn man möchte es vielleicht mit den Freunden teilen oder jemandem Zeigen, der kein Shoes auf dem Rechner installiert hat. Hierfür startet man über Startmenü Shoes-Packager und wählt eine passende Konfiguration: Shoes-eigenes *.shy Format, Windows, MacOS, Linux, alles ist Dabei. Man kann auch angeben, ob Shoes mitexportiert werden soll. Dann läuft z.B. die erstellte EXE-Datei auf jedem Windows-Rechner.



So, das war's schon. Ich hoffe ich konnte einen Eindruck vermitteln, wie einfach und schnell man mit Ruby und Shoes eigene kleine GUI-Anwendungen erstellen kann. Über eure Kommentare freue ich mich. Wenn ihr Fragen habt, werde ich versuchen sie zu beantworten. Viel Spaß und bis zum nächsten Mal ;)