Grophical User Interfaces, sogenannte GUIs sind seit vielen Jahren der Standard. Ob per Touchscreen auf dem Handy oder mit der Maus am Computer – wir drücken Knöpfe, laden Webseiten, scrollen und klicken.

Objekte

Fast immer sind die Elemente eines GUIs (Fenster, Eingabefelder, Buttons, …) Objekte, deren Methoden und Eigenschaften in Klassen – meist auch mit Hilfe von Vererbung – definiert sind.

Beispiel eines Fensters mit weiteren Elementen^[1]

Weil man die meisten Elemente irgendwie im Fenster platzieren muss und sie dadurch viel gemeinsam haben, so können die gemeinsamen Eigenschaften und Methoden von einer gemeinsamen Oberklasse weitervererbt werden.

tkinter

tkinter ist die Standard-Schnittstelle von Python zum Tcl/Tk GUI toolkik, der für Windows, macOS und Linux verfügbar ist. Mit tkinter können grafische Oberflächen für Python-Programme plattformunabhängig erstellt werden.

Beispiel

Das folgende Beispiel erzeugt ein Fenster mit 2 Buttons und einem Label (Textausgabe). Das Beispiel ist auch als Klasse (erbt von TK) implementiert.

Aufgabe

Schau dir die Beispiele an und versuche zu verstehen, was da geschieht. Du kannst dazu das Programm auch ausführen und austesten!

gui-test.py

import tkinter as tk

def increase():
    value = int(lbl_value["text"])
    lbl_value["text"] = str(value + 1)

def decrease():
    value = int(lbl_value["text"])
    lbl_value["text"] = str(value - 1)

window = tk.Tk()

window.rowconfigure(0, minsize=50, weight=1)
window.columnconfigure([0, 1, 2], minsize=50, weight=1)

btn_decrease = tk.Button(master=window, text="-", command=decrease)
btn_decrease.grid(row=0, column=0, sticky="nsew")

lbl_value = tk.Label(master=window, text="0")
lbl_value.grid(row=0, column=1)

btn_increase = tk.Button(master=window, text="+", command=increase)
btn_increase.grid(row=0, column=2, sticky="nsew")

window.mainloop()

gui-test-oop.py

import tkinter as tk


class Application(tk.Tk):
    
    def __init__(self):
        super().__init__()
        self.title( "TITLE")    
        
        self.rowconfigure(0, minsize=50, weight=1)
        self.columnconfigure([0, 1, 2], minsize=50, weight=1)
        
        self.btn_decrease = tk.Button(self, text="-", command=self.decrease)
        self.btn_decrease.grid(row=0, column=0, sticky="nsew")

        self.lbl_value = tk.Label(self, text="0")
        self.lbl_value.grid(row=0, column=1)

        self.btn_increase = tk.Button(self, text="+", command=self.increase)
        self.btn_increase.grid(row=0, column=2, sticky="nsew")
        
    def increase(self):
        value = int(self.lbl_value["text"])
        self.lbl_value["text"] = str(value + 1)

    def decrease(self):
        value = int(self.lbl_value["text"])
        self.lbl_value["text"] = str(value - 1)


app = Application()
app.mainloop()

Auftrag

Wir wollen nun versuchen einen Taschenrechner zu programmieren. Als Basis dazu dient eines der obenstehenden Python-Skrpte.

Aufgabe: Schritt 1 (Layout)

Für unser Layout brauchen wir 4 Spalten und 4 Zeilen

• in der ersten Zeile soll das Label stehen (Display des Rechners)
• erstelle neun Buttons nummeriert von 0 bis 9, angeordnet in 3 Reihen und 3 Spalten. - Die Buttons sollen wie wir’s vom Taschenrechner gewohnt sind, angeordnet sein.
• in der letzten Spalte kannst du Plus-, Minus- und Gleich-Button hinzufügen.

Aufgabe: Schritt 2 (Zahleneingabe)

Die Buttons 0-9 sollen der aktuell im Display stehenden Zahl eine Ziffer anhängen:

• schreibe Funktionen/Methoden die das tun
• registriere diese Funktionen/Methoden bei den entsprechenden Buttons als Command

Aufgabe: Schritt 3 (Rechnen)

Nun soll gerechnet werden!

• programmiere eine Plus-Funktion (oder -Methode)
• registriere diese beim entsprechenden Button
• programmiere eine Gleich-Funktion (oder -Methode)
• registriere diese beim entsprechenden Button

mehr

Du Plus-Funktion

• muss sich merken, dass nun addiert wird
• muss sich die momentan eingegebene Zahl merken
• muss das Display zurückstellen, damit eine zweite Zahl eingegeben werden kann

Die Gleich-Funktion

• muss sich an die aktuelle Rechenoperation erinnern (Plus, Minus, …)
• muss die gespeicherte Zahl mit der im-Display-stehenden Zahl verrechnen
• muss das Ergebnis im Display anzeigen
• alles vorbereiten für weitere Berechnungen

Zusatzaufgabe: Erweiterungen

Ergänze deinen Rechner wie du willst:

• Farbige Buttons
• Eingabe von Dezimalbrüchen
• Weitere zweistellige Operationen (Mal, Hoch, Durch, …)
• Einstellige Operationen (Quadrieren, Quadratwurzel-Ziehen, Negieren, …)
• Umgekehrte Polnische Notation (mit Stack)
• …

---

1. GhostCarrot via Wikimedia Commons (GNU General Public License) ↩︎