Konzepte objektorientierter Programmierung Datenmodell und GUI Klaus Becker

Konzepte objektorientierter Programmierung: Datenmodell und GUI Klaus Becker 2019

2 Spiele am Computer "Objektorientierung ist die derzeitige Antwort auf die gestiegene Komplexität der Softwareentwicklung. " Oestereich: Objektorientierte Software-Entwicklung Wir werden hier einfache Spielprogramme mit Hilfe von Softwarebausteinen entwickeln. Dabei sollen die Grundideen und Fachkonzepte der objektorientierten Programmierung im Vordergrund stehen und Schritt für Schritt entwickelt werden.

3 Teil 1 Interaktion mit dem Benutzer

4 Interaktion mit dem Benutzer >>> Karte P-10 Karte X-K Karte X-D Karte K-B Karte >>> ziehen (j/n)? j ziehen (j/n)? n textbasierte, synchronisierte Benutzeroberfläche multimediale, asynchrone Benutzeroberfläche

5 Fachkonzept - Software-Ergonomie Die Software-Ergonomie befasst sich mit der Gestaltung benutzerfreundlicher Computer. Programme. Ziel ist es, die Zusammenarbeit zwischen Mensch und Maschine so zu gestalten, dass nicht der Mensch sich an den Gegebenheiten der Maschine orientieren muss, sondern dass umgekehrt die Maschine eine Kommunikationsschnittstelle zur Verfügung stellt, die sich an den Bedürfnissen der sie bedienenden Menschen orientiert. Kriterien zur Beschreibung von Benutzerfreundlichkeit: Ø Aufgabenangemessenheit: Das Programm konzentriert sich auf die eigentliche Aufgabe und minimiert unnötige Interaktionen. Ø Selbstbeschreibungsfähigkeit: Der Programm liefert die zur Bedienung erforderlichen Hilfen und Rückmeldungen. Ø Steuerbarkeit: Das Programm gibt dem Benutzer die Möglichkeit, mit Hilfe von Dialogen den Ablauf zu steuern. Ø Erwartungskonformität: Das Programm ist auf die Erwartungen der intendierten Benutzer abgestimmt. Ø Fehlertoleranz: Das Programm erkennt fehlerhafte Bedienungen und hilft bei der Korrektur. Ø Individualisierbarkeit: Das Programm lässt sich an individuelle Bedürfnisse anpassen. Ø Lernförderlichkeit: Das Programm unterstützt den Benutzer beim Erlernen der Funktionalitäten.

6 Grafische Benutzeroberflächen Ziel ist es, grafische Benutzeroberflächen zu entwickeln und sie strukturiert mit objektorientierten Programmen zu verknüpfen.

7 Teil 2 Aufbau einer GUI

8 Analyse einer GUI Ziel ist es herauszufinden, wie eine graphische Benutzeroberfläche (GUI) aufgebaut ist und wie ihr Verhalten zustande kommt.

9 Analyse einer GUI #-----------------------------# Datenmodell #-----------------------------from kartenstapel import Kartenstapel kartenstapel = Kartenstapel() gezogene. Karte = None #-----------------------------# Ereignisverarbeitung #-----------------------------def karte. Ziehen. Click(): global gezogene. Karte = kartenstapel. karte. Ziehen() if gezogene. Karte == None: label. Karte. config(text='') else: label. Karte. config(text=gezogene. Karte) … #-----------------------------# GUI #-----------------------------from tkinter import * # Erzeugung des Fensters fenster = Tk() fenster. title("Kartenstapel") fenster. geometry('260 x 310') # Rahmen … Auszug aus dem Quelltext G(raphical) U(ser) I(interface)

10 Analyse einer GUI Aufgabe: Benutze GUI_Kartenstapel_Version 0_unfertig. (a) Teste das Programm gui_kartenstapel. pyw. (b) Eine Benutzeroberfläche ist in der Regel aus verschiedenen grafischen Komponenten (wie Schriftfeldern, Schaltflächen, …) aufgebaut. Welche dieser Komponenten kommen in der gezeigten Benutzeroberfläche vor? (c) Eine Benutzeroberfläche bietet einem Benutzer in der Regel verschiedene Möglichkeiten der Interaktion an. Welche Aktionen kann ein Benutzer hier ausführen? (d) Es fehlt noch eine Schaltfläche, mit der man die Karten des Kartenstapels mischen kann. Ergänze diese Schaltfläche.

11 Fachkonzept - GUI Eine grafische Benutzeroberfläche (auch kurz GUI für Graphical User Interface) ist aus Komponenten aufgebaut. Jede Komponente wird mit einem grafische Symbol dargestellt. Fenster Rahmen Schriftfeld / Label Schaltfläche / Button

12 GUI-Komponenten Grafische Benutzeroberflächen können u. a. folgende Komponenten haben: Ø Fenster: Eine GUI kann aus einem oder mehreren Fenstern bestehen. Ø Rahmen / Tafel: Rahmen (bzw. Tafeln) dienen als Behälter für andere Komponenten. Ø Schaltfäche (Button): Mit Schaltflächen werden in der Regel Programmaktionen ausgelöst. Ø Schriftfeld (Label): Schriftfelder dienen dazu, Texte auf dem Bildschirm darzustellen. Ø Eingabefeld: In Eingabefelder kann der Benutzer Zeichenketten eingeben. Ø Leinwand (Canvas): Eine Leinwand ist ein Bereich, in dem man z. B. Figuren zeichnen und Bilder anzeigen kann Ø Textfeld: Ein Textfeld ist ein Eingabebereich, in den mehrzeilige Texte geschrieben werden können. Ø. . . GUI-Komponenten werden auch Widgets genannt.

13 GUI-Objekte Komponenten einer Benutzeroberfläche werden programmtechnisch durch Objekte (im Sinne der objektorientierten Programmierung) dargestellt. Zu jeder Komponente gibt es ein entsprechendes GUI-Objekt, das die Daten und Operationen der Komponente verwaltet. . objektname = GUIKlasse(. . . ) # Erzeugung des Fensters tk. Fenster = Tk() Erzeugung eines GUI-Objekts. . . # Label Überschrift label. Stapel. Ueberschrift = Label(master=frame. Kartenstapel, text='Kartenstapel') … label. Karte. Ueberschrift = Label(master=frame. Kartenstapel, text='gezogene Karte') … # Label Stapel label. Stapel = Label(master=frame. Kartenstapel, text='[. . . ]') … # Label Karte label. Karte = Label(master=frame. Kartenstapel, text='') … # Button - Stapel initialisieren button. Stapel. Initialisieren = Button(master=frame. Kartenstapel, text="Stapel initialisieren", command=stapel. Initialisieren. Click) …

Fachkonzept - GUI-Objekt 14 Zur Verwaltung von Eigenschaften haben GUI-Objekte Attribute, denen ein bestimmter Wert zugewiesen werden kann. Zur Verarbeitung der verwalteten Daten stellen Objekte Operationen bzw. Methoden bereit. Attribute Methoden Attribute . . . # Label Karte label. Karte = Label(master=frame. Kartenstapel, text='' background = green). . . Attributwerte . . . # Label Karte label. Karte. config(text=gezogene. Karte). . .

15 Fachkonzept - Ereignissteuerung Ein Ereignis (engl. event) ist eine Zustandsänderung in einem System, die registriert und verarbeitet werden kann. Ereignisse können durch Benutzer ausgelöst werden: Ø Der Benutzer klickt auf die Schaltfläche. Ø Der Benutzer schließt das Fenster. Ø Der Benutzer tippt ein Zeichen in ein Eingabefeld. Ø Der Benutzer bewegt die Maus über eine Komponenten. Ø … Ereignisse können auch systemintern ausgelöst werden: Ø Ein Zeitpunkt wird erreicht. Ø Ein Fehler tritt auf. Ø …

Fachkonzept - Ereignissteuerung 16 Ereignisse, die von Interesse sind, werden mit einer Prozedur zur Ereignisbehandlung (einem sog. Eventhandler) verknüpft. Wiederhole: Ereignisschleife wenn ein Ereignis eintritt: führe die zugeordneten Prozedur zur Ereignisbehandlung aus def karte. Ziehen. Click (): . . . Ereignisbehandlungsprozedur # Erzeugung des Fensters fenster = Tk(). . . button. Karte. Ziehen. Spieler = Button(master=frame. Kartenstapel, text="Karte ziehen", command=karte. Ziehen. Click). . . # Aktivierung des Fensters Aktierung der Ereignisschleife fenster. mainloop()

17 Übung - Würfel Entwickle eine grafische Benutzeroberfläche für einen Würfel. Benutze eine fertige Klasse Wuerfel zur Simulation des Würfels.

18 Übung - Würfelbecher Entwickle eine grafische Benutzeroberfläche für einen Würfelbecher mit 3 Würfeln. Benutze eine fertige Klasse zur Simulation des Würfelbechers.

19 Teil 3 Datenmodell und GUI

20 Datenmodell und GUI Wir betrachten hier die Verknüpfung einer grafischen Benutzeroberfläche mit einem Datenmodell. Als Beispiel betrachten wir die Anzeige eines Kartenstapels.

21 Datenmodell und GUI #-------------------------# GUIKartenstapel #-------------------------from tkinter import * class GUIKartenstapel(object): def __init__(self, datenmodell): # Referenzattribute zum Datenmodell self. kartenstapel = datenmodell[0] self. gezogene. Karte = datenmodell[1] # Erzeugung des Fensters self. fenster = Tk() self. fenster. title("Kartenstapel") self. fenster. geometry('260 x 310') … … #-------------------------# Datenmodell #-------------------------from kartenstapel import Kartenstapel kartenstapel = Kartenstapel() gezogene. Karte = None datenmodell = [kartenstapel, gezogene. Karte] #-------------------------# GUI-Objekt #-------------------------gui = GUIKartenstapel(datenmodell) gui. fenster. mainloop() Aufgabe: Mache dich mit dem Quelltext der Klasse GUIKartenstapel vertraut. Ergänze den Quelltext so, dass es auf der Benutzeroberfläche eine zusätzliche Schaltfläche gibt, mit der man die Karten des Kartenstapels mischen kann.

22 Datenmodell-GUI-Architektur … #-----------------------# Datenmodell #-----------------------from kartenstapel import Kartenstapel kartenstapel = Kartenstapel() gezogene. Karte = None datenmodell = [kartenstapel, gezogene. Karte] #-----------------------# GUI-Objekt #-----------------------gui = GUIKartenstapel(datenmodell) gui. fenster. mainloop() Aufgabe: Begründe anhand des Quelltextes, dass u. a. folgende Objekte am Gesamtsystem beteiligt sind.

23 Datenmodell-GUI-Architektur Aufgabe: Das Software-System benutzt eine 2 -Schichten-Architektur: Die obere Schicht ist für die GUI zuständig, die untere für das Datenmodell. Warum ist es günstig, wenn in der unteren Schicht (d. h. im Datenmodell) keine Bezüge auf die obere Schicht (d. h. die GUI) genommen werden?

24 Trennung Datenmodell-GUI Die Trennung zwischen Datenmodell und GUI ist ein Prinzip bei der Entwicklung von Systemen mit grafischer Benutzeroberfläche, das hilft, klar strukturierte und gut wartbare Programme zu erstellen: Während GUI-Objekte auf Objekte des Datenmodells zugreifen dürfen, ist der umgekehrte Zugriff nicht erlaubt. Hinweis: Im Unterricht reicht in der Regel eine Zwei-Schichten-Architektur.

25 Übung Entwickle eine grafische Benutzeroberfläche für einen Würfel bzw. Würfelbecher mit 3 Würfeln. Beachte die Trennung zwischen Datenmodell und GUI.