Erkundung - Analyse einer grafischen Benutzeroberfläche
Die Benutzeroberfläche zum Programm "Anhalteweg"
Mit dem Programm "Anhalteweg" kann ein Benutzer testen, wie gut er/sie den Anhalteweg eines Autos abschätzen kann.

Aufgabe 1
(a) Teste das Programm gui_anhalteweg.pyw.
(b) Eine Benutzeroberfläche ist in der Regel aus verschiedenen grafischen Komponenten aufgebaut. Oft findet man darunter Schriftfelder (Label-Komponenten), Eingabefelder (Entry-Komponenten) und Schaltflächen (Button-Komponenten). Welche dieser Komponenten kommen in der gezeigten Benutzeroberfläche vor? Welche Funktion erfüllen sie - welche dienen zur Eingabe, Verarbeitung und Ausgabe von Daten, welche zur Information des Benutzers?
(c) Eine Benutzeroberfläche bietet einem Benutzer in der Regel verschiedene Möglichkeiten der Interaktion an. Welche Aktionen kann ein Benutzer hier ausführen?
Der Quelltext zur Benutzeroberfläche
Wir betrachten hier den Quelltext zur oben gezeigten Benutzeroberfläche. Aber Achtung, dieser Quelltext ist recht lang!
from tkinter import * def wegberechnungen(geschwindigkeit): reaktionsweg = (geschwindigkeit/10)*3 bremsweg = (geschwindigkeit/10) * (geschwindigkeit/10) anhalteweg = reaktionsweg + bremsweg return (reaktionsweg, bremsweg, anhalteweg) def Button_Berechnen_Click(): # Übernahme der Daten geschwindigkeit = float(entryGeschwindigkeit.get()) # Verarbeitung der Daten (reaktionsweg, bremsweg, anhalteweg) = wegberechnungen(geschwindigkeit) # Anzeige der Daten anzeigeReaktionsweg = '{0:.2f}'. format(reaktionsweg) labelWertReaktionsweg.config(text=anzeigeReaktionsweg) anzeigeBremsweg = '{0:.2f}'. format(bremsweg) labelWertBremsweg.config(text=anzeigeBremsweg) anzeigeAnhalteweg = '{0:.2f}'. format(anhalteweg) labelWertAnhalteweg.config(text=anzeigeAnhalteweg) # Erzeugung des Fensters tkFenster = Tk() tkFenster.title('Anhalteweg') tkFenster.geometry('300x287') # Rahmen für die Überschrift frameUeberschrift = Frame(master=tkFenster, background='#889E9D') frameUeberschrift.place(x=5, y=5, width=290, height=45) # Rahmen für die Eingaben frameEingaben = Frame(master=tkFenster, background='#D5E88F') frameEingaben.place(x=5, y=55, width=290, height=72) # Rahmen für die Verarbeitung frameVerarbeitung = Frame(master=tkFenster, background='#FBD975') frameVerarbeitung.place(x=5, y=132, width=290, height=44) # Rahmen für die Ausgaben frameAusgaben = Frame(master=tkFenster, background='#FFCFC9') frameAusgaben.place(x=5, y=181, width=290, height=101) # Label für die Überschrift labelUeberschrift = Label(master=frameUeberschrift, background='white', text='Anhalteweg eines Autos') labelUeberschrift.place(x=50, y=12, width=190, height=20) # Label mit Aufschrift Geschwindigkeit labelGeschwindigkeit = Label(master=frameEingaben, background='white', text='Geschwindigkeit [in km/h]') labelGeschwindigkeit.place(x=10, y=10, width=175, height=20) # Entry für die Geschwindigkeit entryGeschwindigkeit = Entry(master=frameEingaben) entryGeschwindigkeit.place(x=210, y=10, width=60, height=20) # Label mit Aufschrift geschätzter Anhalteweg labelGeschaetzterAnhalteweg = Label(master=frameEingaben, background='white', text='geschätzer Anhalteweg [in m]') labelGeschaetzterAnhalteweg.place(x=10, y=40, width=175, height=20) # Entry für den geschätzten Anhalteweg entryGeschaetzterAnhalteweg = Entry(master=frameEingaben) entryGeschaetzterAnhalteweg.place(x=210, y=40, width=60, height=20) # Button Berechnen buttonBerechnen = Button(master=frameVerarbeitung, text='berechnen', command=Button_Berechnen_Click) buttonBerechnen.place(x=95, y=12, width=100, height=20) # Label mit Aufschrift Reaktionsweg labelReaktionsweg = Label(master=frameAusgaben, background='white', text='Reaktionsweg [in m]') labelReaktionsweg.place(x=10, y=10, width=175, height=20) # Label für den Wert des Reaktionswegs labelWertReaktionsweg = Label(master=frameAusgaben, background='white', text='') labelWertReaktionsweg.place(x=210, y=10, width=60, height=20) # Label mit Aufschrift Bremsweg labelBremsweg = Label(master=frameAusgaben, background='white', text='Bremsweg [in m]') labelBremsweg.place(x=10, y=40, width=175, height=20) # Label für den Wert des Bremswegs labelWertBremsweg = Label(master=frameAusgaben, background='white', text='') labelWertBremsweg.place(x=210, y=40, width=60, height=20) # Label mit Aufschrift Anhalteweg labelAnhalteweg = Label(master=frameAusgaben, background='white', text='Anhalteweg [in m]') labelAnhalteweg.place(x=10, y=70, width=175, height=20) # Label für den Wert des Anhaltewegs labelWertAnhalteweg = Label(master=frameAusgaben, background='white', text='') labelWertAnhalteweg.place(x=210, y=70, width=60, height=20) # Aktivierung des Fensters tkFenster.mainloop()
Aufgabe 2
Analysiere den Quelltext und versuche - so wie in der folgenden Abbildung angedeutet -, den Komponenten der Benutzeroberfläche die zugehörigen Bezeichner im Quelltext zuzuordnen. Du kannst hierbei auch experimentell vorgehen. Wenn du eine Vermutung hast, welcher Bezeichner zu welcher Komponente gehört, dann ändere eine den Bezeichner betreffende Anweisung im Quelltext geringfügig ab und beobachte bei der Ausführung des Programms, wie sich die Veränderungen auf das Erscheinungsbild und Verhalten der Benutzeroberfläche auswirkt.

Aufgabe 3
An welcher Stelle im Quelltext wird die Reaktion des Programms auf die Benutzeraktion Mausklick auf die Schaltfläche
festgelegt? Überprüfe deine Vermutung durch geeignete Experimente.