1.2 Widgets

Elemente einer grafische Benutzeroberfläche (Tkinter GUI) sind das Hauptfenster mit darauf platzierten Widgets (Steuerelementen).

In allen nachfolgenden Programmen werden grafische Benutzeroberflächen, das Hauptfenster mit darauf platzierten Widgets, erzeugt.

Widgets sind:

  • Canvases (Leinwände)
  • Labels (Beschriftungen)
  • Buttons (Schaltflächen)
  • Entries (Eingabefelder)

Canvas-Widgets

Definition
Begriff »Canvas-Widget«

Ein Canvas-Widget ist eine Leinwand, auf die Texte gesetzt, geometrische Figuren gezeichnet sowie Grafiken und Bilder eingefügt werden können.

Programm »gelberText.py«

Das Programm »gelberText.py« erzeugt eine grafische Benutzeroberfläche mit dem Hauptfenster und dem darauf platzierten Canvas-Widget. Das Canvas-Widget ist eine blaue Leinwand mit einem gelben Text.

Quelltext des Programms »gelberText.py« 
import tkinter as tk

# grafische Benutzeroberfläche
root=tk.Tk()
root.title("Willkommen")
root.geometry("400x70")
root.resizable(False, False)

# Canvas-Widget
canvas = tk.Canvas(root, background="blue")
canvas.create_text((200,35), text="Viel Spaß mit Python!",\
                   fill="yellow")

canvas.pack(fill=tk.BOTH, expand=True)

root.mainloop()
Erklärungen zum Quelltext
3. und 9. Zeile In den Zeilen stehen Kommentare zum Verstehen des Quelltexts.
4. bis 7. Zeile Das Hauptfenster:
  • erhält den Titel »Willkommen«
  • wird 400 Pixel breit und 70 Pixel hoch
  • die Größe des Hauptfensters wird fixiert
10. Zeile Ein blaues Canvas-Widget (Leinwand) wird erzeugt.
11. und 12. Zeile Auf das Canvas-Widget wird der gelbe Text »Viel Spaß mit Python!« mit der Canvas-Methode »create_text« gesetzt.
  • Zu beachten ist, dass (200,35) im Programm der vertikale und horizontale Mittelpunkt des Textes auf dem Canvas-Widget ist.
11. Zeile Der Backslash \ erzeugt innerhalb der Canvas-Method »create_text« einen Zeilenumbruch.[1]
14. Zeile Das Canvas-Widget wird als Element auf dem Hauptfenster platziert.
  • Dabei entspricht die Größe des Canvas-Widgets aufgrund von »fill=tk.Both« und »expand=True« der Größe des Hauptfensters.

In der Abbildung 1 ist das Canvas-Widget mit dem darauf plazierten gelben Text zu sehen.

Bild 01
Abbildungen 1: Blaues Canvas-Widget mit gelbem Text

Viel Spaß mit Python!

Um den Text allerdings auf das Canvas-Widget zu platzieren, werden die Koordinaten (200,35) des Mittelpunkts des Texts benötigt.
Der Mittelpunkt des Texts ist in der Abbildung 2 als Schnittpunkt der roten Linien dargestellt.

Bild 09
Abbildung 2: Mittelpunkt des Texts

Das Koordinatensystem des Canvas-Widgets ist in der Abbildung 4 dargestellt.

Bild 10
Abbildung 4: Koordinatensystem des Canvas-Widget

Zu beachten ist, dass die y-Achse des Koordinatensystems des Canvas-Wedgets nach unten (Süden) ausgerichtet ist.[2]

Wichtig zu wissen ist:

  • Obwohl die y-Achse des Koordinatensystems des Canvas-Widgets nach unten ausgerichtet ist, steht der auf dem Canvas-Widget ausgegebene Text nicht auf dem »Kopf« – wie dies in der Abbildung 1 zu sehen ist..
Übung

Aufgabe A3

Implementiere ein Programm »bunteTexte.py« am Computer.

Bild 11
Abbildungen 5: Weißes Canvas-Widget mit bunten Tesxten

Das Programm soll das Folgende leisten:

  • ähnlich wie in der Abbildung 5 dargestellt, soll ein auf dem Hauptfenster platziertes weißes Canvas-Widget mit bunten Texten ausgegeben werden
  • die Textfarben könnten beispielsweise green, orange, blue, red und purple sein

Führe das Programm aus und teste, ob es fehlerfrei läuft und den gestellten Anforderungen entspricht.

  1. [1] In Python ist es Standard, dass höchstens 79 Zeichen in jeder Codezeile stehen.
  2. [2] Der Grund, weshalb die y-Achse des Koordinatensystems nach unten ausgerichtet ist, lag in der Vergangenheit an den Kathodenstrahl-Röhren-Bildschirmen der Computer. Die Pixel wurden auf den Bildschirmen vom Kathodenstrahl zeilenweise von links oben nach rechts unten dargestellt.