Konzepte objektorientierter Programmierung: Datenmodell und GUI

Präsentation zum Thema: "Konzepte objektorientierter Programmierung: Datenmodell und GUI"—  Präsentation transkript:

1 Konzepte objektorientierter Programmierung: Datenmodell und GUI
Klaus Becker 2016

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 Interaktion mit dem Benutzer
Teil 1 Interaktion mit dem Benutzer

4 Interaktion mit dem Benutzer
>>> Karte ziehen (j/n)? j P-10 X-K X-D K-B Karte 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 Auszug aus dem Quelltext
# # Datenmodell from kartenstapel import Kartenstapel kartenstapel = Kartenstapel() gezogeneKarte = None # Ereignisverarbeitung def karteZiehenClick(): global gezogeneKarte gezogeneKarte = kartenstapel.karteZiehen() if gezogeneKarte == None: labelKarte.config(text='') else: labelKarte.config(text=gezogeneKarte) … # GUI from tkinter import * # Erzeugung des Fensters fenster = Tk() fenster.title("Kartenstapel") fenster.geometry('260x310') # Rahmen Auszug aus dem Quelltext G(raphical) U(ser) I(interface)

10 Analyse einer GUI Aufgabe: Benutze GUI_Kartenstapel_Version0_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 Erzeugung eines GUI-Objekts
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. ... # Erzeugung des Fensters tkFenster = Tk() ... # Label Überschrift labelStapelUeberschrift = Label(master=frameKartenstapel, text='Kartenstapel') … labelKarteUeberschrift = Label(master=frameKartenstapel, text='gezogene Karte') … # Label Stapel labelStapel = Label(master=frameKartenstapel, text='[...]') … # Label Karte labelKarte = Label(master=frameKartenstapel, text='') … # Button - Stapel initialisieren buttonStapelInitialisieren = Button(master=frameKartenstapel, text="Stapel initialisieren", command=stapelInitialisierenClick) … objektname = GUIKlasse(...) Erzeugung eines GUI-Objekts

14 Fachkonzept - GUI-Objekt
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 Attributwerte ... # Label Karte labelKarte = Label(master=frameKartenstapel, text='' background = green) ... ... # Label Karte labelKarte.config(text=gezogeneKarte)...

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 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. …

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

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.gezogeneKarte = datenmodell[1] # Erzeugung des Fensters self.fenster = Tk() self.fenster.title("Kartenstapel") self.fenster.geometry('260x310') … … # # Datenmodell from kartenstapel import Kartenstapel kartenstapel = Kartenstapel() gezogeneKarte = None datenmodell = [kartenstapel, gezogeneKarte] # # 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() gezogeneKarte = None datenmodell = [kartenstapel, gezogeneKarte] # # 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.