GUI in Python erstellen mit Tkinter

in diesem Video möchte ich dir zeigen wie du in Python eine kleine GUI bauen kannst ohne dass du dir irgendwelche anderen Bibliotheken noch extra installieren musst alles ist schon out of the box wir werden tickinter nutzen und du erfährst wie du ein Fenster erzeugst wie die Logik beim Programmieren einer GUI sich so grundsätzlich gestaltet und natürlich auch wie man einen Button darauf implementiert der wenn man den klickt eine bestimmte Funktionalität ausführt ich habe dir bereits gesagt dass du dir dafür nichts extra installieren musst denn ti hinter das ist das Framework bzw die Bibliothek die wir nutzen werden das zu programmieren standardmäßig von Python schon mitgeliefert wird aber falls du das zwischenzeilich mal gelöscht haben solltest oder es doch zu Problemen kommen sollte dann zeige ich dir wie du das installieren kannst dazu öffnest du einfach die CMD und gibst ein PIP install TK dann auf Enter drücken und dann wird ti kindinter runtergeladen und auf deinem System installiert die Frage ist jetzt natürlich wie programmiert man mit tinter eine nun das ist ein sehr komplexes Thema wir werden uns jetzt erstmal darauf beschränken ein kleines Fenster zu erzeugen ind dem ein Button abgebildet ist und da drückt man dann drauf und dann wird irgendeine Funktionalität ausgeführt gut um erstmal mit tiinter arbeiten zu können müssen wir uns das ganze importieren dazu schreiben wir in eine Python Datei ich habe die jetzt hier gui.py genannt kannst du natürlich nennen wie du möchtest dort schreibe ich jetzt erstmal den importbefehl rein Import Tkinter S k dieses Stk das ist der Alias das ist auch gleichzeitig ein kanonischer Name nennt man das das heißt genauso wie du numy in Python immer mit NP oder pendas mit PD importierst wird Tkinter für gewöhnlich mit TK importiert mit dem Alias das heißt wir haben dann weniger Schreibaufwand und wenn du das irgendeinem anderen Entwickler gibst dann weiß der auch was mit diesem TK gemeint ist wir werden die GU jetzt im Hauptprogramm entwickeln du kannst das ganze natürlich auch objektorientiert machen aber wir wollen es jetzt hier möglichst einfach erstmal halten wenn du näheres zur pythenprogrammierung erfahren möchtest dann kann ich hier natürlich mein Buch pyen für Einsteiger empfehlen mit zahlreichen Übungsaufgaben Projekten etc etc das n so als kleiner Einschub da gibt's auch ein sehr ausführliches Kapitel zur objektorientierten Programmierung aber hier soll es ja um die GUI Programmierung in Tkinter im Hauptprogramm gehen und deswegen definieren wir jetzt erstmal den Bereich dem unser Hauptprogramm steht also schreiben wir if_ name und ist gle_ main_ falls ihr diese Zeile hier nicht sagen sollte dann bitte unten in die Videobeschreibung schauen da habe ich ein Video wo ich ganz ausfühlich erkläre was es damit auf sich hat danach programmieren wir jetzt eingerückt mit zwei leerrzeichen du kannst natürlich auch einen Tab verwenden den GUI Code wichtig ist dass du das ganze konsistent einrückst und nicht leerrzeichen und Tabulatoren irgendwie miteinander mischst ja den Python im Vergleich zu anderen Programmiersprachen wie Java oder C verlässt sich nicht darauf dass du irgendwie am Ende eine Anweisung ein Semikolon schreibst sondern die Einrückungen sind hier das mit dem erkannt wird dass jetzt hier gerade ein bestimmter Code zu anderem Code gehört gut was schreiben wir jetzt hier rein nun wir werden uns zunächst ein mal ein Hauptfenster instanzieren ja das geht ganz einfach das kannst du dir auch merken das eigentlich bei jeder GUI Programmierung so du wickelst erstmal ein Hauptfenster das nennen wir root sozusagen das wurzelf F wenn man so möchte und das erzeugst du dir indem du auf TK das ist die Bibliothek die wir uns hier oben importiert haben einfach den Konstruktor TK aufrufst damit erzeugst du jetzt ein Hauptfenster musst ja so eine GUI vorstellen wie ein Fenster in dem jetzt einzelne Elemente platziert werden und dieses Hauptfenster dieses root Hauptfenster das ist sozusagen das inem jetzt die ganze Magie dann später stattfindet denn immer wenn wir ein GUI Element erzeugen wollen wie z.B ein Button ein Label ein Eingabefeld oder irgendetwas anderes dann muss immer angegeben wo genau das dann platziert wird und das ist eben in unserem Fall dieses Hauptfenster root um die GUI dann letztendlich beim Programmstart auch sichtbar zu machen müssen wir noch einen weiteren Befehl bzw eine Methode auf diesem Hauptfenster root aufrufen nämlich die Methode Main Loop okay das ist jetzt eine Methode keine Funktion weil wir das auf unserem Objekt auf unserem rootobjekt aufrufen dass wir hier oben quasi gerade instanziiert haben okay dann würde ich sagen testen wir unser Programm direkt einmal ich habe jetzt hier die CMD geöffnet und gibt dort den Befehl Python ein dahinter gui.py das ist der Name des Programms in dem wir gerade eben den GUI Code geschrieben haben den ersetzt du natürlich dich das wo du jetzt dein Programm reingeschrieben hast kann ja auch irgendwie anders als gui.py heißen und dann drückst du auf Enter und du siehst hey es öffnet sich ein Fenster sehr schön du hast gerade so eine Art hallo Welt für die GUI Programmierung entwickelt das ganze wollen wir aber natürlich noch ein bisschen ausbauen denn du siehst dass hier beispielsweise einfach nur TK als Fenstertitel steht das wollen wir ändern und das können wir relativ einfach ändern indem wir auf unserem rootobjekt eine weitere Methode aufrufen die sich passenderweise title nennt und in diese Methode title weil die rufen wir jetzt wieder auf einem Objekt nämlich unserem rootobjekt auf dort können wir jetzt unseren Titel für das Fenster eintragen und zwar als String dort gebe ich jetzt z.B ein hallo Tkinter Ausrufezeichen ich speicher das Ganze ab um das Programm erneut zu starten gehen wir wieder zurück in die CMD und holen den Befehl zum Starten des Programms mit einem Klick auf die Pfeiltaste nach oben zurück drücken auf Enter und dann siehst du super es öffnet sich wieder das guienster und es wird auch ein Titel angezeigt allerdings steht jetzt hier nur halall Punkt Punkt Punkt und das ist ein Problem denn wir wollen ja dass das gesamt der gesamte Titel angezeigt wird und warum das jetzt hier nicht passiert ist liegt einfach daran dass das Fenster nicht die richtigen Maße hat wir könnten das jetzt hier natürlich einfach verschieben dann würde das hier auch stehen es wäre aber viel cooler wenn wir beim Programmstart direkt ungefähr diese Fenstergröße bekommen und um das zu realisieren gibt es natürlich auch wieder eine eigene Methode die wir jetzt hier auf unserem root Objekt aufrufen können und diese Methode heißt geometry und in diese geometry e da geben wir jetzt einen String ein der die Maße des Fensters in Pixeln angibt okay also wir schreiben jetzt hier einmal doppelte Anführungszeichen für einen String und jetzt kommen zuerst die Pixelanzahl für die Breite des Fensters es geht immer Breite Höhe so wie du das auch von den klassischen Auflösungen von dem Fernseher oder von deinem Bildschirm kennst 1920 x 1080 Pixel das heißt wir haben 1920 Pixel Breite und 100 Pixel Höhe gut wir gehen jetzt hier aber natürlich nicht 1120 und 1080 ein sondern wir wollen als pixelbreite beispielsweise 500 haben und die Höhe des Fensters die soll 200 Pixel sein jetzt siehst du dass ich diese beiden Werte Breite und Höhe durch so ein X getrennt habe das musst du auch machen damit hier dieser String übergeben wird also korrekt übergeben wird dieser Methode geometry und das ganze dann auch richtig gerändert wird beim Start also wieder zurück in die CMD ftaste nach oben den vorherigen Befehl zurückzuholen Enter drücken und dann siehst du diesmal wird das tickinter Fenster direkt mit den richtigen Maßen geöffnet und wir haben jetzt hier das hallo tik hinter den Titel des Fensters sichtbar in unserer GUI vorhanden okay jetzt habe ich dir gesagt dass wir in dieser GUI auch einen Button platzieren wollen und das können wir ganz einfach machen indem wir ein weiteres Widget so nennen sich die einzelnen guielemente die man in einer tikinter GUI platzieren kann erzeugen und zwar passenderweise einen Button und wo speichern wir den natürlich in einer Variable namens Button wir müssen uns nichts weiteres importieren mit TK ist alles schon vorhanden und wir können jetzt hier einen Button erzeugen dem wir auf TK das war der Input von hier oben einfach den Konstruktor Button aufrufen das ist relativ einfach oder wir müssen darauf achten dass wir jetzt erstm sagen müssen wo soll denn dieser Button überhaupt platziert werden ich habe ja gesagt es gibt so dieses Hauptfenster dieses root was wir uns hier in Zeile 4 erzeugt haben und dort soll natürlich auch unser Button später drin vorhanden sein das heißt der erste Parameter den wir so einem Widget was wir hier z.B mit Button erzeugen da gibt's noch weitere wie entry textfield etc etc erzeugen da geben wir jetzt als ersten Parameter unser Hauptfenster rein also unser root jetzt wollen wir dass auf dem Button auch was drauf steht den typischerweise hast du nicht einfach nur einen nackten Button sondern da steht z.B sowas drauf wie drücke mich okay und das machen wir jetzt hier auch indem wir mit einem Komma getrennt diesem Konstruktor Button einen weiteren Parameter geben nämlich den sogenannten Textparameter und der gibt jetzt an welcher Text auf dem Button drauf stehen sollen ich habe ja schon gesagt wir können das z.B drück mich nennen und wenn ich das ganze jetzt Speicher das Programm erneut über die CMD starte dann siehst du dass du nichts siehst wo ist denn unser Button wir haben doch gerade einen Button erzeugt und das liegt daran dass in der GUI Programmierung die Platzierung der Widgets und das Eintragen der Widgets in die GUI an zwei verschiedenen Stellen stattfindet ja wir könnten jetzt hier theoretisch auch noch weitere Widgets direkt implementieren also sowas wie ein eingabefelden den der Benutzer dann z.B seinen Namen einträgt etc und das dann erst ganz viel später im Code tatsächlich in der GUI platzieren okay und genau dieses in der GUI platzieren das machen wir jetzt mal hier in unserem einfachen Beispiel direkt dahinter nämlich indem wir auf unserem Widget dass wir hier im Programm in der Variable Button gespeichert haben die Methode Pack aufrufen okay es gibt neben Pack noch weitere Methoden die das ganze dann auch so ein bisschen in den Raster einbetten Pack kannst du dir merken das nimmt einfach die guielemente in der Reihenfolge wie sie jetzt hier im Code dann auch geschrieben werden wenn du jetzt noch ein zweiten Button hast könnst du dann Button 2.pack oder entryfield.pack machen und die werden einfach alle untereinander geschrieben gut das eigentlich relativ einfach wenn wir später weitere komplexere Programme schreiben da kannst du gerne mal unten in die Kommentare schreiben ob du dir da weitere Tutorials zu wünscht zur tikinter Programmierung oder zu GUI Programmierung und Python dann können wir da noch auf weitere Parameter auch eingehen die diese Methoden hier haben können aber um das ganze jetzt zu testen ich speichere das hier ab gehe ich wieder zurück in die CMD und einmal ptaste nach oben den Befehl pythoni.p zurückzurufen Enter drücken und du siehst jetzt gibt es das Fenster zusammen mit einem Button drück mich okay ich drücke aber es passiert natürlich noch nichts das wollen wir jetzt aber ändern um beim Klick auf den Button eine bestimmte Funktionalität auszulösen gibt es einen weiteren Parameter den wir jetzt hier unserem Button Konstruktor übergeben können nämlich der sogenannte command Parameter und der Command Parameter der bekommt jetzt den Namen einer Funktion die beim Klick auf den Button aufgerufen werden soll wir haben jetzt noch keine Funktion wir wollen aber gleich eine Funktion schreiben und die nennen wir z.B hallo sagen okay jetzt musst du darauf achten dass wir hier kein String übergeben also der Name der Funktion der wird nicht als String sondern einfach direkt als ja nackter Name wie so ein Variablenname quasi dahinter geschrieben du siehst aber auch schon wenn wir hier drüber haffern diese Funktion hallo sagen die gibt's noch nicht die müssen wir jetzt noch schreiben das machen wir jetzt außerhalb unserer unseres Hauptprogramms hier oben und da gebe ich jetzt z.B ein def hallo sagen also ich schreibe jetzt eine Funktion hallo sagen und die macht jetzt erstmal nichts anderes als hallo Welt auszugeben okay also wir haben jetzt hier eine Funktion implementiert diese heißt hallo sagen die wird beim Button aufgerufen wenn man da drauf klickt und zwar übergeben wir das diese Funktionsnamen dem command Parameter unseres Button Konstruktors und dieser Button wird dann hier tatsächlich erst in der GUI platziert und wenn wir da drauf klicken dann wird die Funktionalität hallo weltausgeben aufgerufen dann würde ich sagen testen wir das ganze doch einfach mal also das Programm erneut starten jetzt haben wir wieder unseren Button drück mich da klicke ich drauf und jetzt sehe ich ja gut es wird in der CMD hallo Welt ausgegeben das ist zwar schön aber es wäre doch viel cooler wenn wir so eine Art Fenster hätten dass ich jetzt öffnet und dort wird dann angegeben was dort jetzt gerade an der CMD uns angezeigt wird du hast es Dir bestimmt schon gedacht natürlich können wir auch das relativ einfach implementieren indem wir hier statt der einfachen Ausgabe mit der printfunktion die immer in die CMD schreibt das könntest du für so diebug loocks beispielsweise nutzen eine Message Bo erzeugen und zwar eine infoessage Box dafür brauchen wir jetzt aber einen weiteren Import nämlich wir müssen von Tkinter das Modul Messagebox importieren okay also from Tick hinter Import Message Box jetzt haben wir Zugriff auf die ganzen messagebxen die es gibt und da gibt's verschiedene da gibt's infoessage Boxen da gibt es error message Boxen da gibt es warning message Boxen und die werden alle mit verschiedenen Icons dann auch optisch voneinander getrennt wir wollen jetzt eine infomessage Box haben deswegen wir löschen jetzt einmal diese Zeile hier raus rufen wir auf Messagebox was wir uns hier in Zeile 2 gerade von tikinter importiert haben die Methode Show Info auf und du siehst schon sobald ich hier Show eingebe wird mir angezeigt was es da zur Auswahl gibt nämlich einmal diese Infobox dann unsere errorbox und unsere warning Box ich gebe jetzt hier Show Info ein und diese Show infothode die bekommt jetzt zwei Parameter nämlich einmal den Titel der oben in dem Fenster der Box stehen soll das könnte jetzt hier z.B Begrüßung sein und dann einen zweiten Parameter der ebenfalls ein String ist und da schreiben wir jetzt rein was in der messagebx selbst angezeigt werden soll also unsere Begrüßung von vorhin hallo Welt Ausrufezeichen nicht vergessen immer dann wenn du mehrere Parameter übergibst dann hier mit einem Komma voninander drenn ich habe das hier jetzt optisch ein bisschen anders dargestellt als sonst werden das auch alles in eine Zeile schreiben können wir hätten auch hier bei der Definition des Buttons das alles hintereinander schreiben können ich persönlich bin aberi eher ein Freund davon man das untereinander schreibt weil man dann einfach als Leser den Überblick besser behält python ist es aber tatsächlich egal wie du das reinschreibst wichtig ist nur dass du das ganze Komma separierst okay so und jetzt probieren wir das noch mal aus ob sich da jetzt irgendetwas geändert hat wir starten unser Programm erneut wir haben wieder die GUI die sich öffnet und ich klicke jetzt hier auf drück mich und dann siehst Du wir bekommen ein Infofenster das erkennst du daran dass hier ein I mit einem blauen Kreis zu sehen ist und dahinter direkt die Nachricht die ausgegeben werden soll die zuvor hier in unserer CMD zu finden war ganz oben findest du den Titel den wir als ersten Parameter der Methode Show Info gegeben haben nämlich Begrüßung und das war's eigentlich auch schon für dieses kleine Einführungstutorial in das Thema GUI Programmierung wenn du dir weitere Videos aus dieser Reihe wünschst dann gerne mal unten in die Kommentare schreiben auch was du gerne wissen möchtest zum Thema GUI Programmierung weil das ist ein ziemlich komplexes Feld ich habe übrigens jetzt ein weiteres Buch geschrieben nämlich Python Projekte für Einsteiger das möchte ich jetzt an der Stelle schon mal ankündigen ungefähr 5 600 Seiten stark mehrere Projekte die sich alle auch um diese GUI Programmierung drehen und da ist das ganze dann auch thematisch noch mal ein bisschen mehr aufgedröselt was für verschiedene GUI Elemente es da gibt und so weiter aber falls du trotzdem hier auf Youtube solche Informationen auch haben möchtest und dir nicht das Buch kaufen willst dann gib gerne mal unten in den Kommentaren Bescheid was du dir da thematisch wünst ansonsten würde ich sagen vielen Dank fürs zusehen und wir sehen uns im nächsten Video wieder bis dann und ciao