Graphische Benutzeroberflächen mit Tcl/Tk

Essay von Wolfgang Spiessl für Mensch-Maschine-Interaktion WS04/05, Abgabedatum: 16.12.2004

Kurz zu Tcl/Tk

Tcl (gesprochen: "tickle") steht für "Tool Command Language" und wurde im Jahr 1989 von Dr. John K. Ousterhout an der University of Califonia in Berkley entwickelt. Tcl ist kostenlos, nach zuerst internem Gebrauch stellte es Ousterhout der Open-Source-Community zur Verfügung. Die offizielle Website ist unter http://www.tcl.tk erreichbar.

Tcl verfügt über eine sehr einfache Syntax, die Kommandos und Parameter werden einfach hintereinander geschrieben:
command param1 param2 ...paramn, z.B. set x 5 weist der Variable x den Wert 5 zu.
Explizite Typangaben sind in Tcl nicht nötig, Kontrollkonstrukte wie Schleifen und if-Abfragen sind wie in anderen Sprachen vorhanden, ebenso Arrays.
Eine große Stärke von Tcl liegt in seiner Einfachheit, was einerseits durch die Syntax und andererseits durch seine grundsätzliche Plattformunabhängigkeit gegeben ist. Zum Ausführen von Tcl Programmen wird der "tclsh"-Interpreter benötigt, der Aufruf erfolgt aus der Kommandozeile: tclsh programmname.tcl.
Eine andere Stärke von Tcl ist die einfache Möglichkeit, graphische Benutzeroberflächen zu erstellen. Dies erledigt Tk, das Grafik-Toolkit. Tk wurde mittlerweile auch an andere Sprachen ohne eigene GUI-Bibliotheken angebunden, wie etwa Perl oder Python, zu seinem Ruhm kam Tk allerdings in Verbindung mit Tcl.
Die dritte Stärke von Tcl ist die einfache Erweiterbarkeit, also die Möglichkeit, Extensions anzubinden.
Programme, die GUI Befehle enthalten, erfordern den "wish"-Interpreter, der im Grunde eine Erweiterung des tclsh-Interpreters ist und ebenso aus der Konsole aufgerufen wird:
"wish programm_mit_gui.tcl".
Aus obengenannten Gründen wird Tcl/Tk gerne zum schnellen Erstellen und Testen von Prototypen verwendet.

GUI-Programmierung mit Tk

Bemerkung:
Zum Ausführen der im Folgenden angegebenen Beispiele muss sowohl Tcl als auch Tk auf dem betreffenden Rechner installiert sein. Unter http://www.tcl.tk sind für alle gängigen Systeme Binaries und Installationsanleitungen verfügbar. Da Tcl/Tk plattformunabhängig funktioniert, kann im weiteren das Betriebssystem vernachlässigt werden.
Aufgrund der Vielzahl von Bedienelementen und Konfigurationsmöglichkeiten. kann hier nicht vollständig auf alle Möglichkeiten des Grafiktoolkits eingegangen werden. Vielmehr soll ein grundsätzliches Verständnis der Funktionsweise nahegebracht werden.

Zu Beginn bietet es sich an, einen Blick auf ein einfaches Beispiel zu werfen. Angenommen, die Zeilen:
label .label1 -text "Hello World!"
pack .label1

sind in der Datei hello.tcl gespeichert, dann wird nach dem Aufruf "wish hello.tcl" folgendes Fenster angezeigt: Hello World
Die 1.Zeile mit dem "label"-Befehl erstellt ein neues Label mit Namen "label1" und der Beschriftung "Hello World!", die 2. Zeile fügt das Label dem Ausgabefenster hinzu.

Es folgt nun als weiteres Beispiel ein kleines Programm, dass zwischen englischer und deutscher Sprache umschalten kann. Damit soll deutlich werden, wie man mit Buttons arbeitet und wie man ihnen Aktionen zuweist. Alles was dazu nötig ist, sind zwei Button-Widgets, die jeweils einem Textfeld einen String zuweisen können: Buttons

label .textlabel
button .english -text "english" -command {.textlabel config -text "One Flew Over the Cuckoo's Nest"}
button .deutsch -text "deutsch" -command {.textlabel config -text "Einer flog über's Kuckucksnest"}
pack .textlabel
pack .english
pack .deutsch
.english invoke

Der invoke-Befehl ist gleichbedeutend mit einem Klick auf den entsprechenden Button.

Allgemein kann die Erstellung eines Grafikelements so ausgedrückt werden:

Elementklasse .Elementname -Argumente [-Optionen]

Das wichtigste Argument für ein Grafikelement ist das "-command" Argument. Damit werden dem Grafikelement Aktionen zugewiesen, also das, was passieren soll, wenn der Button geklickt wird, wie im vorhergehenden Beispiel zu sehen war.

Basic Widgets

Folgende grundlegenden Grafikelemente, auch Basic Widgets genannt, sind in der aktuellen 8.4.9 Version von Tcl/Tk implementiert:

Optionen

Diese Grafikelemente können in beliebiger Weise an die Bedürfnisse und Vorgaben der Anwendung angepasst werden, das geschieht über eine Reihe von Optionen :

(Die genaue Verwendung der Optionen kann hier nicht in der nötigen Ausführlichkeit erfolgen und sollte daher in der Fachliteratur nachgelesen werden.)

Layout

Zur strukturierten Anordnung der Widgets in einem Fenster verfügt Tk über die Layoutmanager place, grid und pack, zu einem gewissen Teil kann auch das frame-Widget dazugezählt werden. Dieses fungiert als Container, das unterschiedliche Widgets aufnehmen kann und gruppiert sie damit. Der Zugriff darauf kann in einer baumartigen Struktur dargestellt werden:
.buttonFrame.buttonA spricht den Button "buttonA" an, der sich im Container "buttonFrame" befindet.

Mit place ist eine absolute und relative Positionierung von Widgets im Anzeigefenster möglich. Dazu müssen lediglich x, y, oder relx, rely mit den entsprechenden Werten als Optionen übergeben werden. Beispiel: place

button .button1 -text "Button 1" button .button2 -text "Button 2"
label .label1 -text "Label 1" -background #ffffff
label .label2 -text "Label 2" -background #000000 -foreground #ffffff
place .button1 -x 50 -y 50
place .label1 -relx 0.3 -rely 0.1
place .button2 -x 130 -y 90
place .label2 -relx 0.05 -y 150

Ein Vergrößern des Fensters zeigt, dass die Buttons immer an exakt der gleichen Stelle bleiben, die beiden Labels sich aber relativ zur Fensterbreite bzw.-höhe plazieren.

Der pack-Layoutmanager arbeitet mit Abständen zu den Widgets untereinander und zum Rand des Anzeigefensters. Es ist auch möglich, Widgets zu strecken, um nicht verwendeten Platz auszufüllen. Beispiel: pack

button .nord -text "TOP"
button .east -text "RIGHT"
button .south -text "BOTTOM"
button .west -text "LEFT"
pack .nord -side top
pack .east -side right -anchor n
pack .south -side bottom -anchor e
pack .west -side left

Mit dem grid-Layoutmanager können Elemente an einem virtuellem Gitternetz ausgerichtet werden. Mit den Optionen column und row wird festgelegt, in welcher Spalte oder Zeile ein Widget angezeigt wird, mit columnspan und rowspan kann der Bereich definiert werden, über den sich das Widget erstreckt. Eine Ausrichtung nach oben, unten, links und rechts ist mit der sticky Option möglich. Beispiel: grid

label .sunkenlabel -text "sunken" -relief sunken -padx 7 -pady 10
label .flatlabel -text "flat" -relief flat -padx 13 -pady 10
label .ridgelabel -text "ridge" -relief ridge -padx 13 -pady 10
label .groovelabel -text "groove" -relief groove -padx 10 -pady 10
label .raisedlabel -text "raised" -relief raised -padx 10 -pady 10
label .solidlabel -text "solid" -relief solid -padx 15 -pady 10
grid .sunkenlabel -column 1 -row 1
grid .flatlabel -column 2 -row 1
grid .ridgelabel -column 1 -row 2
grid .groovelabel -column 2 -row 2
grid .raisedlabel -column 1 -row 3
grid .solidlabel -column 2 -row 3

In diesem Beispiel sind die verschiedenen 3D-Darstellungsmöglichkeiten von Tcl/Tk zu sehen, die über die -relief Option festgelegt werden kann.

Bemerkung: Tk erlaubt es, verschiedene Layout-Manager in einem Fenster zu verwenden, allerdings nicht im selben Frame!

Zeichnen mit Tk

Die Rolle der Zeichenfläche oder Leinwand übernimmt bei Tk das canvas Widget. Es können Linien, Rechtecke, Ovale, Polygone und Text auf die Leinwand gezeichnet werden, mit unterschiedlichsten Fülleinstellungen. Außerdem können natürlich externe Grafiken angezeigt und manipuliert werden (jedoch nur im GIF-, PPM-, PGM- und X-Bitmap-Format). Alle Objekte auf dem canvas-Widget haben die Möglichkeit, Nutzereingaben wie Mausbewegungen, -klicks und Tastendrücke zu verarbeiten. Hier ein einfaches Beispiel zur Verwendung der Zeichenmöglichkeiten: Smiley

canvas .c -height 140 -width 140 -background white # Hintergrund
pack .c # canvas anzeigen
.c create oval 7 7 133 133 -outline black -fill #f9f000 -width 2 # Gesicht
.c create oval 39 49 53 63 -outline black -fill black # Linkes Auge
.c create oval 102 63 88 49 -outline black -fill black # Rechtes Auge
.c create polygon 61 75 63 70 60 65 65 65 68 60 70 65 76 65 72 70 74 75 68 72 -fill black -outline black -tag star # Stern als Nase
.c create arc 21 21 119 119 -start 225 -extent 95 -style arc -outline black -width 3 # Mund

Megawidgets

Die bisher betrachteten Basic Widgets sind jeweils nur einzelne grafische Elemente. Zum Schluss noch ein kurzer Blick auf die Megawidgets, darunter versteht man nun komplexere, zusammengesetzte Einheiten von grafischen Elementen. Tk bietet hier zum Beispiel den tk_chooseColor, einen Farbwahldialog.

Weitere Megawidgets sind:

Literaturempfehlung

(zurück nach oben)

Quellenangabe

Anhang

Beispiele:

Hello World!
Hello World (zurück nach oben)

Buttons
Buttons (zurück nach oben)

place-Layoutmanager
Der place-Layoutmanager (zurück nach oben)

pack-Layoutmanager
Der pack-Layoutmanager (zurück nach oben)

grid-Layoutmanager
Der grid-Layoutmanager (zurück nach oben)

Zeichnen mit dem canvas-Widget
Zeichnen mit dem canvas-Widget (zurück nach oben)

Farwahldialog
Farbwahldialog (zurück nach oben)

Öffnen-Dialog
"Öffnen"-Dialogfeld (zurück nach oben)

Speichern-Dialog
"Speichern unter"-Dialogfeld (zurück nach oben)

Message-Box
Message-Box (zurück nach oben)

Dialog-Box
Dialog-Box (zurück nach oben)