Auch in Tk baut man das Interface mit Hilfe von fertigen UI-Controls. Es stehen folgende Steuerelemente zur Auswahl:

  • Widget: Die Basisklasse aller Steuerelemente.
  • Button: Eine Schaltfläche.
  • Canvas: Ein Steuerelement für Zeichnungen und Grafiken.
  • Checkbutton: Ein Steuerelement, das entweder aktiviert oder deaktiviert sein kann.
  • Entry: Ein einzeiliges Eingabefeld.
  • Label: Ein Steuerelement für Beschriftungen.
  • LabelFrame: Ein Steuerelement für beschriftete Rahmen.
  • Listbox: Eine Liste von Einträgen.
  • Menu: Ein Kontextmenü.
  • Menubutton: Eine Schaltfläche, die ein Kontextmenü anzeigt, wenn sie angeklickt wird.
  • OptionMenu: Eine Schaltfläche, die eine Auswahlliste anzeigt, wenn sie angeklickt wird.
  • Radiobutton: Ein Steuerelement, das entweder aktiviert oder deaktiviert sein kann. Innerhalb einer Gruppe darf nur genau ein Radiobutton aktiviert sein.
  • Scrollbar: Eine Leiste, die das Scrollen übergroßer Widgets ermöglicht.
  • Spinbox: Ein Steuerelement zum Einstellen eines Zahlenwertes
  • Text: Ein mehrzeiliges Eingabefeld.

Die meisten sind selbsterklärend. Die Klasse Widget (konkret: tkinter.Widget) ist die Basisklasse aller Steuerelemente. Jedes Steuerelement verfügt über winfo-Methoden, welche Ihnen Informationen über das Steuerelement, wie zum Beispiel die Position oder die Breite liefern. Folgende Methoden sind vorhanden:

  • w.winfo_children(): Gibt eine Liste der Unter-Widgets von w zurück.
  • w.winfo_class(): Gibt den Namen der Widget-Klasse von w als String zurück.
  • w.winfo_geometry(): Gibt die Position und die Dimension des Widgets w relativ zum übergeordneten Widget in Form eines Strings des Formats „BxH+X+Y“ zurück.
  • w.winfo_height() bzw. w.winfo_width(): Gibt die Höhe bzw. Breite des Widgets w in Pixel zurück.
  • w.winfo_pointerx() bzw. w.winfo_pointery() bzw. w.winfo_pointerxy(): Gibt die X-, Y-Koordinate des Mauszeigers bzw. ein Tupel aus beiden Koordinaten relativ zur oberen linken Ecke des Bildschirms zurück.
  • w.winfo_rootx() bzw. w.winfo_rooty(): Gibt die X- bzw. Y-Position des Widgets w relativ zur oberen linken Ecke des Bildschirms zurück. w.winfo_screenheight() bzw. w.winfo_screenwidth(): Gibt die Höhe bzw. Breite des Bildschirms in Pixel zurück.
  • w.winfo_x() bzw. w.winfo_y(): Gibt die X- bzw. Y-Koordinate des Widgets w relativ zum übergeordneten Widget zurück.

Ein Steuerelement können Sie entweder bei der Initialisierung konfigurieren, zum Beispiel mittels:

button1=Button(window, text="1", width=30)

oder sie passen zu einem späteren Zeitpunkt den Wert der betreffenden Eigenschaft an:

button4["width"]=30

Probieren Sie zum Beispiel das Hinzufügen eines Menüs aus:


# Menüleiste erstellen 
menuleiste = Menu(window)

# Menü Datei und Help erstellen
datei_menu = Menu(menuleiste, tearoff=0)
help_menu = Menu(menuleiste, tearoff=0)

# Beim Klick auf die Menüeinträge sollen weitere Einträge erscheinen.
datei_menu.add_command(label="Neu")
datei_menu.add_separator() # Fügt eine Trennlinie hinzu
datei_menu.add_command(label="Beenden", command=window.quit)
menuleiste.add_cascade(label="Datei", menu=datei_menu)
menuleiste.add_cascade(label="Help", menu=help_menu)

# Die Menüleiste mit den Menüeinrägen dem Fenster übergeben
window.config(menu=menuleiste)     

Das Ergebnis sehen Sie hier:

Abbildung 1: Ein Menü in Python

Sie sehen im Quellcode auch, dass das Untermenü „Beenden“ über die Eigenschaft command gebunden wurde, d.h. beim Klick auf diesen Menüpunkt wird das aktuelle Fenster geschlossen und damit die Anwendung beendet, da es sich um das Hauptfenster handelt.
Kommen wir jetzt noch dazu uns die Anordnung der Elemente in einem Fenster genauer anzusehen. Mit dem Aufruf der Methode pack() haben wir schon eine rudimentäre, d.h. automatische Anordnung der Elemente verwendet. Man hat folgende Optionen:

  • pack: Relative Positionierung der Elemente
  • grid: Anordnung der Elemente in einer Tabelle (Zeilen und Spalten)
  • place: Absolute Positionierung der Elemente.

Es ist klar, dass die ersten beiden Varianten wegen der relativen Positionierung (unterschiedliche Auflösungen und Bildschirmgrößen) besser geeignet sind. Sie sollten die Varianten der Anordnung nie im gleichen Fenster mischen. Beginnen wir mit dem Geometrie-Manager pack. Die Elemente werden relativ zueinander angeordnet. Die Steuerelemente sind in Tk hierarchisch angeordnet. Das bedeutet, dass jedes Steuerelement über ein übergeordnetes Element verfügt. Außerdem darf jedes Element beliebig viele Kind-Elemente enthalten. Dem Packer kann ein Layout vorgegeben werden, nachdem er die Elemente anzuordnen hat. Der Packer arbeitet stets in einem rechteckigen Teilbereich des Fensters. Der folgende Code ordnet zum Beispiel zwei Buttons nebeneinander an:

# Definition von GUI-Elementen
button=Button(window, text="OK", command=button_action)
button2=Button(window, text="Abbrechen")
# Hinzufügen der Elemente zum Fenster
button.pack(side=LEFT)
button2.pack(side=LEFT)

Kommen wir zu dem Geometrie-Manager grid. Dieser platziert die Komponenten in einer Tabelle. Die Position einer Komponente wird durch einen Zeilen- (row) und einen Spaltenwert (column) bestimmt. Mit der Methode grid übergibt man die Information, wo die betreffende Komponente platziert, werden soll:

  • row: Bestimmt in welcher Zeile man die Komponente setzen möchte.
  • column: Bestimmt in welcher Spalte man die Komponente setzen möchte.
  • padx: Diese Option kann man gebrauchen, wenn man in der Horizontalen noch zusätzlich Abstand an die jeweilige Komponente haben möchte.
  • pady: Analog wie padx, jedoch in vertikaler Richtung.

Ordnen wir als Beispiel vier Button in einer Tabelle an:

# Definition von GUI-Elementen
button1=Button(window, text="1")
button2=Button(window, text="2")
button3=Button(window, text="3")
button4=Button(window, text="4")
# Hinzufügen der Elemente zum Fenster
button1.grid(row=0, column=0, padx=20, pady =20)
button2.grid(row=0, column=1, padx=20, pady =20)
button3.grid(row=1, column=0, padx=20, pady =20)
button4.grid(row=1, column=1, padx=20, pady =20)

Die Anzahl der Zeilen und Spalten bestimmt der Geometrie-Manager automatisch. Das Ergebnis sehen Sie hier:

Abbildung 2: Anordnung von Steuerelementen in einem Grid (Tabelle)

Mittels grid ist ein einfacher Aufbau auch komplexerer Layouts möglich. Als letzte Option für das Layout sehen wir uns noch die Optionen einer absoluten Positionierung an. Über die Werte:

  • x, y: Horizontale und vertikale Koordinate (in Pixel), in welcher die Komponente gesetzt wird.
  • relx, rely: relative Positionierung: Horizontale und vertikale Platzierung bezüglich des Fensters, in welches die Komponente gepackt wird. Der Wert muss zwischen 0.0 und 1.0 liegen.
  • height: Höhe der Komponente bestimmen (in Pixel).
  • widht: Breite der Komponente bestimmen (in Pixel).

Einem Steuerelement können Sie diese Eigenschaften zuweisen und es damit absolut positionieren. Das sollte jedoch die Ausnahme sein.
Und wie reagiert man auf den Klick eines Menüpunktes? Das besprechen wir im nächsten Post.

Literatur und Links

[1] https://wiki.python.org/moin/TkInter
[2] Ernesti, J.; Kaiser, P.: Python 3. Das umfassende Handbuch. Rheinwerk Verlag, 5. Auflage, 2017.