Inhaltsverzeichnis

1. Ein Tkinter Entry Widget erzeugen

Um ein Tkinter Entry Widget zu erzeugen, definieren wir zunächst eine Variable, die wir beispielhaft entry1 nennen. Anschließend weisen wir dieser ttk.Entry zu und geben wieder root als Parent an. Damit das Ganze sichtbar ist, packen wir es mithilfe der pack-Methode in die GUI:

Um zudem direkt die verfügbaren Optionen für dieses Widget sehen zu können, greifen wir wieder auf unseren kleinen Trick mit der for-Schleife zurück. Wir schreiben also Folgendes:

An dieser Stelle führen wir das Programm einfach direkt mal aus:

Wie du sehen kannst, befindet sich jetzt in der GUI ein Eingabefeld, in welches wir klicken und einen beliebigen Text eingeben können.

Wenn wir jetzt einen Blick auf die Konsole werfen, sehen wir zudem alle verfügbaren Optionen für dieses Widget, da wir uns diese schließlich über die for-Schleife ausgeben lassen.

2. Die Option width

Unter anderem befindet sich in der Auflistung die Option width, welche standardmäßig aktuell auf den Wert 20 gesetzt ist. 

Damit können wir die Breite des Eingabefeldes festlegen. Der aktuelle Wert ist, wie bereits erwähnt, auf 20 gesetzt, was der Länge entspricht, die wir momentan in der GUI sehen. 

Um das Ganze zu verdeutlichen, erhöhen wir den Wert zu Beginn direkt auf das Doppelte, also auf 40. Dazu ändern wir die Option width auf den Wert 40:

Wenn wir das Programm erneut ausführen, wird das Eingabefeld doppelt so breit dargestellt:

Geben wir in das Eingabefeld viel Text ein und erreichen damit das Ende des Feldes, erkennen wir, dass wir auch dann noch weiter schreiben können.

Im Feld scrollt das Programm automatisch weiter, wodurch wir nicht auf eine gewisse Anzahl von Zeichen limitiert sind. Wenn wir uns nun noch die weiteren Optionen ansehen, dann tauchen unter anderem foreground und background auf:

Damit können wir jeweils die Schrift- und Hintergrundfarbe verändern.

3. Die Option foreground

Beginnen wir einfach mal mit der Schriftfarbe und ändern diese im Code auf den Wert rot:

Nachdem wir das Programm ausgeführt haben und etwas in das Feld eintippen, wird die Schrift tatsächlich in Rot dargestellt:

Das funktioniert also schon mal einwandfrei. Für die Hintergrundfarbe können wir jetzt noch die Option background setzen.

4. Die Option background

Dafür wählen wir beispielsweise die Farbe Schwarz, da rot und schwarz ganz gut zusammenpassen könnten. Wir setzen also background auf den Wert „black“:

Anschließend führen wir das Programm aus und bereits beim Schreiben in das Eingabefeld entdecken wir ein Problem: Die Hintergrundfarbe ist nach wie vor weiß und wurde damit nicht gesetzt:

Das hat den gleichen Grund wie im Beitrag zum Label Widget bereits beschrieben. Manche Optionen können mit bestimmten Themes und auch generell auf spezifischen Plattformen wie etwa Mac OS schlichtweg nicht gesetzt werden.

Deshalb löschen wir die Schlüsselwortargumente, die wir eben gesetzt haben, um die Farben zu ändern, einfach noch mal weg:

5. Die Option justify im Tkinter Entry Widget

Wenn wir erneut einen Blick auf die Konsolenausgabe werfen, können wir auch eine Option mit dem Namen justify sehen. Außerdem fällt auf, dass diese Option standardmäßig auf den Wert left, also links gesetzt ist.

Das bedeutet, beim Eingeben von Text in das Eingabefeld wird dieser automatisch linksbündig ausgerichtet. Führen wir das Ganze noch einmal aus und geben etwas Text ein, startet dieser von links:

Die Ausrichtung lässt sich aber auch über die Option justify ändern. Dazu bewegen wir uns in den Code, geben justify an und setzen die Option beispielsweise auf rechts:

Nachdem wir das Programm wieder ausgeführt und etwas Text eingegeben haben, ist dieser nun rechtsbündig:

Genauso könnten wir justify auch auf den Wert center setzen, um den Text mittig zu zentrieren:

Das ist also die Option justify. Bevor wir fortfahren, setzen wir justify allerdings wieder auf den Default-Wert linksbündig. Dafür löschen wir die Option, die wir gerade manuell gesetzt haben, einfach aus dem Code:

6. Die Nutzereingabe des Tkinter Entry Widgets verarbeiten

Bisher haben wir schon einige Modifizierungsmöglichkeiten gesehen. Die Frage ist nun aber, wie wir mit dem eingegebenen Text weiterarbeiten können, denn schließlich soll die Eingabe des Nutzers verwertet werden.

Das funktioniert ziemlich einfach, da wir auf den aktuellen Inhalt des Eingabefeldes zugreifen können, indem wir die get-Methode auf dem Entry-Objekt aufrufen. Das setzen wir jetzt mal an einem kleinen Beispiel um.

Wir erzeugen uns dafür einen zusätzlichen Button und packen diesen dann mithilfe der pack-Methode in die GUI, was wir im Code folgendermaßen umsetzen:

Jedes Mal, wenn wir diesen Button dann klicken, soll der Inhalt, der aktuell im Eingabefeld steht, auf der Konsole ausgegeben werden.

Eine Funktion für die Ausgabe des Inhalts erstellen

Wir definieren uns also eine Funktion und nennen diese beispielhaft print_entry_input. Wie bereits erwähnt, erhalten wir den Inhalt über die get-Methode. Das heißt, wir schreiben print und rufen auf entry1 die get-Methode auf:

Jetzt müssen wir die Funktion nur noch dem Button zuweisen, damit diese aufgerufen wird, sobald wir auf den Button klicken.

Eine Funktion an den Buttonklick koppeln

Das funktioniert über die Option command, indem wir Folgendes im Code schreiben:

An dieser Stelle führen wir das Programm einfach mal aus. Dadurch sehen wir in der GUI das Eingabefeld und darüber hinaus einen neuen Button mit der Aufschrift „Eingabe ausgeben!“. Wenn ich nun einen Text wie beispielsweise meinen Namen eingebe und auf den Button klicke, gibt das Programm diesen Text auf der Konsole aus:

Wir können den Text auch erweitern zu „Hendrik ist mein Name!“ und den Button erneut klicken. Auch dieser Inhalt wird auf der Konsole ausgegeben.

Ein Label anstelle der Konsolenausgabe erzeugen

Anstatt das Ganze auf der Konsole anzeigen zu lassen, könnten wir auch bei jedem Funktionsaufruf ein neues Label-Objekt erzeugen, welches wir dann direkt in die GUI packen. Dort weisen wir dann als Text den aktuellen Inhalt des Eingabefeldes zu.

Hierfür müssen wir lediglich den Inhalt der Funktion print_entry_input verändern und festlegen, dass ein ttk-Label erzeugt werden soll. Wir platzieren es beim Parent root und als Text weisen wir entry1.get() zu. Anschließend platzieren wir das Ganze mithilfe der pack-Methode in der GUI, damit wir es direkt sehen können:

Um den Code direkt auszuprobieren, geben wir einen Text wie beispielsweise meinen Namen „Hendrik“ ein, klicken auf den Button und sehen dann, dass der Text aus dem Eingabefeld in Form eines Labels in der GUI platziert wird:

Das Ganze funktioniert also einwandfrei.

Damit weißt du jetzt, wie du an den Text gelangen kannst, der sich aktuell im Eingabefeld befindet. Es gibt nun allerdings zwei weitere sehr nützliche Methoden, die ich dir ebenfalls noch vorstellen möchte.

7. Die insert-Methode

Dazu gehört zum einen die Methode insert. Mithilfe dieser können wir über unseren Code etwas in das Eingabefeld schreiben. Wenn wir also unter dem Aufruf der pack-Methode auf dem Tkinter Entry Objekt die insert-Methode aufrufen, indem wir beispielsweise entry1.insert angeben, haben wir die Möglichkeit, zwei Argumente zu übergeben.

Zuerst schreiben wir 0, wobei es sich um den Index handelt, den ich gleich noch genauer erklären werde. Als zweites Argument übergeben wir den String, der in das Eingabefeld geschrieben werden soll. Dafür wählen wir beispielsweise den Satz „Hier kannst du schreiben!“:

Wenn wir das Programm jetzt ausführen, sehen wir bereits direkt zu Beginn im Eingabefeld auf der GUI den String „Hier kannst du schreiben!“.

Der Text, der nun im Eingabefeld steht, kann vom Nutzer aber weiterhin beliebig verändert werden. 

Das heißt, wir könnten in das Feld klicken und sowohl etwas vom Text entfernen als auch etwas dazuschreiben. Die Funktionalität ist nach wie vor gegeben.

Was hat es aber nun mit dem Index auf sich, den wir innerhalb der insert-Methode zu Beginn als erstes Argument übergeben haben?

Mit diesem legen wir fest, an welcher Stelle wir beim bestehenden Text im Eingabefeld den String einfügen möchten, der als zweites Argument folgt.

Angenommen, wir rufen eine Zeile unterhalb des Methodenaufrufs noch einmal die insert-Methode auf, geben diesmal den Index 2 an und an der Stelle mit dem Index 2 möchten wir den String „TEST“ in Großbuchstaben einfügen.

Jetzt führen wir das Programm noch aus und überprüfen, was passiert:

Was geschieht, ist nun folgendes: Zunächst wird mit dem ersten Aufruf der insert-Methode der Text „Hier kannst du schreiben!“ in das Eingabefeld geschrieben.

Daraufhin rufen wir erneut die insert-Methode auf und geben an, dass wir bei Index 2 noch den String „TEST“ einfügen möchten. Folglich wird dieser bei Index 2, also nach dem zweiten Zeichen des Strings, der bereits im Eingabefeld steht, eingefügt. In diesem Fall mitten im Wort „hier“.

Das macht an dieser Stelle zwar keinen Sinn, aber schließlich sollte dir das Beispiel nur demonstrieren, welchen Zweck der Index innerhalb der insert-Methode erfüllt.

8. Die delete-Methode

Neben der get- und der insert-Methode existiert noch die Methode delete, welche sich in manchen Fällen als nützlich erweist. Damit wir uns diese genauer ansehen können, löschen wir zunächst einmal den gesamten Code bis auf das Tkinter entry-Widget und den Button. Wir löschen im Programm also die folgenden rot markierten Zeilen:

Auch die Funktion löschen wir erst mal:

Jetzt programmieren wir eine neue Funktion, die wir delete_input() nennen.

Innerhalb dieser Funktion führen wir auf dem entry-Objekt die delete-Methode aus und schreiben dazu entry1.delete:

Diese delete-Methode erwartet jetzt zwei Argumente.

Mit dem ersten Argument geben wir den Index an, ab dem der Text innerhalb des Eingabefeldes gelöscht werden soll. Hierfür wählen wir beispielhaft den Index 0. Mit dem zweiten Index geben wir den Endindex an, bis zu welchem gelöscht werden soll. 

Da wir möchten, dass der gesamte Inhalt des Eingabefeldes gelöscht wird, wählen wir als Start-Index wie gerade erwähnt 0 und als Endindex tk.END:

Mit tk.END teilen wir dem Programm mit, dass wir den letztmöglichen Index angeben möchten. Als command für den Button weisen wir nun diese neue Funktion zu. Die Funktion print_entry_input gibt es nicht mehr, weshalb wir diese aus den Klammern löschen und durch die neue Funktion ersetzen:

Da sich die Funktionalität des Buttons jetzt geändert hat, sollten wir auch dessen Text verändern, um Verwirrungen auszuschließen. Wir löschen also „Eingabe ausgeben!“ und schreiben stattdessen „Input löschen!“.

Nachdem wir das Programm anschließend ausgeführt haben, tippen wir testweise ein paar Buchstaben in das Eingabefeld:

Wenn wir daraufhin auf den Button klicken, sehen wir, dass alles gelöscht wird:

Geben wir danach wieder etwas ein und klicken auf den Button, löscht das Programm erneut den gesamten Inhalt des Eingabefeldes.

Wenn wir in den Klammern der delete-Methode nicht tk.END angegeben hätten, sondern beispielsweise einen spezifischen Endindex wie etwa 5, würde die Methode nur die ersten fünf Zeichen des Textes löschen, der sich im Eingabefeld befindet.

Probieren wir auch das einmal aus und öffnen das Programm. In das Eingabefeld geben wir nun beispielhaft „Hallo, das ist ein Test“ ein, klicken anschließend auf „Input löschen!“ und sehen dann, dass die ersten fünf Zeichen und damit das Wort „Hallo“ gelöscht wurden:

Danach folgen ein noch vorhandenes Leerzeichen und der restliche Text. Klicken wir jetzt erneut auf „Input löschen!“, werden wieder die ersten fünf Zeichen vom bestehenden String gelöscht. So ließe sich das dann fortführen, bis zu dem Punkt, an dem nichts mehr im Eingabefeld stehen würde.

Damit bist du nun mit dem nötigen Wissen ausgestattet, um auch das Tkinter Entry Widget innerhalb deiner Programme sinnvoll nutzen zu können. 

9. Abschließende Worte

Mit den Fähigkeiten, die du in dieser Tutorial-Reihe erworben hast, kannst du nun deine ersten einfachen Anwendungen mit grafischen Benutzeroberflächen in Python erstellen.

Ein Beispiel wäre ein Bitcoin-Preisrechner: Eine Anwendung, die die Anzahl der Bitcoins, die der Nutzer eingibt, aufnimmt und berechnet, wie viel diese zum aktuellen Kurs wert sind.

Das ist beispielsweise eines von mehreren Projekten, die wir gemeinsam im Tkinter-Masterkurs umsetzen werden.

Im Tkinter Masterkurs wirst du darüber hinaus noch wesentlich mehr lernen. Wir werden uns darin nämlich alle wichtigen Widgets ansehen, die in Tkinter existieren. In dieser Tutorial-Reihe hast du drei davon kennengelernt, allerdings gibt es noch einige mehr, die benötigt werden, um komplexere Anwendungen mit Tkinter zu erstellen.

Zu diesen Widgets zählen unter anderem die folgenden:

• Frame-Widget
• LabelFrame-Widget
• Checkbutton-Widget
• Radiobutton-Widget
• Separator-Widget
• Scrollbar-Widget
• Progressbar-Widget
• Combobox-Widget
• Spinbox-Widget
• Scale-Widget

Diese werden wir uns alle detailliert im Python-Tkinter-Masterkurs ansehen.

Neben den zahlreichen Widgets werde ich dir aber auch weitere Layout-Manager vorstellen, du wirst das Eventhandling lernen, wie du deine eigene GUI stylen kannst, wie du objektorientierte GUI-Anwendungen baust und vieles mehr.

All dieses Wissen werden wir dann in weiteren Praxisprojekten vertiefen, wie beispielsweise einer To-do-Listen-App, einem Nachrichtenverschlüsselungsprogramm und vielem mehr.

Inhaltsverzeichnis

1. Ein Tkinter Button Widget erstellen

Um direkt loszulegen, erzeugen wir uns jetzt schon mal ein Tkinter Button Widget innerhalb unserer Entwicklungsumgebung. Dafür definieren wir zunächst eine Variable, die wir beispielhaft button1 nennen und weisen dann Folgendes zu:

Auch hier schreiben wir wieder an erster Stelle zwischen die Klammern „root“ und übergeben als Text beispielsweise „Klick mich!“.

Wie du siehst, ist der Name der Klasse, von welcher wir das Objekt erzeugen, „Button“. Auch hier geben wir als erstes Argument wieder den Parent root an, bei welchem es sich um unser Hauptfenster handelt. Ein Button kann zudem genau wie ein Label einen Text besitzen, weshalb wir die text-Option direkt mithilfe des Strings „Klick mich!“ setzen.

Mit der pack-Methode können wir diesen Button nun wieder wie gewohnt in der GUI platzieren:

Wenn wir das Programm jetzt ausführen, sehen wir tatsächlich einen Button innerhalb unseres GUI-Fensters, der sich sogar klicken lässt:

Natürlich passiert noch nichts, solange wir das noch nicht explizit implementiert haben. Die Klick-Funktion kann sich allerdings schon mal sehen lassen.

2. Die Position des Buttons festlegen

Auch bei diesem Button können wir der pack-Methode, wie bereits in Artikel 5 dieser Tutorial-Reihe gezeigt, gewisse Schlüsselwortargumente übergeben. Wir könnten also beispielsweise wieder festlegen, dass der Button nicht standardmäßig mit side=“top“ platziert werden soll, sondern links oder rechts. Für unser Beispiel wählen wir links:

Nachdem wir das Programm so ausgeführt haben, befindet sich der Button nun links:

3. Die Schlüsselwortargumente fill und expand einsetzen

Genauso funktionieren an dieser Stelle und bei allen anderen Widgets, die noch folgen, die Schlüsselwortargumente fill und expand, welche du ebenfalls im fünften Teil dieser Tutorial-Reihe kennengelernt hast.

Wir können jetzt also zum Beispiel anstelle von side=“left“, fill=“x“ angeben:

Wenn wir das Programm so ausführen, sehen wir, dass sich der Button nun über den gesamten x-Bereich, also die x-Achse erstreckt:

Mit expand=“true“ könnten wir diesen dann wieder anweisen, auch den kompletten möglichen Platz in die vertikale Richtung zu allokieren, also nach unten. Das werde ich an dieser Stelle allerdings nicht noch einmal demonstrieren, da wir dieses Thema schließlich bereits im fünften Beitrag dieser Tutorial-Reihe ausführlich besprochen haben.

4. Mögliche Optionen vom Tkinter Button Widget anzeigen lassen

Vielmehr möchte ich dir jetzt zeigen, welche Optionen man bei einem Tkinter Button Widget setzen kann.

Dazu können wir uns wieder mit unserem kleinen Trick behelfen, indem wir folgenden Code schreiben:

Wenn wir das Programm nun ausführen, sehen wir auf der Konsole alle möglichen Optionen. Zwei Optionen, die wieder sofort ins Auge stechen, sobald wir etwas weiterscrollen, sind image und compound.

Diese kennen wir bereits vom Label-Widget. Das heißt, wir können in den Button neben dem Buttontext auch ein Bild integrieren und mit compound wieder festlegen, wie das Bild platziert werden soll. 

Wie das Ganze mit den Optionen image und compound funktioniert, möchte ich an dieser Stelle auch kein weiteres Mal wiederholen, da wir uns das bereits ausführlich im 7. Beitrag dieser Tutorial-Reihe angesehen haben, in welchem es im Detail um das Label Widget ging.

Wenn dich das also interessieren sollte, spring gerne noch mal zurück zum 7. Beitrag dieser Reihe, um das Thema anzusehen.

5. Die Option padding setzen

Zudem sehen wir beispielsweise, dass wir auch die Option padding setzen können. Das probieren wir direkt einmal aus. Hierzu bewegen wir uns in den Code und legen für padding beispielhaft den Wert 10 fest:

Wenn wir das Programm jetzt ausführen, sehen wir, dass der Button tatsächlich ein Padding besitzt. Es gibt nun also einen Abstand von 10 Pixeln nach oben, was sich auf der Abbildung sehr gut erkennen lässt:

Das funktioniert also einwandfrei. An dieser Stelle haben wir den Button schon mal etwas modifiziert, da er nun sowohl einen Text als auch ein Padding besitzt.

6. Die command-Option

Sinnvoll wäre jetzt noch, wenn beim Klicken auf den Button etwas passieren würde. 

Denn aktuell können wir so oft wir möchten auf den Button klicken, ohne dass etwas geschieht. Das ist auch gut so, da wir schließlich noch nicht programmiert haben, was das Programm umsetzen soll. Genau das ändern wir jetzt. 

Wenn wir hierzu noch einmal einen Blick auf die Konsole werfen und uns ansehen, welche Optionen uns darüber hinaus angeboten werden, sehen wir direkt zu Beginn die Option command.

Der Begriff „command“ bedeutet ins Deutsche übersetzt „Befehl“. Das heißt, wir können innerhalb unseres Python-Programms eine Funktion programmieren und den Namen der Funktion der Option command zuweisen.

Damit ist die Funktion dann an den Button gekoppelt und das bedeutet, dass die entsprechende Funktion ausgeführt wird, sobald wir den Button klicken.

7. Mit command „auf Knopfdruck“ eine Funktion ausführen

Setzen wir das Ganze also direkt einmal in der Praxis um. Im ersten Schritt programmieren wir oben im Code eine beliebige Funktion, die wir beispielhaft say_hello nennen. Darin geben wir an, dass lediglich eine print-Funktion aufgerufen werden soll, in welcher wir „Hallo, danke dass du mich geklickt hast!“ übergeben:

Dieser Satz soll auf der Konsole ausgegeben werden, wenn wir auf den Button klicken. Jetzt übergeben wir bei der Erzeugung des Button-Objekts noch das command-Schlüsselwortargument:

Hier ist jetzt wichtig, dass wir nur den Bezeichner der Funktion angeben, also say_hello:

Die runden Klammern, die wir am Ende des Funktionsnamens normalerweise anfügen würden, um die Funktion aufzurufen, lassen wir an dieser Stelle ganz bewusst weg.

Wenn wir das Programm jetzt ausführen und direkt den Button klicken, sehen wir, dass auf der Konsole tatsächlich der Text ausgegeben wird:

Klicken wir öfter darauf, gibt das Programm den Text entsprechend mehrmals aus. Das heißt, wir haben damit mithilfe der Option command die Funktion say_hello erfolgreich an diesen Button gebunden. 

8. Diesen Fehler muss man vermeiden

Ein sehr häufiger Fehler, den Anfänger an dieser Stelle oftmals begehen, ist, dass sie dem Funktionsnamen noch aus Gewohnheit die runden Klammern anhängen.

Sie schreiben also beim Zuweisen an die command-Option hinter say_hello noch ein rundes Klammerpaar, wie es im folgenden Codeabschnitt zu erkennen ist:

Wenn wir das Programm jetzt ausführen und auf den Button klicken, dann sehen wir, dass vermeintlich erst mal gar nichts in der Konsole passiert.

9. Was ein rundes Klammerpaar hinter der Funktion auslöst

Scrollen wir nun allerdings in der Konsole weiter nach oben, stellen wir fest, dass die Funktion sehr wohl aufgerufen wurde:

Und zwar nicht, als wir den Button geklickt haben, sondern als das Programm Zeile für Zeile durchlaufen wurde. An der Stelle, an der wir die Funktion say_hello aufrufen, indem wir sie an die command-Option zuweisen, wird die Funktion auch tatsächlich aufgerufen.

Folglich gibt das Programm den String auf der Konsole aus und arbeitet dann den Rest des Codes ab. Das heißt, anschließend führt es noch die for-Schleife aus, weshalb uns zudem noch die Optionen in der Konsole ausgegeben werden.

Wichtig zu verstehen ist, dass bei einem Klick auf den Button nichts passiert.

Das liegt daran, dass wir die Funktion nicht an den Buttonklick gekoppelt haben. Da wir sie direkt aufrufen, wird der Rückgabewert der Funktion an den Button gekoppelt.

Allerdings haben wir innerhalb der Funktionsdefinition oben keine return-Anweisung, mit der wir etwas zurückgeben: 

Aus diesem Grund wird automatisch der Wert none zurückgegeben, bei welchem nichts geschieht. Das bedeutet, wir haben an den Buttonklick gekoppelt, dass das Programm none ausführt. Da dadurch nichts passiert, macht das natürlich keinen Sinn.

Merke dir also: Wenn du der command-Option eine Funktion zuweist, dann weise dieser immer nur den Bezeichner der Funktion zu, ohne die runden Klammern dahinter aufzurufen:

Wenn wir das Programm an dieser Stelle noch einmal ohne die runden Klammern nach dem Funktionsnamen ausführen, sehen wir, dass es jetzt so funktioniert wie wir uns das vorstellen. Klicken wir dreimal auf den Button, dann erhalten wir auch dreimal den Text in der Konsole:

10. Mit einem Tkinter Button Widget die Anwendung beenden

Man hat sogar die Möglichkeit, einen Button zu erstellen, der das Fenster schließt und die Anwendung damit beendet. Das werde ich dir auch direkt einmal zeigen. Wir bauen dafür einen weiteren Button in unsere Anwendung, den wir beispielhaft quit_button nennen:

Diesem weisen wir wieder ttk.Button zu, wählen als Parent wie gewohnt root, womit unser Hauptfenster gemeint ist und übergeben als Text „Programm beenden“. Schließlich ist das die Aktion, die der Button gleich vollziehen soll. 

11. Die destroy-Funktion

Jetzt müssen wir noch einen entsprechenden Command übergeben, wofür wir keine eigene Funktion programmieren, da es bereits eine gibt. Auf diese können wir zurückgreifen, um das Programm zu beenden. Wir schreiben dafür root.destroy und verzichten wieder auf die runden Klammern dahinter:

Damit der Button sichtbar ist, müssen wir diesen natürlich mit pack in die GUI packen: 

Wenn wir das Programm jetzt noch einmal ausführen, sehen wir ab sofort zwei Buttons. Klicken wir auf den Button mit der Aufschrift „Klick mich!“, wird weiterhin die Funktion say_hello mit jedem Klick ausgeführt, was sich auf der Konsole erkennen lässt. Wenn wir auf „Programm beenden“ klicken, wird das Programm direkt beendet.

Wie du damit gesehen hast, können wir mit einem Button schon mal spannende Dinge anstellen. Wenn wir jetzt noch mal einen Blick auf die Konsole werfen, erkennen wir als weitere mögliche Option state, welche aktuell als normal angezeigt wird:

Schauen wir uns nun auch diese Option im Detail an.

12. Die Option state

Wir haben die Möglichkeit, einen Button auf den state „normal“ oder auf „disabled“, also „ausgeschaltet“, zu setzen.

Im normalen Zustand lässt sich der Button klicken, bei disabled hingegen nicht.

13. Der state DISABLED

Wir setzen den Button jetzt also mal von Beginn an auf den state disabled, indem wir oben im Code als weiteres Schlüsselwortargument Folgendes übergeben:

Wenn wir das Programm jetzt ausführen, fällt auf, dass der Button zwar innerhalb der GUI angezeigt, aber etwas ausgegraut dargestellt wird:

Beim Klicken auf den Button passiert nichts. Das liegt daran, dass wir ihn mithilfe der state-Option sozusagen deaktiviert haben. Der Default-Wert für state ist aber wie gesagt „normal“, was bedeutet: Wenn wir die state-Option nicht explizit selbst setzen, ist der Button immer auf dem state „normal“, wie beispielsweise der Button „Programm beenden“. Das heißt, dass wir ihn ganz normal verwenden können. 

Wenn wir also beispielhaft darauf klicken, schließt sich das Programm tatsächlich.

14. Der state NORMAL

Darüber hinaus könnten wir den Button über die state-Option explizit auf den Zustand „normal“ setzen, indem wir im Code tk.NORMAL schreiben:

Wenn wir diese Zeile weglassen würden, könnten wir wie bereits erwähnt, mit dem gleichen Ergebnis rechnen.

Beim Ausführen des Programms sehen wir, dass wir den Button tatsächlich wieder klicken können.

Sobald man zum ersten Mal von der state-Option gehört hat, empfindet man diese möglicherweise zunächst einmal als nutzlos, allerdings kann man damit tatsächlich sinnvolle Dinge umsetzen.

15. Wie man die state-Option in der Praxis einsetzen kann

Stell dir beispielsweise einmal vor, du schreibst eine grafische Benutzeroberfläche, über welche später eine reale Fertigungsmaschine gesteuert wird, die ein Bauteil innerhalb einer Fabrik produziert.

Wenn man die Maschine starten möchte, fährt die grafische Benutzeroberfläche hoch und über einen Startbutton lässt sich der Produktionsprozess einleiten. 

Nun muss die Maschine allerdings erst mal vorheizen, bevor sie ein Bauteil korrekt produzieren kann. Denn wenn sie beispielsweise zu kalt ist und somit die Betriebstemperatur nicht erreicht hat, produziert sie zwar dennoch die Bauteile, allerdings in einem schlechten Zustand, sodass diese letzten Endes entsorgt werden müssen.

Das möchte man natürlich vermeiden und an dieser Stelle kommt auch schon die state-Option ins Spiel. Damit kann man nämlich programmieren, dass der Button, der den Produktionsprozess startet, erst dann geklickt werden kann, wenn die Betriebstemperatur erreicht ist. Bevor die Betriebstemperatur erreicht ist, soll der Button nicht klickbar sein. Demnach lässt sich die state-Option also tatsächlich sinnvoll in einem Programm einsetzen.

Jetzt, da du die state-Option kennengelernt hast, kannst du diese auf kreative Weise in deinem eigenen Programm implementieren. 

Damit weißt du auch schon über die wichtigsten Features des Tkinter Button Widgets Bescheid und kannst im folgenden Beitrag direkt am nächsten Widget anknüpfen.

Inhaltsverzeichnis

1. Die Option text

Bisher haben wir nur die Option text verwendet, welcher wir einen String zuweisen konnten, der dann als Text des Labels angezeigt wurde.

Auf der obenstehenden Abbildung sehen wir ein kleines Beispiel, das diese Option veranschaulicht.

Wir sehen darauf, dass wir die text-Option gesetzt und dieser den String „Das ist ein String“ zugewiesen haben. Wenn wir das Ganze ausführen, wird der String nun als Label angezeigt.

Möchten wir den String nachträglich ändern, könnten wir das zum einen über die configure-Methode beispielsweise folgendermaßen tun:

Nachdem wir das Programm so ausgeführt haben, zeigt es den neuen Text an:

Alternativ können wir den String auch über die Schlüsselschreibweise ändern, die wir ebenfalls im letzten Blogartikel kennengelernt haben. Dabei gibt man den Schlüssel „text“ zwischen den eckigen Klammern an und weist den neuen Text zu:

Wenn wir das Programm anschließend noch einmal ausführen, sehen wir, dass es genauso funktioniert. Egal, wie wir es auch machen: wir müssen jedes Mal mit einer manuellen Zeile Code für die Änderung des Wertes sorgen.

2. Kann man Variablen an Labels binden?

Deutlich praktischer wäre es, wenn auch die Möglichkeit bestünde, den Inhalt des Labels an eine Variable zu binden. So würde immer der Inhalt im Label angezeigt werden, der sich aktuell in der Variable befindet, die wir an das Label gebunden haben.

An dieser Stelle definieren wir nun mal eine normale Variable und prüfen anschließend, ob das Vorhaben tatsächlich mit diesen Variablen funktioniert.

Wir nennen diese beispielhaft text_variable und speichern darin den Text „Text der Variable“:

Die Zeile unten können wir wieder löschen:

Jetzt weisen wir dem Schlüsselwortargument text, dem wir aktuell den hartkodierten String „Das ist ein String“ zuweisen, den Inhalt der entsprechenden Textvariable zu, nämlich „text_variable“:

Da der String darin gespeichert ist, sollten wir diesen jetzt gleich sehen. Nach dem Ausführen des Programms, wird der String, den wir in der Variable text_variable gespeichert haben, tatsächlich über das Label angezeigt:

3. Den Inhalt der Variable nachträglich ändern

Was passiert jetzt aber, wenn wir später im Programm den Inhalt der Variable auf den String „Neuer Text“ ändern?

Wenn wir den Code jetzt ausführen, sehen wir immer noch den ursprünglichen Wert „Text der Variable“ auf der GUI, der über das Label angezeigt wird, anstatt des neuen Strings:

Die Änderung aktualisiert sich damit nicht im Label, weil der Inhalt der Variable nur einmal an die Textoption des Labels zu dem Zeitpunkt gebunden wird, wenn wir das Labelobjekt erzeugen.

Also genau dann, wenn wir das Labelobjekt erzeugen, wird der Inhalt der Variable an die Textoption zugewiesen. Das bedeutet, dass alle Änderungen, die wir danach an der Variable vornehmen, das Label nicht mehr interessieren. Wir haben den Wert der Text-Variable also nur ein einziges Mal ausgelesen und nicht wirklich an das Label gebunden.

4. Die Variable an das Label binden mit der Option textvariable

Um eine Variable nun an ein Label zu binden, existiert anstatt der text-Option die Option textvariable. Das heißt, wir ändern die Option text in unserem Code zu textvariable:

Wenn wir das Programm jetzt ausführen, sehen wir erst einmal gar nichts, weil das Label leer ist. Das ist ziemlich komisch, da wir schließlich vorhin den String „Text der Variable“ der Variable zugewiesen haben.

Das Problem ist jetzt das Folgende: Die Option textvariable benötigt eine spezielle Variablenart. Wir können also nicht jede beliebige Python-Variable an ein Label binden, sondern nur spezielle Tkinter-Variablen. Eine solche spezielle Variable, die sich an ein Label-Widget binden lässt, ist beispielsweise Tkinter StringVar und kann folgendermaßen erzeugt werden.

5. Die Tkinter StringVar Klasse

Dafür legen wir eine beliebige Python-Variable an, wie zum Beispiel die Text-Variable, die sich ohnehin schon in unserem Programm befindet. Anstatt jetzt aber direkt den Inhalt in Form eines Strings zuzuweisen, weisen wir ein Objekt der speziellen Tkinter StringVar zu. Das setzen wir im Code folgendermaßen um:

Nun besitzen wir mit der Variable text_variable eine ganz normale Python-Variable, mit der wir auf das Objekt StringVar referenzieren.

Jetzt müssen wir noch den gewünschten Text in die Tkinter-String-Variable einfügen, was wir mit der sogenannten set-Methode umsetzen. Das heißt, wir schreiben darunter im Code text_variable, rufen die set-Methode auf und ergänzen zwischen den runden Klammern „Das ist der neue Text“:

Die Referenz dieser Tkinter StringVar haben wir in der text_variable gespeichert und diese ist nach wie vor an die Option textvariable des Label-Widgets gebunden, wodurch wir hier nichts verändern müssen.

Nun löschen wir noch die Zeile, in der wir den neuen Text zuweisen:

Wenn wir das Programm jetzt ausführen, sehen wir, dass der Text, der sich innerhalb der speziellen Tkinter-String-Variable befindet, als Inhalt des Labels auf der GUI ausgegeben wird:

Ziemlich praktisch daran ist jetzt folgendes: Jedes Mal, wenn wir im weiteren Programmverlauf dieser String-Variable einen neuen Wert zuweisen, aktualisiert sich auch der Text des Labels.

6. Mit der set-Methode den Inhalt der Tkinter StringVar ändern

Wir können also irgendwann später im Programm den Text der String-Variable, die wir an das Label gebunden haben, mithilfe der set-Methode verändern und beispielsweise den Text „Aktualisierter Text“ übergeben:

Wenn wir das Programm anschließend ausführen, sehen wir, dass eine Änderung später im Programm sofort wirksam wird und das Label den veränderten Text anzeigt:

Wir haben den Inhalt der Tkinter-String-Variable also tatsächlich an das Label-Objekt gebunden. Das bedeutet, egal wie und wann wir den Inhalt der Tkinter-String-Variable aktualisieren, der angezeigte Text des Labels aktualisiert sich immer automatisch mit.

7. Die Vorteile von Tkinter StringVar

Dadurch sorgen wir dafür, dass der angezeigte Text des Labels dynamisch ist.

Stell dir zum Beispiel folgendes vor: Innerhalb der GUI gibt es einen Button und sobald man diesen klickt, soll ein Label darunter anzeigen „Erfolgreich gesendet“.

Bevor der Button geklickt wurde, soll das Label darunter den Text „Zum Senden klicken“ anzeigen. Das kann man jetzt ideal über solch eine dynamische Tkinter-String-Variable umsetzen.

Ein anderes Beispiel: Du möchtest innerhalb deines Programms gewisse Berechnungen ausführen. Sobald das Programm ein bestimmtes Ergebnis berechnet hat, soll es über ein Label in der GUI angezeigt werden. Auch das lässt sich problemlos über eine dynamische Tkinter-String-Variable umsetzen.

Konkrete Beispiele, die den Sinn hinter diesen String-Variablen verdeutlichen, wirst du in den kommenden Blogartikeln noch in der Praxis sehen.

Mit diesem Beitrag wollte ich dir erst mal zeigen, wie du die speziellen Tkinter-Variablen erzeugen und an ein Widget binden kannst.

8. Wiederholung: So erstellt man eine String-Variable

Du musst also lediglich ein Objekt der Klasse StringVar erzeugen und die Referenz auf dieses Objekt in einer ganz normalen Python-Variable wie in unserem Beispiel „text_variable“ speichern. In dieser Python-Variable ist jetzt die Referenz gespeichert, was bedeutet, dass wir darauf die set-Methode aufrufen und einen gewünschten Wert zuweisen können.

Dann müssen wir diese Python-Variable nur noch an die Option textvariable zuweisen, sodass diese spezielle String-Variable an das Label gebunden ist. Um den Inhalt der Tkinter-Variable zu setzen, verwendet man, wie bereits erwähnt, die set-Methode. Das haben wir in unserem Programm bereits zweimal so umgesetzt.

9. Den Inhalt der Variable mit der get-Methode zurückgeben

Übrigens kann man auch genauso die get-Methode einsetzen, um sich den Inhalt der Variable zurückgeben zu lassen. Das heißt, wir könnten uns zudem den Inhalt der Variable beispielsweise auf der Konsole ausgeben lassen, indem wir darauf die get-Methode aufrufen:

Nachdem wir das Programm so ausgeführt haben, sehen wir den Inhalt tatsächlich auf der Konsole:

10. Die Klasse IntVar

Diese speziellen Tkinter-Variablen gibt es nicht nur als String-Variablen, sondern auch als Integer-, Double- und Boolean-Variablen. Um also anstatt der String- eine Integer-Variable zu erstellen, erzeugt man sich ein Objekt der Klasse IntVar. Wir schreiben damit in unserem Code nun anstelle von StringVar IntVar:

Da wir jetzt eine IntVar definiert haben, werden wir darin natürlich einen Integer-Wert, also eine Ganzzahl speichern. Bei der Set-Methode übergeben wir dafür beispielhaft die Ganzzahl 10:

Weiter unten aktualisieren wir den Wert zum Beispiel auf die Ganzzahl 20:

Wenn wir das Programm ausführen, sehen wir, dass die Zahl 20 über das Label angezeigt wird:

11. Die Klasse DoubleVar

Möchten wir eine Kommazahl über eine spezielle Tkinter-Variable speichern, dann erzeugen wir kein Objekt der Klasse IntVar, sondern eins der Klasse DoubleVar.

Dabei könnten wir dann beispielsweise 10,2 oder 20,4 übergeben.

12. Die Klasse BooleanVar

Außerdem haben wir die Möglichkeit, eine sogenannte BooleanVar zu erzeugen. Wir schreiben dafür BooleanVar und übergeben dann einen entsprechenden Wahrheitswert, wofür wir zunächst True festlegen:

Im Nachhinein ändern wir diesen auf False:

Wenn wir das Programm ausführen, sehen wir eine Null:

Das liegt daran, dass der Wahrheitswert True als 1 zurückgegeben und über ein Label auch als 1 angezeigt wird. Den Wahrheitswert False zeigt ein Label hingegen als 0 an.

Damit kennst du nun auch die speziellen Tkinter-Variablen und kannst sie fortan an deine Widgets binden.

Inhaltsverzeichnis

1. Eine Einführung in die ttk Widgets

Bisher haben wir gesehen, wie man ein Label-Widget erzeugt und wie man diesem einen Text zuweist. Das geschieht, indem wir eine Variable definieren, die wir nun für unser Beispiel „label1“ nennen.

Anschließend packen wir das Ganze noch mithilfe von pack in die GUI.

Wenn wir das Programm ausführen, sehen wir, dass das Label erfolgreich in der GUI angezeigt wird:

2. Textzuweisung beim ttk Label

Das Erste, das ich dir direkt zu Beginn kurz zeigen möchte, ist, dass man den Text auch nach der Erzeugung des Label-Objekts setzen kann, und zwar mit Hilfe der sogenannten configure-Methode. Das heißt, wir könnten den Text "Hello World" weglassen und stattdessen weiter unten auf Label 1 die configure-Methode aufrufen. Wir übergeben also das Schlüsselwort Text diesmal der configure-Methode:

Wenn wir das Programm jetzt ausführen, sehen wir, dass es zur gleichen Ausgabe kommt wie zuvor. Man muss die Text-Option also nicht zwingend bei der Erzeugung des Label-Objekts setzen, sondern kann dies auch danach tun, indem man die configure-Methode auf dem Label aufruft.

Das gilt nicht nur für die Text-Option, sondern auch für jede weitere Option, die wir im Verlauf des Beitrags noch kennenlernen werden. Damit weißt du nun, dass es diese alternative Möglichkeit ebenfalls gibt. Wir ändern den Code an dieser Stelle wieder zurück auf das ursprüngliche Beispiel, in welchem wir die Text-Option direkt bei der Objekterzeugung setzen.

3. Bildintegration in ttk Labels

Als nächstes sehen wir uns an, wie wir in unser ttk Label ein Bild integrieren können. Hierzu müssen wir zunächst das sogenannte Pillow-Modul installieren.

Wir bewegen uns also in die Projekteinstellungen, indem wir auf „Preferences“ klicken.

Dann wählen wir das entsprechende Projekt aus und klicken auf "Python Interpreter". Anschließend klicken wir auf das Pluszeichen.

Jetzt geben wir oben den Namen "Pillow" ein.

Das Modul wird uns vorgeschlagen und wir klicken auf "Install Package". Wie wir sehen, wird das Modul erfolgreich installiert und wir erhalten die Meldung "Package Pillow installed successfully". An dieser Stelle können wir das Fenster schließen und die Änderungen mit OK bestätigen. Damit steht uns das Paket ab sofort in unserem Projekt zur Verfügung.

Nun fügen wir den folgenden zusätzlichen Importbefehl oben in unserem Code ein:

Um jetzt ein Bild in das Label zu integrieren, müssen wir zunächst eine neue Variable definieren, die wir „image“ nennen.

Dieser weise ich eines der beiden Bilder zu, die ich bereits in das Projektverzeichnis eingefügt habe. Wie du hier sehen kannst, habe ich einmal unser Logo als PNG-Datei und zusätzlich den YouTube-Banner, den wir auf unserem YouTube-Kanal verwenden:

4. Einfügen und Öffnen von Bildern

Du kannst jedes beliebige Bild einfügen, indem du die Bilddatei in den Projektordner ziehst:

Nachdem die Frage aufgetaucht ist, ob du das wirklich umsetzen möchtest, bestätigst du diese. Daraufhin liegt die Datei zusätzlich in deinem Projektverzeichnis. Das Bild können wir jetzt öffnen, indem wir in unserem Programm die open-Methode von Image aufrufen.

Dabei müssen wir den Pfad zum Bild als Argument an die open-Methode übergeben. Da sich das Bild im gleichen Verzeichnis wie unser Python-Skript befindet, genügt es, den Dateinamen als String anzugeben. Andernfalls müsstest du den relativen oder absoluten Pfad zum Bild angeben.

Falls du noch Nachholbedarf darin hast, wie man mit Dateien arbeitet, beispielsweise beim Öffnen von Dateien über den relativen oder absoluten Pfad, solltest du dir unseren Python-Masterkurs ansehen. Dort haben wir ein eigenes Modul zum Thema „Arbeiten mit Dateien“ integriert, in welchem du dieses Thema ausführlich lernen wirst.

Mit diesem Code haben wir jetzt Zugriff auf die Bilddatei. Damit wir das Bild in ein Label integrieren können, müssen wir die Klasse ImageTk verwenden und aus der Bilddatei ein sogenanntes „photo“ erstellen. Hierzu schreiben wir folgenden Code:

Wir rufen PhotoImage auf und übergeben darin die Variable image, in der wir die Bilddatei gespeichert haben. Nun können wir das erstellte Foto über ein Label in der GUI anzeigen lassen.

Hierzu erzeugen wir ein ttk Label, wie wir es bereits mit label1 getan haben. Diesmal weisen wir jedoch keinen Text zu, sondern ein Bild. Daher löschen wir die Textzuweisung und weisen stattdessen das eben generierte Foto zu. Das heißt, wir schreiben image=photo:

Wenn wir das Programm jetzt ausführen, kannst du sehen, dass das Bild in der GUI angezeigt wird.

5. Bildgrößenanpassung mit resize

Wie du auch sehen kannst, ist es aktuell sehr groß. Das bedeutet, ich müsste das GUI-Fenster vergrößern, um das Bild komplett sehen zu können. Wenn das bei dir auch der Fall sein sollte und du das Bild lieber kleiner hättest, kannst du die sogenannte resize-Methode verwenden, die ebenfalls über das Pillow-Modul zur Verfügung gestellt wird.

Wir schließen das Programm also und bewegen uns dann zurück in den Code. Nun rufen wir die resize-Methode auf:

Dabei müssen wir ein Tupel übergeben, das die Breite und Höhe des Bildes angibt. Ich nehme dafür beispielhaft 300 x 100 Pixel.

Wenn wir das Programm erneut ausführen, sehen wir, dass das Bild nun wesentlich kleiner ist:

6. Dynamische Bildänderung

Der Vorteil dabei ist, dass wir das Bild auch zu einem späteren Zeitpunkt noch verändern können, indem wir entweder die configure-Methode verwenden oder als weitere Möglichkeit über den Schlüssel „image“ einfach ein neues Foto zuweisen.

Dazu müssen wir natürlich zunächst wieder ein neues Foto erzeugen. Hierzu kopieren wir einfach die beiden zuletzt geschriebenen Zeilen und fügen sie direkt darunter ein. Die Variable nenne ich beispielhaft image2 und das Foto photo2:

Jetzt werden wir eine andere Bilddatei öffnen, in meinem Fall den YouTube-Banner, den ich ebenfalls bereits zum Projekt hinzugefügt habe.

Damit haben wir jetzt zwei Fotos von zwei unterschiedlichen Bildern. Aktuell hat das Label das erste Foto, nämlich unser Logo. Jetzt möchten wir den Banner zu einem späteren Zeitpunkt diesem Label zuweisen. Das werden wir über die sogenannte Schlüssel-Schreibweise umsetzen. Wir schreiben also label1, öffnen ein eckiges Klammerpaar, schreiben image hinein und setzen es gleich photo2:

Wenn wir das Programm jetzt ausführen, sehen wir, dass nicht mehr das Logo angezeigt wird, sondern der entsprechende Banner.

7. Optionen mit der Schlüsselschreibweise ändern

Du kannst übrigens alle Optionen, die du als Schlüsselwort-Argumente bei der Objekterzeugung eines Widgets setzt, auch mit der Schlüssel-Schreibweise ändern. Demnach könntest du also auch den Text eines Labels ändern, indem du anstelle von „image“ die Option „text“ schreibst und dann einen entsprechenden String zuweist, wie beispielsweise "Das ist ein Text":

Du hast damit insgesamt drei Möglichkeiten, Optionen zu setzen:

1. Direkt bei der Objekterzeugung, indem du die Optionen als Schlüsselwort-Argumente setzt.
2. Über die Schlüssel-Schreibweise, wie gerade gezeigt.
3. Indem du die configure-Methode verwendest, die du bereits kennengelernt hast.

Bei dieser müssten wir folgendes schreiben:

Das sind alles drei valide alternative Möglichkeiten, die ich dir zeige, damit du sie einmal gesehen hast, denn jeder setzt das in seinem Programm etwas anders um. Du solltest alle drei Wege kennen, da jeder Weg zum gleichen Ziel führt. Das wird besonders interessant, wenn wir noch andere Widgets wie zum Beispiel Buttons in unsere GUIs einbauen. Dann können wir beispielsweise sagen, dass der Text geändert wird, wenn man den Button klickt. Allerdings werden wir uns das später noch ansehen, weshalb ich den Code wieder entferne:

8. Text und Bild im ttk Label kombinieren

Jetzt wissen wir also, dass wir über unser Label-Widget sowohl normalen Text als auch Bilder darstellen können. Darüber hinaus können wir aber auch innerhalb eines Label-Widgets Bild und Text miteinander vereinen und damit beides gleichzeitig darstellen.

Hierzu kannst du bei der Erzeugung des Label-Widgets zusätzlich zum „image“ auch das text-Schlüsselwort-Argument übergeben. Das heißt, wir können im Code noch folgendes ergänzen:

Wenn wir das Programm an dieser Stelle ausführen, sehen wir, dass nach wie vor nur das Bild angezeigt wird. Von dem Text, den wir als Schlüsselwort-Argument übergeben haben, fehlt allerdings jede Spur.

9. Die compound-Option nutzen

Das liegt daran, dass beim gleichzeitigen Einfügen von Text und Bild in ein Label, beides nur dann angezeigt wird, wenn zusätzlich auch ein Wert für die Option „compound“ gesetzt wird. Über diese Option können wir dem Label-Widget mitteilen, wie es das Bild in Kombination mit dem Text darstellen soll. Wir müssen also noch zusätzlich beispielsweise compound="right" angeben, was für rechts steht:

Wenn wir das Programm jetzt noch einmal ausführen, sehen wir, dass das Bild nun rechts vom Text angezeigt wird und beides sichtbar ist:

Genauso könnten wir jetzt auch festlegen, dass das Bild über dem Text angezeigt werden soll. Dazu geben wir bei compound „top“ an:

Jetzt wird das Bild über dem Text angezeigt:

Wir können aber auch bestimmen, dass es links davon angezeigt werden soll, indem wir „left“ angeben. Wenn wir „bottom“ verwenden, wird das Bild unter dem Text angezeigt und auch „center“ steht uns zur Auswahl:

Wenn wir das Programm so ausführen, wird das Bild mittig dargestellt und der Text liegt darüber:

10. ttk Label Optionen ändern

Damit weißt du jetzt, wie man in Label-Widgets auch Bilder integrieren kann. Zudem hast du gelernt, dass man sowohl Bilder als auch den Text und alle anderen Optionen, die man bei der Widget-Objekterzeugung als Schlüsselwort-Argumente setzt, nachträglich verändern kann. Nämlich entweder über die configure-Methode oder über den entsprechenden Schlüssel.

Bei der Methode mit dem Schlüssel würde man beispielsweise folgendes schreiben:

Wir geben damit zwischen den eckigen Klammern den Schlüssel an und weisen einen String zu.

Wenn man ein Bild ändern möchte, gibt man nicht den Schlüssel “text“ an, sondern “image“. Diese Schlüssel-Schreibweise zeigt, dass die zahlreichen Optionen, die man bei den einzelnen Widgets setzen kann, als Key-Value-Paare hinterlegt sind. Wenn wir also wissen möchten, welche Optionen uns für ein Widget zur Verfügung stehen, dann können wir das ganz einfach mit Hilfe der keys-Methode ermitteln, die man im Übrigen ausführlich im Python-Masterkurs kennenlernt, der als Grundlage für den Python-Tkinter-Masterkurs dient.

11. Verfügbare Optionen ermitteln

Wir rufen im Code also die keys-Methode auf:

Wenn wir den Code jetzt ausführen, siehst du, dass uns alle möglichen Optionen sauber in der Konsole ausgegeben werden:

Mit folgendem Code können wir die Ausgabe noch konkretisieren, sodass wir auch sehen, welche Optionen aktuell mit welchem Wert belegt sind:

Wenn wir das Programm so ausführen, sehen wir wie gerade eben die Optionen, die ein ttk Label besitzt, allerdings werden uns jetzt zudem die aktuellen Werte dieser Optionen ausgegeben:

Bei „text“ sehen  wir zum Beispiel "Das ist unser Logo", weil wir das oben so festgelegt haben. Bei „image“ haben wir das entsprechende Bild hinterlegt, „compound“ haben wir aktuell auf „center“ gesetzt, und so weiter. Das wird uns jetzt alles übersichtlich dargestellt.

12. Padding bei ttk Labels

Immer wenn du bei einem beliebigen Widget in Zukunft wissen möchtest, welche Optionen überhaupt gesetzt werden können, kannst du dir mit diesem Trick ganz einfach Abhilfe schaffen und dir alle Optionen anzeigen lassen.

Angenommen, wir möchten beispielsweise die Option „padding“ mit dem Wert 50 setzen, dann können wir bei der Objekterzeugung des Label-Widgets einfach zusätzlich „padding“ folgendermaßen ergänzen:

Beim Ausführen des Programms sehen wir, dass das Padding gesetzt wurde:

Dadurch haben wir zu jeder Seite einen Abstand von 50 Pixeln hinzugefügt, sodass der Text nicht direkt am Rand angezeigt wird. Wenn wir das Padding auf 5 setzen, scheint es etwas zu nah am Rand zu sitzen. Bei 50 ist der Text weiter vom Rand entfernt. Wir sehen das Padding zum einen in der GUI und zum anderen auch in der Konsole, da wir uns dort die Werte ausgeben lassen:

Die Klasse Label arbeitet so, dass das Padding intern hinterlegt wird. Auch wenn die Ausgabe etwas kryptisch aussieht, erkennen wir, dass es dort gesetzt wurde.

13. Die Schriftart ändern

Wir könnten uns noch weitere Optionen ansehen und diese ändern. Zum Beispiel gibt es die Option „font“, mit der wir die für den Label-Text verwendete Schriftart ändern können, indem wir ihr einen entsprechenden Wert zuweisen. Das können wir bei der Objekterzeugung oder nachträglich mit der configure-Methode umsetzen.

Dabei übergeben wir ein Tupel, in dem der erste Wert die gewünschte Schriftart als String angibt. Wir wählen dafür nun beispielhaft Arial:

Damit die Schrift direkt über dem Bild angezeigt wird, geben wir bei compound „top“ an:

Wenn wir das Programm nun ausführen, sehen wir den Text in der Schriftart Arial:

An dieser Stelle könnten wir auch eine andere Schriftart wie beispielsweise Courier verwenden:

Wie man eindeutig erkennt, hat sich die Schriftart tatsächlich geändert:

Wichtig ist, dass man nur Schriftarten setzen kann, die auch auf dem eigenen System verfügbar sind. Darüber hinaus lässt sich auch die gewünschte Schriftgröße angeben. Hierzu fügt man innerhalb des Tupels noch ein Komma hinzu und kann dann die gewünschte Größe als Zahl angeben. Ich gebe jetzt zum Beispiel einmal 30 an:

Führen wir das Programm nun aus, sehen wir, dass die Schriftart jetzt natürlich wesentlich größer ist:

14. Der Einfluss von Themes auf das ttk Label

Ich denke, du hast gesehen, dass man mit diesen Optionen einiges anstellen kann. Wie du vielleicht schon gemerkt hast, handelt es sich bei diesen ganzen Änderungen um designtechnische Aspekte.

Im Beitrag zuvor hatte ich erwähnt, dass das Design bei den TTK-Widgets von den funktionalen Aspekten weitestgehend entkoppelt sein sollte. Das ist zumindest der Hauptgrund, weshalb die TTK-Widgets überhaupt eingeführt wurden.

Wie wir sehen, kann man die designtechnischen Aspekte auch bei den TTK-Widgets direkt über Optionen setzen. Allerdings funktioniert das auch über eine sogenannte Style-Klasse. Die Option „style“, der man den entsprechenden Style zuweisen kann, wird uns auf der Konsole weiter unten ausgegeben.

Wie wir eine entsprechende Style-Klasse zuweisen und wie das alles im Detail funktioniert, wirst du umfassend im Python-Tkinter-Masterkurs lernen. Denn dort haben wir ein eigenes Modul integriert, das nur auf das Thema Styling eingeht. Sollte dir diese Tutorial-Reihe also bereits dabei helfen, Tkinter besser zu verstehen, dann solltest du dir unbedingt den Python-Tkinter-Masterkurs ansehen. In diesem werden wir tief in die Materie eintauchen und zahlreiche Praxisprojekte gemeinsam von Grund auf programmieren. Dazu gehören ein Bitcoin-Preisrechner, ein Nachrichtenverschlüsselungsprogramm, eine To-Do-Listen-App und vieles mehr.

15. Die Besonderheit der background-Option

An dieser Stelle weißt du also, wie du ein TTK-Label-Widget erzeugen und die unterschiedlichen Optionen dieses Objekts setzen kannst, um beispielsweise ein Bild, einen Text und gewisse designtechnische Aspekte umzusetzen.

Jetzt möchte ich dich noch auf eine Option hinweisen, die Einsteiger oftmals verwirrt. Angenommen, du wirfst in der Konsole weiter einen Blick auf die Auflistung, um herauszufinden, welche Optionen es noch gibt. Direkt am Anfang siehst du dann den Punkt „background“.

Die Hintergrundfarbe von normalen TK-Label-Widgets hatten wir bereits zuvor schon mal geändert. Beim Anblick von „background“ könntest du nun möglicherweise denken, dass diese Option bei TTK-Label-Widgets nicht „bg“, sondern „background“ heißt.

16. Die Hintergrundfarbe und das Theme anpassen

Dadurch könntest du auf die Idee kommen, den Hintergrund des Labels beispielsweise auf Rot anzupassen. Das würdest du entweder nachträglich über die „configure“-Methode tun oder direkt bei der Objekterzeugung. Für welche Vorgehensweise du dich dabei entscheidest, spielt keine Rolle. Beispielsweise würdest du demnach folgendes schreiben:

Wenn du das Programm jetzt so ausführst, wirst du eventuell feststellen, dass die Farbe Rot nicht übernommen wird.

Wieso sage ich eventuell? Weil es darauf ankommt, welches Theme standardmäßig bei dir verwendet wird. Ich arbeite gerade auf einem Mac, und dort wird standardmäßig, wenn ich das Theme nicht explizit setze, das Theme mit dem Namen Aqua verwendet. Dieses spezielle Theme hat die Besonderheit, dass es die Änderung der Hintergrundfarbe bei einem Label-Widget nicht zulässt. Deshalb sehe ich die Änderung hier jetzt auch nicht.

Aus diesem Grund ändere ich nun mit zwei Zeilen Code das Theme:

Diese beiden Zeilen Code werden im Detail im Python-Tkinter-Masterkurs erklärt. Grob gesagt, initialisieren wir mit der ersten Zeile die Style-Datenbank und ändern mit der zweiten Zeile das Theme entsprechend, indem wir den Namen des gewünschten Themes angeben. Du musst allerdings noch nicht verstehen, was an dieser Stelle genau passiert. Ich möchte dir nur zeigen, dass beim Ausführen des Programms die Hintergrundfarbe des Labels nun tatsächlich auf Rot gesetzt ist:

17. Einschränkungen durch Themes

Es gibt also sogenannte Themes und wenn du mit TTK-Widgets arbeitest, ist standardmäßig eines gesetzt. Welches gesetzt ist, hängt davon ab, auf welchem Betriebssystem du aktuell arbeitest.

Bei manchen Themes funktionieren bestimmte Optionen, die wir bei den Widgets setzen können, nicht. Diese werden durch das Theme blockiert. Wichtig ist, das bereits vorneweg zu wissen, um nicht daran zu verzweifeln, dass sich die Hintergrundfarbe nicht verändern lässt. Das hängt dann in der Regel mit den Themes zusammen.

Bis hierher ist also nur wichtig zu verstehen, wie du TTK Label Widgets erzeugst und wie du den Großteil der Optionen setzen kannst. Wir sehen in unserer Konsole beispielsweise auch noch die Option „textvariable“. Diese ist ebenfalls sehr wichtig und wird im nächsten Beitrag im Detail erklärt.

Inhaltsverzeichnis

1. Warum Label Widgets allein nicht reichen

Im früheren Verlauf dieser Tutorial-Reihe haben wir bisher nur mit einer Art von Widget gearbeitet, nämlich mit Labels. Allerdings kann man mit Labels allein noch keine wirklich sinnvollen Anwendungen programmieren.

Genau deshalb werden wir uns in den kommenden Beiträgen auch noch weitere Widgets ansehen. Mit Kenntnis über diese Widgets können wir dann auch schon unsere ersten Anwendungen bauen und ab dann fängt die Programmierung mit Python und Tkinter so richtig an, Spaß zu machen.

Zuvor muss ich dir allerdings in diesem Blogartikel noch etwas sehr Wichtiges erklären: den Unterschied zwischen den sogenannten tk Widgets und den ttk Widgets.

Das werde ich dir anhand eines kleinen Beispiels mit einem Label Widget zeigen, da wir dieses bereits kennen.

2. Ein Label Widget erzeugen

Das Python File, in welchem wir starten, sieht aktuell folgendermaßen aus:

Bisher haben wir im Verlauf des Kurses Label Widgets erzeugt, indem wir eine Variable definiert und dieser ein Label-Objekt zugewiesen haben.

Genau das setzen wir jetzt beispielhaft um. Der Text soll dabei 'Label 1' lauten und zudem vergeben wir einen Hintergrund in der Farbe Grün:

Anschließend müssen wir das Ganze mithilfe des Pack Layout Managers noch in die GUI packen:

In anderen Worten haben wir beim Erzeugen eines Labels im Namensraum von Tkinter ein Objekt der Klasse Label erzeugt.

3. Was sind tk Widgets?

Wenn wir ein Label Widget auf diese Art und Weise erzeugen, handelt es sich dabei um ein normales tk Widget. Das sind die Widgets, die Tkinter bereits von Anfang an zur Verfügung gestellt hat. Im Laufe der Zeit hat sich Tkinter allerdings weiterentwickelt, wodurch vor einigen Jahren die sogenannten ttk Widgets hinzukamen.

4. Was sind ttk Widgets?

Die Grundidee für die ttk Widgets besteht darin, dass man den Code, der das Verhalten eines Widgets implementiert, so weit wie möglich vom Code trennt, der sein Erscheinungsbild implementiert. Das klingt erst mal kompliziert, aber wir können uns das ganz einfach am aktuellen Beispiel bewusst machen.

Darin haben wir gerade ein tk Label erzeugt, das den Text „Label 1“ anzeigt. Warum ist das so? Weil wir in unserer Zeile Code als Text den String „Label 1“ zugewiesen haben. Darüber hinaus haben wir darin die Hintergrundfarbe des Labels mit der Zeile bg=“green“ festgelegt.

5. Erzeugen eines ttk Label Widgets

Die Grundidee der neueren ttk Widgets besteht wie bereits gesagt darin, dass man den Code, der das Verhalten eines Widgets implementiert, so weit wie möglich vom Code trennt, der sein Erscheinungsbild implementiert.

Die Hintergrundfarbe des Label Widgets ändert offensichtlich das Erscheinungsbild. Sie hat also keine funktionale Wirkung, sondern nur Einfluss auf die Optik. Bei ttk Widgets wird das jetzt voneinander getrennt bzw. hat man die Möglichkeit, es voneinander zu trennen. Man muss es also nicht zwangsläufig tun, kann dies aber.

Das bedeutet, dass wir bei den ttk Widgets, um das Aussehen eines Widgets zu verändern, die Details nicht mehr über die Optionen setzen müssen, was wir bisher bei den normalen tk Widgets mit den Schlüsselwortargumenten getan haben. Stattdessen können wir das in einem separaten Schritt mithilfe sogenannter Style-Klassen umsetzen, die wir den entsprechenden Widgets zuweisen.

An dieser Stelle erzeugen wir uns ein zweites Label Widget. Allerdings nicht das normale tk Label Widget wie gerade eben, sondern das ttk Label Widget. Hierzu müssen wir zunächst einen weiteren Import-Befehl angeben:

Sobald wir diesen Import-Befehl in unser Programm gesetzt haben, bietet sich uns zusätzlich die Möglichkeit, die neueren ttk Widgets zu verwenden.

Um dieses Widget sichtbar zu machen, packen wir es ebenfalls in die GUI.

6. Fehlermeldungen bei ttk Label Widgets

Wie du siehst, besteht der einzige Unterschied zum normalen tk Widget im aktuellen Code darin, dass wir „ttk.Label“ schreiben anstatt „tk.Label“.

Wenn wir das Programm jetzt ausführen, erhalten wir allerdings eine Fehlermeldung: "Unknown option 'bg'". Das bedeutet, dass das ttk Label Widget nicht die Option 'bg' kennt, um die Hintergrundfarbe zu setzen, was wir in diesem Fall mit dem Argument bg="red" versucht haben.

Die ttk Label Widgets stellen also nicht die exakt gleichen Optionen bereit wie die tk Label Widgets.

Aus diesem Grund löschen wir das Schlüsselwortargument, mit dem wir die Hintergrundfarbe modifizieren möchten, für dieses Beispiel einfach noch mal heraus.

Wenn wir das Programm jetzt erneut ausführen, sehen wir, dass es durchläuft und das Ganze funktioniert:

Wir haben nach wie vor die Möglichkeit, die Hintergrundfarbe des ttk Labels zu verändern, allerdings geschieht das auf eine andere Art und Weise. Dafür existieren nämlich andere Optionen innerhalb des ttk-Labels. Das werden wir im nächsten Beitrag sehen.

7. Style-Klassen

Zudem gibt es eigene sogenannte Style-Klassen, anhand derer wir das Aussehen gesondert modifizieren können.

Auf das Thema Style-Klassen gehen wir unter anderem im Tkinter-Masterkurs mit einem komplett eigenen Modul ein. Darin wirst du detailliert lernen, welche Abstraktionslevel es beim Styling der GUI gibt, was sogenannte Default-Style-Klassen sind, wie man diese konfiguriert, wie man eigene Style-Klassen erzeugen kann und vieles mehr.

Mithilfe dieser Style-Klassen erreichen wir die gewünschte Entkopplung zwischen dem Code, der für die Funktionalität verantwortlich ist, und dem Code, der für das Styling der GUI sorgt. Diese Entkopplung macht den Code nicht nur übersichtlicher, sondern bringt auch einen weiteren großen Vorteil mit sich.

8. Vorteile der Style-Klassen

Stell dir vor, du hast in deiner GUI 60 unterschiedliche Widgets eingebaut. Bei allen Widgets hast du das Aussehen jeweils direkt beim Erzeugen des Objekts festgelegt, indem du die entsprechenden Optionen mit Schlüsselwortargumenten gesetzt hast.

Wenn du jetzt etwas grundlegend am Aussehen der GUI ändern möchtest, müsstest du diese Änderungen in jedem einzelnen Widget-Objekt vornehmen. Wenn du hingegen allen Objekten einfach nur eine Style-Klasse zuweisen würdest, müsste eine Änderung nur an einer Stelle im Code, nämlich in der Style-Klasse, umgesetzt werden. Alle Widgets würden diese Änderungen dann automatisch übernehmen.

9. Vorteile der ttk Widgets

Zudem haben die ttk Widgets den Vorteil, dass es mehrere von ihnen gibt. Insgesamt existieren von den tk Widgets 12 Stück, wohingegen es von den ttk Widgets 18 Stück gibt. Es stehen damit also 6 Widgets mehr zur Verfügung als bei den normalen tk Widgets. Zudem bieten ttk Widgets ein besseres plattformübergreifendes Erscheinungsbild aufgrund ihrer Themes.

Jeder Style folgt einem gewissen übergeordneten Theme, was die ganze GUI optisch nativer an die entsprechende Plattform anpasst. Wenn du dein Programm beispielsweise auf Windows ausführst, übernimmt es das Grundaussehen einer Windows-Applikation. Führst du dein Programm auf einem Mac aus, übernimmt es das Grundaussehen einer Mac-Applikation. Es fügt sich also „schöner“ ein.

10. Fazit

Aufgrund der genannten Punkte werden wir im weiteren Verlauf dieser Tutorial-Reihe immer mit den ttk Widgets arbeiten. Wie gesagt, sind die neuen ttk Widgets nicht ausnahmslos genauso anwendbar wie die normalen TK Widgets, weil beispielsweise Schlüsselwortargumente wie „bg“ nicht entgegengenommen werden können. Dafür gibt es andere Schlüsselwortargumente als Optionen, wie wir im nächsten Beitrag sehen werden.

Merken solltest du dir also, dass es sowohl die normalen tk Widgets als auch die ttk Widgets gibt und sich diese in gewissen Belangen voneinander unterscheiden.

Das zu verstehen ist besonders wichtig, wenn du beispielsweise eine spezifische Frage googeln solltest. Denn oftmals sieht man dann Beispiele mit normalen tk Widgets und Beispiele mit ttk Widgets und wenn man dann nichts von den Unterschieden weiß, sorgt das schnell für Verwirrung. Da du diesen Beitrag gelesen hast, sollte das allerdings nicht mehr passieren. Im Verlauf der nächsten Blogartikel wird das noch wesentlich klarer werden.

Inhaltsverzeichnis

1. Was wirst du in diesem Beitrag lernen?

2. Was ist ein Layout Manager und welche Aufgabe hat er?

Alle Begriffe stehen allerdings für das Gleiche, denn sie beschreiben den Mechanismus, der für die Organisation, Position und Ausrichtung der Widgets im Tkinter Hauptfenster verantwortlich ist.

In Tkinter existieren die drei Basis Layout Manager pack, grid und place. Wir werden uns in diesem Einsteiger Crashkurs die wichtigsten Grundlagen des Tkinter Pack Layout Managers und etwas später die des Grid Layout Managers ansehen.

Bei jedem der Layout Manager handelt es sich nämlich um ein komplexes Thema, welches sich nicht vollständig in diesem Beitrag unterbringen lässt.

Ich empfehle dir deshalb, einen Blick auf unseren Tkinter Masterkurs zu werfen, in welchem wir jedem Layout Manager ein komplett eigenes Modul gewidmet haben. Dort lernst du dieses Thema wesentlich ausführlicher und Schritt für Schritt kennen. Zudem findest du darin Praxisprojekte, in welchen du dein Wissen direkt vertiefen kannst.

3. Der Tkinter Pack Layout Manager

Wie bereits erwähnt, geht es in diesem Beitrag um den Tkinter Pack Layout Manager, welchen wir bereits in unseren bisherigen Beispielen wiederholt verwendet haben.

Denn bisher haben wir immer erst ein Hauptfenster erstellt und in diesem bis zum jetzigen Zeitpunkt jedes Mal lediglich ein einzelnes Label Widget mithilfe des Pack Layout Managers platziert. Wir haben es also mit der Methode pack in die GUI gesetzt, wie das auch im folgenden Beispiel erkennbar ist:

Dabei haben wir ein Hauptfenster mit der Größe 400 x 400 Pixel erzeugt und ein Label Widget, das den Text Label 1 trägt, hinzugefügt, welches mithilfe von pack in der GUI platziert wurde.

4. Die Hintergrundfarbe des Labels mit bg ändern

Damit man die grundlegende Funktionsweise des Pack Layout Managers besser sehen kann, werden wir die Hintergrundfarbe des Labels verändern. Dafür gibt es beim Label Widget eine weitere Option, die sich „bg“ nennt und für „background“ steht.

Diese können wir als Schlüsselwortargument setzen, indem wir im Code „bg“ schreiben und als Wert die gewünschte Farbe zuweisen:

Dabei können wir entweder einen hexadezimalen Farbcode in Form eines Strings angeben oder den englischen Farbnamen. Möchten wir also, dass der Hintergrund grün ist, geben wir als String "green" an:

Wenn wir das Programm an dieser Stelle ausführen, siehst du, dass das Label nun tatsächlich einen grünen Hintergrund besitzt.

5. Die Aufgabe des Tkinter Pack Layout Managers

Wie wir auch sehen können, wird es zentriert ganz oben im Fenster platziert. Doch woher weiß das Widget, dass es dort sein muss? Schließlich hätte es auch ganz unten in der Mitte oder rechts oben in der Ecke Platz.

Das Widget weiß, wo es platziert werden muss aufgrund des Layout Managers Pack. Dies ist auch der Grund, weshalb wir jedes Widget erst mit der pack-Methode zur GUI hinzufügen müssen, damit man es sehen kann. Ohne diesen Layout Manager wüsste das Widget also nicht, wo es platziert werden muss.

Stell dir nun einmal vor, wir erweitern das Programm noch um ein zweites Widget, das wir beispielhaft label2 nennen. Auch dieses soll in die root und der Text soll diesmal „Label 2“ lauten. Als Hintergrund für Label 2 legen wir die Farbe Rot fest:

Auch dieses müssen wir natürlich jetzt mithilfe von pack in der GUI platzieren:

 Nachdem wir das Programm noch einmal ausgeführt haben, sehen wir die folgende Ausgabe:

Das zweite Label hängt jetzt genau unter Label 1, wofür der Tkinter Pack Layout Manager verantwortlich ist.

Ein Layout Manager ist also nicht nur für die Widgets im Einzelnen wichtig, sondern auch für die Widgets in ihrer Gesamtheit.

Denn jedes Mal, wenn wir ein weiteres Widget zur GUI hinzufügen, muss der Pack Layout Manager alles umorganisieren, sodass alle Widgets sauber platziert sind und sich beispielsweise nicht überlappen.

Wie du sehen kannst, sind Layout Manager von großer Bedeutung. Dabei ist in Tkinter Pack einer der am meist genutzten, da er die Widgets auf einfache Art vollkommen automatisch im Fenster platziert basierend auf dem Platz, der darin noch verfügbar ist.

6. Das Schlüsselwortargument side

Wir können dem Pack Layout Manager jetzt auch noch mitteilen, dass er gewisse Widgets an bestimmte Positionen setzen soll. Denn nur so wird uns ermöglicht, GUIs zu bauen, die so aussehen, wie wir uns das vorstellen.

Das funktioniert mithilfe gewisser Schlüsselwortargumente, die wir beim pack-Methodenaufruf mitübergeben können. Aktuell werden die beiden Labels oben in der Mitte platziert, weil standardmäßig der Wert des sogenannten Schlüsselwortarguments „side“ auf top gesetzt ist.

Der pack-Methode könnten wir jetzt also auch das Schlüsselwortargument side direkt mitübergeben und ebenfalls auf top setzen:

Bei Label 2 machen wir es genauso:

Wenn wir das Programm jetzt noch einmal ausführen, sehen wir die exakt gleiche Ausgabe wie zuvor:

Was bedeutet "top"?

Denn standardmäßig, also wenn wir für die Option side selbst keinen Wert festlegen, ist der Wert immer auf top gesetzt. „top“ bedeutet aber nicht nur, dass das Label oben in der Mitte platziert wird, sondern es geschieht noch etwas anderes sehr Wichtiges dabei.

Tkinter allokiert nämlich für jedes so platzierte Widget ebenfalls die gesamte Breite der Applikation.

Was bedeutet das? Wie wir sehen, wird Label 1 zentriert, also mittig in der GUI angezeigt. Insgesamt ist für dieses Label allerdings auch der komplette horizontale Platz reserviert, welchen ich auf der folgenden Abbildung durch einen roten Kasten visualisiert habe:

Gleiches gilt für Label 2. Auch für dieses ist der gesamte horizontale Platz rechts und links vom Label reserviert. Das bringt uns zu einer weiteren Frage: Warum nutzen Label 1 und Label 2 nicht den kompletten Platz, der ihnen zur Verfügung steht?

Ganz einfach: Weil ein Label immer nur so viel Platz beansprucht, wie es benötigt, um den Inhalt des Labels darstellen zu können.

Wir schließen das Fenster nun also noch mal und passen den Text von Label 1 an, indem wir „beansprucht nun mehr Platz“ dazu schreiben:

Führen wir das Programm jetzt noch einmal aus, sehen wir, dass das Label nun in die Breite gewachsen ist, weil es jetzt mehr Platz benötigt, um den Text darstellen zu können:

Aus diesem Grund ist der gesamte horizontale Platz für das Label reserviert.

Ändern wir an dieser Stelle den Text aber wieder auf „Label 1“:

7. Das Schlüsselwortargument fill

Nun gibt es ein weiteres Schlüsselwortargument, mithilfe dessen wir dafür sorgen können, dass das Label trotz des kleinen Textes den kompletten horizontalen Platz füllt.

Es handelt sich dabei um das Schlüsselwortargument „fill“.

Wir können also der pack-Methode von Label 1 auch noch das Schlüsselwortargument „fill“ mitübergeben:

Dem Schlüsselwortargument fill weisen wir nun den Wert "x" als String zu:

Wenn wir das Programm an dieser Stelle erneut ausführen, sehen wir, dass sich das Label 1 jetzt über die komplette Breite erstreckt, die es zur Verfügung hat:

Wir wählen deshalb "x", weil wir das Programm damit anweisen, den gesamten allokierten Platz in x-Richtung zu füllen. Neben x können wir auch y zuweisen. Damit geben wir vor, dass das Programm den kompletten Platz in y-Richtung füllen soll, also den Platz, den es vertikal allokiert hat.

Dafür ersetzen wir in unserem Code zunächst das "x" durch ein "y" und führen das Programm erneut aus:

Jetzt sehen wir, dass erst mal nichts passiert:

Das liegt daran, dass das Argument side des Labels auf „top“ gesetzt ist. Wenn das der Fall ist, allokiert das Widget zwar den komplett verfügbaren horizontalen Platz, allerdings nur den vertikalen Platz, den es benötigt, um den Inhalt darstellen zu können. Aus diesem Grund „klebt“ Label 2 direkt unter Label 1.

Denn rechts und links von Label 1 kann es schließlich nicht platziert werden, da der Platz für Label 1 bereits reserviert ist. Folglich wird es direkt darunter gesetzt und damit an die nächst höchstmögliche Stelle in der Applikation.

Wenn wir jetzt noch ein drittes Label oder anderweitiges Widget hinzufügen würden, würde dieses im Fall, dass wir side standardmäßig auf top gesetzt lassen, ebenfalls wieder direkt unter Label 2 platziert werden.

Noch einmal zur Wiederholung: Bei fill=y sehen wir keinen Unterschied, da Label 1 bereits den gesamten vertikalen Platz einnimmt, den es allokiert hat.

8. Das Schlüsselwortargument expand

Wir könnten Tkinter jetzt aber auch dazu anweisen, den Platz für Label 1 in y-Richtung, also in die vertikale Richtung um so viel Platz wie möglich zu vergrößern.

Das lässt sich mithilfe des Schlüsselwortarguments expand umsetzen. Dieses müssen wir auf den Wahrheitswert True setzen:

An dieser Stelle führen wir das Programm aus und sehen die folgende Ausgabe:

Wir sagen damit also dem Pack Layout Manager, dass er Label 1 oben in das Hauptfenster setzen und nicht nur das allokieren soll, dass er standardmäßig mit der Zeile side=top bereits macht, nämlich den kompletten horizontalen Platz für das Label, sondern versucht, noch so viel Platz wie möglich in y-Richtung (vertikal) zu allokieren.

9. Was passiert, wenn man expand auf True setzt?

Beim Ausführen des Programms sehen wir, dass sich Label 1 den gesamten Platz in y-Richtung nimmt, den es beanspruchen kann, aber noch so viel Platz übrig lässt, dass Label 2 vollständig dargestellt werden kann.

Wenn man expand auf True setzt, muss man also nicht befürchten, dass die anderen Widgets innerhalb der GUI nicht mehr sichtbar sein werden, da es nur so viel Platz allokiert, dass die übrigen Widgets noch normal dargestellt werden können.

Jetzt könnte man auch auf die Idee kommen, beispielsweise Label 2 beim Aufruf der pack-Methode mitzuteilen, ebenfalls so viel Platz wie möglich zu allokieren. Das heißt, wir schreiben auch bei Label 2 expand und setzen dessen Wert auf True:

Wenn wir das Programm nun erneut ausführen, sehen wir, dass der Pack Layout Manager dafür sorgt, dass sich beide Widgets den möglichen Platz teilen:

Denn wir schreiben vor, dass die beiden Widgets so viel Platz wie möglich einnehmen sollen und pack ist so intelligent, dass es diesen Platz für beide gleich aufteilt. So erhält Label 1 50 Prozent und Label 2 ebenfalls 50 Prozent des Platzes.

Wie bei Label 1 können wir auch bei Label 2 fill auf y setzen:

Dann führen wir das Programm erneut aus uns sehen in der Ausgabe noch deutlicher, dass sich beide Labels den Platz zur Hälfte teilen:

10. Widgets in beide Richtungen ausbreiten

Bisher haben wir bei fill immer entweder den Wert x oder y zugewiesen. Es gibt allerdings noch einen weiteren Wert namens both, den wir zuweisen können. Damit sorgen wir dafür, dass es den Platz in beide Richtungen, also sowohl in x- als auch in y-Richtung füllt.

Das können wir beispielsweise bei Label 2 umsetzen, indem wir „y“ durch „both“ ersetzen:

Anschließend führen wir das Programm erneut aus und sehen, dass der gesamte Platz, der für Label 2 reserviert wurde, nun mit der roten Hintergrundfarbe dargestellt wird. Das liegt daran, dass das Label nun den komplett allokierten Platz verwendet.

11. Wann man auf fill verzichten kann

Man muss nebenbei bemerkt, wenn man expand verwendet, nicht zwangsläufig auch fill als Argument übergeben. Das heißt, wir könnten beispielsweise fill löschen, das Programm noch einmal ausführen und sehen dann, dass der Platz dennoch in zwei Hälften geteilt wird:

Es wird also dennoch der Platz entsprechend allokiert, allerdings erstreckt sich das Label nicht über den komplett allokierten Platz, sondern nutzt lediglich den minimalen Raum, den es benötigt, um den Inhalt sauber darstellen zu können.

Der Platz um das Label 1 herum ist aber immer noch für dieses reserviert.

12. Anmerkungen zum Schlüsselwortargument side

Damit hast du nun auch schon mal gesehen, wie sich pack verhält, wenn wir bei allen Widgets den Standardwert von side auf top setzen, was wir in jedem der eben vorgeführten Beispiele getan haben.

Wir können den Wert von side allerdings nicht nur auf top setzen, sondern auch auf bottom, sodass das Widget unten platziert wird. Auch left, also links und right (rechts) können wir angeben, um es an die jeweilige Position zu bringen.

Wenn man das so umsetzt und den Labels unterschiedliche side Values zuweist, bringt das in gewissen Konstellationen immer wieder bestimmte Implikationen mit sich.

Wie bereits erwähnt, sind im Python Tkinter Masterkurs sämtliche Fälle, die auftreten können, detailliert beschrieben und erklärt. In diesem Beitrag würde all das jedoch den Rahmen sprengen, weshalb es sich lohnt, einen Blick auf den Tkinter Masterkurs zu werfen.

An dieser Stelle empfehle ich dir, deine Entwicklungsumgebung zu öffnen und die eben gelernten Dinge selbst auszuprobieren. Denn nur so bekommst du ein Gefühl dafür, wie der Pack Layout Manager arbeitet. Ich weiß, dass das gerade anfangs etwas kompliziert klingt, aber wenn das Prinzip erst mal verstanden ist und du ein paar Widgets damit platziert hast, wirst du diesen intuitiv und ohne viel nachzudenken, nutzen können.

Inhaltsverzeichnis

1. Was wirst du in diesem Beitrag lernen?

2. Den Titel der Tkinter GUI modifizieren

Um den Titel der Applikation zu ändern, habe ich im ersten Schritt das „Hallo Welt“-Programm des letzten Blogartikels geöffnet:

Wenn wir das Programm noch einmal ausführen, sehen wir ein Hauptfenster, in welchem das Label „Hallo Welt“ platziert ist:

Ziehen wir das Fenster größer, dann sehen wir ganz oben zentriert den Titel „tk“:

Das ist der Titel, der immer standardmäßig beim Erzeugen eines Tk-Objekts vergeben wird. Verändern können wir diesen Titel mithilfe der Methode title().

3. Die title-Methode

Wir rufen also auf dem Tk-Objekt, auf das wir mit der Variable root referenzieren, die title-Methode auf. Dafür schreiben wir im Code folgendes:

Dieser Methode übergeben wir nun als Argument einen String, bei dem es sich um den gewünschten neuen Titel handelt. Beispielhaft schreibe ich dafür einfach mal „Hier steht der Titel“ zwischen die Klammern:

Wenn wir das Programm an dieser Stelle erneut ausführen und das Fenster direkt größer ziehen, sodass der Titel sichtbar wird, sehen wir, dass „tk“ tatsächlich durch den Titel „Hier steht der Titel“ ersetzt wurde.

Das funktioniert also schon mal!

Aktuell ist es allerdings noch so, dass beim Ausführen des Programms das Tkinter GUI Fenster automatisch nur so groß ist, wie es sein muss, um die Inhalte darin darstellen zu können.

Da es darin gerade nur das Label „Hallo Welt“ gibt, ist das Fenster extrem klein. Schließlich benötigt der Text „Hallo Welt“ nur sehr wenig Platz, um dargestellt werden zu können.

4. Die geometry-Methode

Wir können jetzt allerdings mithilfe der Methode geometry() selbst festlegen, wie groß das Fenster standardmäßig sein soll. Hierzu rufen wir ebenfalls auf dem tk-Objekt (root) die Methode geometry auf:

Als Argument müssen wir dieser Methode einen String übergeben, in welchem wir an erster Stelle die Breite in Pixel angeben, die das Tkinter GUI Fenster haben soll. Dafür lege ich beispielsweise 800 fest. Danach folgt ein "x" und anschließend die Höhe in Pixel, für die ich 400 wähle:

Wenn wir das Programm nun noch einmal ausführen, sehen wir, dass das Fenster jetzt nicht mehr so klein ist wie zuvor, sondern dass es jetzt exakt eine Breite von 800 Pixel und eine Höhe von 400 Pixel aufweist:

Würden wir die Werte tauschen, indem wir die Breite auf 400 Pixel und die Höhe auf 800 Pixel setzen, sähe das Fenster entsprechend anders aus:

Also genau umgekehrt. Wichtig zu verstehen ist, dass wir das Fenster mit der Maus weiterhin beliebig verziehen und dessen Größe ändern können, obwohl wir eine feste Größe angegeben haben.

Um das auch noch einzuschränken, stehen uns zwei weitere Methoden zur Verfügung, über welche wir sowohl die Maximal- als auch die Minimalgröße des Fensters festlegen können. Was ich damit meine, werde ich dir direkt anhand eines Beispiels zeigen.

Nehmen wir einmal an, das Fenster hat standardmäßig eine Größe von 400 x 400 Pixel.

Beim Ausführen des Programms sehen wir also diese Größe als Standardgröße unseres Fensters. Nun möchten wir, dass man das Fenster zwar weiterhin mithilfe der Maus vergrößern und verkleinern kann, allerdings soll die Bedingung integriert werden, dass das Fenster nicht kleiner gezogen werden kann als beispielsweise 250 x 250 Pixel.

Wir möchten damit also eine Mindestgröße definieren, die das Fenster nicht unterschreiten darf.

Das können wir mit der Methode minsize() ganz einfach umsetzen.

5. Die minsize-Methode

Dieser Methode können wir die beiden Schlüsselwortargumente width und height übergeben und jeweils den gewünschten Mindestwert in Pixel zuweisen.

Da wir möchten, dass die Breite und die Höhe des Fensters minimal 250 Pixel betragen, schreiben wir folgendes im Code:

Wenn wir das Programm nun noch mal ausführen, sehen wir weiterhin die Standardgröße unseres Fensters von 400 x 400 Pixel.

Ziehen wir das Ganze jetzt allerdings kleiner, geht das nur bis zu einem gewissen Punkt:

Der Versuch, das Fenster noch kleiner zu ziehen, scheitert. Das liegt daran, dass wir durch unseren Code die Größe 250 x 250 Pixel nicht unterschreiten können.

6. Die maxsize-Methode

Genauso könnten wir auch mithilfe der Methode maxsize() die Maximalgröße des Fensters vorgeben. Das heißt, wir rufen die Methode maxsize im Code auf und legen für die Breite (width) maximal 600 und für die Höhe (height) ebenfalls maximal 600 Pixel fest:

Wenn wir den Code so noch einmal ausführen, ist jetzt auch die Maximalgröße beschränkt. Das Fenster lässt sich also weiterhin mit der Maus vergrößern und verkleinern, allerdings nur zwischen dem Mindestwert von 250 x 250 Pixel und dem Maximalwert von 600 x 600 Pixel. Wenn du das Fenster nun versuchst, über den Maximalwert hinaus zu ziehen, wirst du merken, dass das nicht funktioniert.

Wir haben damit also zwei sehr nützliche Methoden, die man auf jeden Fall kennen sollte.

7. Die resizable-Methode

In manchen Fällen möchte man sogar, dass der Nutzer gar nicht die Möglichkeit hat, das Fenster zu vergrößern oder zu verkleinern.

In diesem Fall können wir die Methode resizable() verwenden und als Schlüsselwortargumente sowohl an width als auch an height jeweils den Wert False zuweisen:

Wenn wir das Programm jetzt erneut ausführen und versuchen, es zu vergrößern, sehen wir, es funktioniert nicht. Das Fenster lässt sich nicht einmal an der Ecke greifen. Mit der Methode resizable haben wir also dafür gesorgt, dass wir das Fenster weder in der Breite noch in der Höhe verändern können.

Wir könnten an dieser Stelle sogar festlegen, dass der Nutzer die Breite nicht verändern können soll, die Höhe hingegen schon. In diesem Fall weisen wir dem Schlüsselwortargument height nicht den Wert False zu, sondern den Wahrheitswert True:

Wenn wir das Programm an dieser Stelle ausführen, stellen wir fest, dass wir die Höhe verändern können, die Breite allerdings nicht.

Darüber hinaus gelten beim Verändern der Höhe weiterhin die Einschränkungen, die wir über die Methoden minsize und maxsize definiert haben.

Wir können das Fenster also maximal auf eine Höhe von 250 Pixel verkleinern und höchstens auf eine Höhe von 600 Pixel strecken, weil wir das so mithilfe der Methodenaufrufe minsize und maxsize sowie den entsprechenden Schlüsselwortargumenten vorgegeben haben.

Damit hast du gelernt, wie man die Größe des GUI Fensters modifizieren kann!

Inhaltsverzeichnis

1. Was passiert beim Starten der Tkinter Event Loop?

Mit dem Aufruf der mainloop()-Methode stoppt die Abarbeitung des Python Files an dieser Stelle und die Event Loop übernimmt.

2. Wann kommt es zu einem Event?

Damit öffnet sich das GUI-Fenster und das Programm prüft permanent, ob ein Event auftritt. Wenn der Nutzer die GUI an dieser Stelle einfach nur ansieht und keine Handlung vornimmt, entsteht logischerweise kein Event. Entschließt er sich allerdings dazu, mit der GUI zu interagieren, beispielsweise, indem er das GUI-Fenster größer zieht, dann erkennt die Event Loop ein Event.

In diesem Fall ist das Event die Veränderung der GUI-Fenstergröße. Im Hintergrund ist durch das Tk-Objekt implementiert, wie sich die GUI daraufhin verhalten soll. Dabei wurde in diesem Beispiel implementiert, dass sich das Fenster entsprechend vergrößert oder verkleinert, sobald der Nutzer mit der Maus daran zieht.

Ein weiteres Event würde stattfinden, wenn der Nutzer innerhalb der GUI etwas anklickt. Das wäre ein sogenanntes Klick-Event. Ebenfalls im Tk-Objekt implementiert ist, dass sich das Fenster schließt, wenn der Nutzer oben links auf das Kreuzsymbol klickt.

Was dabei eigentlich passiert ist, dass sich die Event Loop beendet.

3. Was passiert, wenn die Tkinter Event Loop beendet wurde?

Sobald die Event Loop beendet ist, geht es im Python File nach dem Methodenaufruf mainloop() ganz normal weiter. Da im aktuellen Beispiel nach dem Methodenaufruf kein Code mehr folgt, wird das Programm beendet.

Wir könnten nun unter dem Methodenaufruf mainloop() auch noch mithilfe von print eine Konsolenausgabe veranlassen, die den Text „Testausgabe“ anzeigen soll:

Wenn wir das Programm dann erneut ausführen, sehen wir, dass die Ausführung des Python Codes im File an der Stelle, an der wir die mainloop-Methode aufrufen, tatsächlich stoppt.

Denn wie wir sehen, gibt uns das Programm aktuell den String „Testausgabe“ noch nicht auf der Konsole aus:

Erst wenn wir das Fenster schließen, das sich geöffnet hat und damit die Event Loop beenden, arbeitet das Programm den Code ab, der danach folgt.

Daraufhin sehen wir also „Testausgabe“ in der Konsole:

Damit weißt du jetzt schon mal grob, was die Event Loop macht und wofür es sie gibt.

Kurzgesagt handelt es sich dabei um eine Endlosschleife, die konstant prüft, ob ein Event auftritt. Wenn ein Event auftreten sollte, können wir nach Belieben mithilfe unseres Programmcodes darauf reagieren.

Inhaltsverzeichnis

1. Wie ist dieses Python Tkinter Tutorial aufgebaut?

2. Was haben wir im letzten Tutorial umgesetzt?

Zunächst haben wir in der ersten Zeile unseres Programms das Modul Tkinter importiert und anschließend im Namensraum von Tkinter die _test-Methode aufgerufen:

Die _test-Methode sorgt dafür, dass ein Fenster erzeugt wird. Das sehen wir, wenn wir das Programm einmal ausführen:

Innerhalb dieses Fensters befindet sich der Text „This is Tcl/Tk version 8.6“ und darunter folgt eine weitere Zeile mit Text. Dann kommt ein Button mit der Aufschrift „Click me!“, auf welchen wir klicken können. Bei jedem Klick darauf erscheinen eckige Klammern um den Text:

Je öfter wir klicken, desto mehr eckige Klammern tauchen um die Button-Aufschrift auf.

Darunter sehen wir einen QUIT-Button, über welchen wir die Applikation schließen und somit das Programm beenden können.

Denn wenn wir testweise auf QUIT klicken, sehen wir, dass das Fenster verschwunden und das Programm vollständig durchgelaufen ist. Das lässt sich an der folgenden Zeile in der Konsole erkennen:

Das Programm wird im Übrigen genauso beendet, wenn wir oben im Fenster auf das x-Symbol klicken:

Wie du sehen kannst, setzt die test-Methode einiges im Hintergrund um und baut uns bereits eine erste funktionsfähige GUI zusammen. Anhand dieser können wir bereits die wichtigsten Grundbegriffe sowie den groben Aufbau einer Python Tkinter GUI-Anwendung erklären.

3. Das Hauptfenster

Bei jeder GUI müssen wir zunächst dafür sorgen, dass sich das Hauptfenster öffnet. Dabei handelt es sich um das eigentliche Fenster, das man wie die Fenster anderer gängiger Computeranwendungen vergrößern, minimieren und über das Kreuzsymbol schließen kann.

Das bedeutet, dass wir auch unser Python Tkinter Fenster, das beim Ausführen des Programms erscheint, schließen können. Darüber hinaus lässt es sich minimieren und vergrößern, sodass es den gesamten Bildschirm einnimmt.

Diese Möglichkeiten kennen wir auch von allen anderen Anwendungen, die bereits auf unserem Computer laufen.

Sobald wir das Hauptfenster selbst erstellt haben, müssen wir dieses noch mit sogenannten Widgets befüllen.

4. Python Tkinter Widgets

Widgets werden auch häufig als Controls bzw. als Steuerelemente bezeichnet. Gerade im Tkinter-Umfeld ist der gängige Begriff allerdings „Widget“.

Der Text, den wir beim Ausführen des Programms zu Gesicht bekommen, ist nichts anderes als ein Widget:

Nämlich ein sogenanntes Label Widget. Dabei handelt es sich um einen Baustein, den wir in unserer GUI verwenden können, um dort einfachen Text anzuzeigen.

Auch der „Click me!“-Button darunter ist ein Widget, genauer gesagt ein sogenanntes Button-Widget.

Mit dieser Art von Widget steht uns ein weiterer Baustein zur Verfügung, den wir in unserem Fenster platzieren können.

Neben Labels und Buttons gibt es noch zahlreiche weitere unterschiedliche Widgets. Einen Teil davon werden wir uns in diesem Crashkurs noch ansehen.

Falls du alle Widgets im Detail kennenlernen möchtest, kann ich dir an dieser Stelle unseren Python Tkinter Masterkurs empfehlen. Denn der Masterkurs geht bei allen Themen, die wir auch hier behandeln, noch deutlich weiter in die Tiefe. Zudem werden darin alle anderen Widgets, die wir hier nicht behandeln und auch weitere fortgeschrittene Themen im Detail besprochen.

Damit du ein besseres Verständnis dafür bekommst, wie das Ganze funktioniert, werden wir uns in diesem Beitrag eine GUI-Anwendung von Grund auf selbst bauen. Innerhalb des Fensters soll dann lediglich der Text „Hallo Welt“ angezeigt werden.

Hierzu löschen wir im ersten Schritt den test-Methodenaufruf:

5. Mit Python Tkinter ein GUI-Fenster erzeugen

Jetzt erzeugen wir uns erst mal ein GUI-Fenster. Doch wie funktioniert das? Wir müssen hierzu lediglich Folgendes schreiben:

Mit dieser Zeile erzeugt das Programm ein sogenanntes Tk-Objekt, welches das Hauptfenster unserer GUI darstellt. Die Referenz auf dieses Objekt speichern wir jetzt in einer Variable, die wir beispielhaft „root“ nennen:

Damit können wir im weiteren Verlauf des Programms über diese Variable auf das gerade erzeugte Tk-Objekt zugreifen. Mit dieser einzigen Zeile Code haben wir bereits das komplette GUI-Fenster erzeugt.

Wenn wir das Programm an dieser Stelle nun mal ausführen, sehen wir allerdings, dass gar kein GUI-Fenster erscheint. Das liegt daran, dass wir noch die sogenannte Tkinter Event Loop starten müssen.

6. Die Python Tkinter Event Loop

Wir starten diese über das Tk-Objekt, auf welches wir mit der Variable root referenzieren. Dazu schreiben wir also einfach noch die folgende Anweisung:

Damit rufen wir die mainloop-Methode auf, die dafür sorgt, dass die besagte Tkinter Event Loop gestartet wird.

Was die Event Loop im Detail macht, werden wir uns dann im nächsten Beitrag dieser Tutorial-Reihe ansehen. Wenn wir das Programm an dieser Stelle ausführen, siehst du, dass jetzt tatsächlich ein GUI-Fenster erscheint:

Wir haben es also geschafft und eigenständig ein GUI-Fenster erzeugt!

Dieses Fenster ist jetzt auch schon voll funktionsfähig und bietet wieder die Möglichkeit, es zu maximieren, zu minimieren und es über das Kreuzsymbol zu schließen.

Jetzt, da wir das Hauptfenster unserer GUI haben, müssen wir noch sogenannte Widgets darin platzieren.

7. Ein Label-Widget mit Tkinter erstellen

Da wir in diesem ersten Programm lediglich den Text „Hallo Welt“ ausgeben möchten, benötigen wir ein sogenanntes Label-Widget.

Ein solches Label-Widget-Objekt können wir uns ganz einfach mit Tkinter erzeugen. Dafür schreiben wir folgendes:

Mit dieser Zeile Code erzeugen wir uns ein Objekt von der Klasse Label, welchem wir im Konstruktoraufruf direkt noch Argumente mitübergeben können.

Das erste Argument des Label-Widgets

Das erste Argument, das wir angeben, ist der zugehörige Parent. In unserem Fall ist das die Referenz auf das TK-Objekt, welches unser Hauptfenster darstellt. Wir schreiben also zunächst zwischen die Klammern „root“:

Damit legen wir fest, dass wir das Widget im übergeordneten Hauptfenster platzieren möchten. Jedes Mal, wenn wir ein Widget erzeugen, geben wir als erstes Argument immer den Parent an.

Innerhalb dieses Crashkurses werden wir an der Stelle immer „root“ angeben, da das Hauptfenster erst mal der einzige Container ist, in dem wir Widgets platzieren können.

Was sind Python Tkinter Frame Widgets?

Sobald du dich aber weiter mit Tkinter auseinandersetzt, wirst du auch noch die sogenannten Frame Widgets kennenlernen. Dabei handelt es sich um weitere Untercontainer, in welchen wir ebenfalls Widgets platzieren können.

Dann hätten wir beispielsweise die Möglichkeit, innerhalb des Hauptfensters zwei weitere Container in Form von Frames zu setzen. Innerhalb dieser beiden weiteren Container könnten wir dann jeweils nochmals Widgets platzieren. In diesem Fall hätten die beiden Container das Hauptfenster als Parent und die Widgets hätten einen der beiden Container, die im Hauptfenster platziert sind, als Parent.

Das klingt zwar im ersten Moment ziemlich kompliziert, aber sobald du etwas Übung mit Tkinter hast, wirst du das Ganze automatisch und intuitiv anwenden können.

Wie bereits erwähnt, geben wir als Parent lediglich „root“ an.

Das zweite Argument des Label-Widgets

An zweiter Stelle übergeben wir das Schlüsselwort-Argument „text“. Der String „Hallo Welt“, den wir jetzt in unserem Beispiel zuweisen, wird später im Label-Widget als Text angezeigt.

Dieses Label-Objekt weisen wir jetzt noch einer Variable zu, damit wir im weiteren Programmverlauf auch Zugriff darauf haben. Die Variable nennen wir beispielhaft label1:

Wenn wir das Programm jetzt ausführen, fällt auf, dass wir den Text „Hallo Welt“ bisher noch nirgendwo sehen können:

Das liegt daran, dass wir der GUI noch mitteilen müssen, wie das Widget innerhalb des Parents, also in diesem Fall innerhalb des Hauptfensters angeordnet werden soll.

8. Der Layout-Manager „pack“

Das funktioniert mithilfe sogenannter Layout-Manager, von welchen unterschiedliche Arten existieren. Für unser Beispiel werden wir den einfachsten Layout-Manager verwenden, welchen wir mit der Methode „pack“ aufrufen können.

Wir geben also in der nächsten Zeile Code an, dass wir auf dem Label-Objekt die Methode pack aufrufen möchten.

Beim erneuten Ausführen des Programms sehen wir, dass das Label nun tatsächlich in der GUI platziert wurde und der Text „Hallo Welt“ erscheint:

Das Fenster ist jetzt automatisch nur so groß wie der Text, sodass es genau das anzeigen kann, was sich in der GUI befindet.

Aktuell befindet sich innerhalb des Hauptfensters lediglich das eben erzeugte Label-Widget, weshalb das Fenster auch nur genauso groß wie das Label ist. In diesem Fall ist das sehr klein, da der Text „Hallo Welt“ schließlich nicht sonderlich viel Platz benötigt.

9. Die Fenstergröße anpassen

Wir haben allerdings die Möglichkeit, das Fenster zu vergrößern, indem wir in eine Ecke klicken, woraufhin ein Pfeil erscheint und wir das Fenster mit der Maus größer ziehen können. So wie wir es bereits von anderen Anwendungen kennen, bei welchen wir ebenfalls die Größe mithilfe der Maus beliebig anpassen können.

Wenn wir das Fenster jetzt so vergrößern, wie ich es gerade getan habe, dann stellen wir fest, dass das Label durchgehend ganz oben zentriert angezeigt wird.  

Das liegt daran, dass der Layout-Manager pack standardmäßig dafür sorgt und es auf diese Weise anordnet. Wir könnten die Ausrichtung des Labels allerdings modifizieren, indem wir dem Layout-Manager mitteilen, dass es an einer anderen Stelle auf dem Fenster platziert werden soll.

Wie das genau funktioniert, wirst du noch in späteren Beiträgen ausführlich lernen.
So viel zum ersten „Hallo Welt“-Programm.

10. Die Abkürzung „tk“ als Alias setzen

Wenn wir uns den Code, den wir gerade geschrieben haben, noch einmal ansehen, wirst du vermutlich feststellen, dass wir bereits in diesem kurzen Programm sehr oft „tkinter“ schreiben mussten.

Der Grund dafür ist, dass sich unter anderem alle Funktionen und Klassen innerhalb des Tkinter-Namensraums befinden, den wir oben in der ersten Zeile importiert haben. Daher werden wir es uns jetzt etwas einfacher machen, indem wir den Namen „tkinter“ mit „tk“ abkürzen.

Damit müssen wir zukünftig anstatt „tkinter.“ nur noch „tk.“ schreiben, was uns sehr viel Zeit sparen und das Programm übersichtlicher machen wird.

Wie das funktioniert, weißt du bereits, wenn du den Python Masterkurs belegt haben solltest, denn wir müssen lediglich beim Import einen eigenen Alias vergeben. Das lässt sich folgendermaßen umsetzen:

Sobald wir das getan haben, wird „tkinter.“ überall im Programm rot unterkringelt:

Das liegt daran, dass der Namensraum jetzt nicht mehr „tkinter“ heißt, sondern durch den Alias den Namen „tk“ trägt.

Wir müssen jetzt also noch überall im Code den Namen „tkinter“ durch „tk“ ersetzen:

Beim erneuten Ausführen des Programms sehen wir, dass es wieder wie zuvor funktioniert.

11. Zusammenfassung

Du hast in diesem Beitrag anhand des „Hallo Welt“-Programms also den groben Prozess kennengelernt, mithilfe dessen man eine GUI-Anwendung in Python mit Tkinter erzeugen kann.

Im ersten Schritt müssen wir dafür das Tkinter-Modul importieren:

Im zweiten Schritt erzeugen wir dann ein Hauptfenster:

Daraufhin fügen wir im dritten Schritt die gewünschten Widgets, wie beispielsweise Labels und Buttons in das Hauptfenster ein:

Weitere Widgets werden wir im Laufe des Kurses noch kennenlernen.

Im vierten Schritt müssen wir dann noch auf dem Objekt des Hauptfensters die Event-Loop starten:

Und damit ist die GUI-Anwendung auch schon fertig!

Im nächsten Beitrag werden wir uns die Event-Loop noch etwas detaillierter ansehen, damit du auch verstehst, was diese eigentlich macht. Dabei handelt es sich nämlich um ein wichtiges Grundverständnis, welches beim Bauen von Applikationen mit Tkinter unerlässlich ist.

Inhaltsverzeichnis

1. Was wirst du in diesem Crashkurs lernen?

2. Was ist Tkinter?

Um diese Frage beantworten zu können, müssen wir uns das Ganze aus einer High Level Perspektive ansehen. Grundsätzlich setzt sich ein Computer bekanntermaßen aus sogenannter Hardware zusammen. Beispiele für Hardwarekomponenten eines Computers sind etwa die Festplatte, das Mainboard, der Prozessor, der Arbeitsspeicher, Laufwerke und das Netzteil.

Damit diese Hardware miteinander interagiert und du folglich einen funktionsfähigen Computer vor dir hast, ist allerdings noch ein Betriebssystem erforderlich.

Das Betriebssystem hat somit die Aufgabe, die Hardware deines Computers zu kontrollieren und zu verwalten.

Wenn du nun beispielsweise mit der Programmiersprache Python selbst Programme schreibst, möchtest du mit diesen Programmen bewirken, dass der Computer etwas für dich umsetzt.

Zum Beispiel könntest du den Computer mithilfe von Python dazu anweisen, bestimmte Berechnungen durchzuführen. Damit das gelingt, muss man auf irgendeine Art und Weise Zugriff auf die Hardware erlangen.

Bei höheren Programmiersprachen wie etwa Python ist es so, dass man damit nicht direkt auf die Hardware zugreift, sondern stattdessen unter Zuhilfenahme des Betriebssystems Zugriff darauf erhält.

Das Betriebssystem stellt damit gewisse Services bereit, die wir mithilfe der Programmiersprache Python ansprechen können. Anschließend erledigt das Betriebssystem unsere Anweisungen, die wir über Python formuliert haben und greift entsprechend auf die Hardware des Computers zu.

Es handelt sich dabei also um eine Art Schichten-Modell, weshalb ich den Inhalt der folgenden Abbildung übereinandergeschichtet dargestellt habe:

Dabei bietet jede Schicht der darüberliegenden Schicht gewisse Dienste an.

Wenn wir jetzt aber grafische Benutzeroberflächen programmieren möchten, dann reichen die Services des Betriebssystems allein nicht aus. Python benötigt nämlich weitere Services, die es sich hierfür zunutze machen kann.

3. Tcl/Tk

Einer dieser weiteren Services ist Tcl/Tk. Tcl steht für „Tool command language“ und es handelt sich dabei um eine Skriptsprache mit eigenem Interpreter.

Tk wiederum steht für „Toolkit“, welches man für die Erstellung von grafischen Benutzeroberflächen verwendet.

Tcl/Tk stellt nun also Services zur Verfügung, die ermöglichen, Anwendungen mit grafischen Benutzeroberflächen zu bauen. Es gibt allerdings ein Problem: Tcl/Tk erlaubt Python nämlich nicht direkt die eigenen Services zu nutzen. Wenn wir also über Python Zugriff auf die Services von Tcl/Tk erhalten möchten, benötigen wir einen weiteren Vermittler dazwischen.

Dieser Vermittler ist Tkinter, das für „Tk Interface“ steht und was letztendlich Hauptthema dieses Crashkurses sein wird.

4. Welchen Vorteil haben wir durch Tkinter?

Mithilfe von Tkinter können wir die Services von Tcl/Tk nutzen, womit uns ermöglicht wird, ansprechende GUI-Anwendungen in Python sowohl für Windows als auch für Mac zu entwickeln.

Der Vorteil dabei ist, dass wir uns als Python-Entwickler nicht in Tcl/Tk einarbeiten, sondern lediglich verstehen müssen, wie wir mit Tkinter arbeiten können.

Denn Tkinter sorgt dafür, dass alles, was wir als Python-Entwickler zur Entwicklung einer GUI benötigen, als Objekt für uns in Python verfügbar ist.

Was bedeutet das konkret? Wenn wir eine GUI bauen, besteht diese beispielsweise aus einem Hauptfenster und dieses wird über die Services von Tcl/Tk erschaffen. Dieses Fenster ist für uns Python-Entwickler dabei nichts anderes als ein Objekt, mit welchem wir in Python innerhalb unseres Codes arbeiten können.

Jetzt, wo du weißt, was Tkinter ist und wie es konzeptionell einzuordnen ist, müssen wir als Python-Entwickler nur noch dafür sorgen, dass wir unseren Code so aufsetzen, dass wir Tkinter verwenden können.

5. Voraussetzungen für die Nutzung

Grundsätzlich müssen wir hierfür lediglich Python und eine geeignete Entwicklungsumgebung installieren. Im ersten Teil unseres allgemeinen Python-Crashkurses haben wir diese Installation ausführlich erklärt. Dieses Video sowie den zugehörigen Blogartikel, in welchem dir die Installation Schritt für Schritt anhand von Bildern gezeigt wird, kannst du dir gerne (nochmals) ansehen.

Im weiteren Verlauf des Kurses gehen wir davon aus, dass du Python korrekt installiert und ein normales Projekt in PyCharm angelegt hast. Das wird dir, wie bereits erwähnt, im Video sowie im Blogbeitrag im Detail erklärt.

Um nun mithilfe von Tkinter grafische Benutzeroberflächen bauen zu können, müssen wir dieses lediglich in unserem Projekt importieren. Das gestaltet sich denkbar einfach, da Tkinter ein sogenanntes built-in-module ist. Es wird also bereits mit deiner installierten Python-Version ausgeliefert, sodass du dieses Modul nicht mehr extra nachinstallieren musst.

6. Tkinter importieren und testen

Wir schreiben also lediglich oben in unserem Python File den folgenden Importbefehl:

Das war es auch schon! Damit haben wir nun die Möglichkeit, innerhalb dieses Files mit Tkinter zu arbeiten. An dieser Stelle ergänzen wir testweise noch die folgende Anweisung im Code:

Wir rufen damit im Namensraum von Tkinter die _test-Methode auf, die uns ermöglicht zu prüfen, ob alles korrekt funktioniert.

Denn wenn wir das Programm an dieser Stelle einmal ausführen, sollte das folgende Fenster erscheinen:

Wenn dieses Fenster auftaucht, bist du auch schon bereit für den kompletten Crashkurs.

Falls das Fenster hingegen nicht erscheinen sollte, hast du Python entweder nicht installiert oder du nutzt möglicherweise eine sehr alte Version von Python. In diesem Fall empfehle ich dir, die aktuellste Python-Version noch mal komplett neu zu installieren.

Wie das funktioniert, ist in diesem YouTube-Video bzw. Blogartikel detailliert beschrieben.

Jetzt, da wir alle Vorbereitungen getroffen haben, können wir im nächsten Beitrag direkt loslegen.