inf-schule | Objektorientierte Benutzeroberflächen » Eine grafische Benutzeroberfläche

Eine grafische Benutzeroberfläche

Zielsetzung

Das Nim-Spiel soll jetzt über eine grafische Benutzeroberfläche gespielt werden. Um die Analyse des Programms einfach zu machen benutzen wir hier vorerst auch eine möglichst einfach gestrickte Benutzerberfläche.

Der Benutzer kann hier Spielinformation auf Schriftfeldern (Label) ablesen, Eingaben in ein Eingabefeld machen und Schaltflächen (Button) anklicken.

GUI-Objekte

Die Grafische Benutzeroberfläche selbst wird mit Objekten von vorgegebenen GUI-Klassen aus dem Modul tkinter erzeugt.

#-----------------------------------------------------------
# Grafische Benutzeroberfläche
#-----------------------------------------------------------

from tkinter import *

# Ereignisverarbeitung

def buttonSpielerClick():
    pass

def buttonComputerClick():
    pass

def buttonNeuesSpielClick():
    pass

# Fenster
tkFenster = Tk()
tkFenster.title('Nim-Spiel')
tkFenster.geometry('350x175')

# Rahmen Spieler
frameSpieler = Frame(master=tkFenster, bg='#FFCFC9')
frameSpieler.place(x=5, y=5, width=110, height=165)
# Label mit Überschrift für das Konto
labelUeberschriftSpieler = Label(master=frameSpieler,
                                      text='Mensch',bg='white')
labelUeberschriftSpieler.place(x=5, y=5, width=100, height=20)
# Eingabefeld für den Zug des Spielers
entryZugSpieler = Entry(master=frameSpieler, bg='white')
entryZugSpieler.place(x=45, y=75, width=20, height=20)
# Button des Spielers
buttonSpieler = Button(master=frameSpieler, text='ziehen',
                            command=buttonSpielerClick)
buttonSpieler.place(x=5, y=140, width=100, height=20)

# Rahmen Haufen
frameHaufen = Frame(master=tkFenster, bg='#D5E88F')
frameHaufen.place(x=120, y=5, width=110, height=165)
# Label mit Überschrift für den Haufen
labelUeberschriftHaufen = Label(master=frameHaufen,
                                     text='Haufen', bg='white')
labelUeberschriftHaufen.place(x=5, y=5, width=100, height=20)
# Label für den Haufen
labelHaufen = Label(master=frameHaufen, text='', bg='white')
labelHaufen.place(x=45, y=75, width=20, height=20)
# Button für ein neues Spiel
buttonNeuesSpiel = Button(master=frameHaufen, text='neues Spiel',
                               command=buttonNeuesSpielClick)
buttonNeuesSpiel.place(x=5, y=140, width=100, height=20)
# Rahmen Computer
frameComputer = Frame(master=tkFenster, bg='#FBD975')
frameComputer.place(x=235, y=5, width=110, height=165)
# Label mit Überschrift für den Computer
labelUeberschriftComputer = Label(master=frameComputer,
                                       text='Computer', bg='white')
labelUeberschriftComputer.place(x=5, y=5, width=100, height=20)
# Anzeigefelder für den Zug des Computers
labelZugComputer = Label(master=frameComputer, bg='white')
labelZugComputer.place(x=45, y=75, width=20, height=20)
labelZugComputer.config(text='')
# Button des Computers
buttonComputer = Button(master=frameComputer, text='ziehen',
                             command=buttonComputerClick)
buttonComputer.place(x=5, y=140, width=100, height=20)

# Start der Ereignisschleife
tkFenster.mainloop()

Beachte, dass diese Benutzeroberfläche noch keinerlei Funktionalitäten bietet. Hier werden ausschließlich die Komponenten der Oberfläche erzeugt.

Aufgabe 1

Analysiere den Quelltext. Welche Objekte werden hier für welche GUI-Komponenten erzeugt? Nähere Informationen zum Aufbau grafischer Benutzeroberflächen findest du im Kapitel Grafische Benutzeroberflächen.

Ein GUI-Manager-Objekt

Für die Strukturierung eines Programms mit grafischer Benutzeroberfläche ist es günstig, ein GUI-Manager-Objekt einzuführen, das für die Erzeugung der GUI-Objekte (und auch für die Durchführung der Anwendung) zuständig ist. Hier der Quelltext zur Erzeugung eines solchen GUI-Manager-Objekts. Wir lassen vorerst jegliche Funktionalität noch weg.

#-----------------------------------------------------------
# grafische Benutzeroberfläche
#-----------------------------------------------------------

from tkinter import *

class GUIManager(object):

    def __init__(self):

        # Fenster
        self.tkFenster = Tk()
        self.tkFenster.title('Nim-Spiel')
        self.tkFenster.geometry('350x175')

        # Rahmen Spieler
        self.frameSpieler = Frame(master=self.tkFenster, bg='#FFCFC9')
        self.frameSpieler.place(x=5, y=5, width=110, height=165)
        # Label mit Überschrift für das Konto
        self.labelUeberschriftSpieler = Label(master=self.frameSpieler,
                                              text='Mensch',bg='white')
        self.labelUeberschriftSpieler.place(x=5, y=5, width=100, height=20)
        # Eingabefeld für den Zug des Spielers
        self.entryZugSpieler = Entry(master=self.frameSpieler, bg='white')
        self.entryZugSpieler.place(x=45, y=75, width=20, height=20)
        # Button des Spielers
        self.buttonSpieler = Button(master=self.frameSpieler, text='ziehen',
                                    command=self.buttonSpielerClick)
        self.buttonSpieler.place(x=5, y=140, width=100, height=20)

        # Rahmen Haufen
        self.frameHaufen = Frame(master=self.tkFenster, bg='#D5E88F')
        self.frameHaufen.place(x=120, y=5, width=110, height=165)
        # Label mit Überschrift für den Haufen
        self.labelUeberschriftHaufen = Label(master=self.frameHaufen,
                                             text='Haufen', bg='white')
        self.labelUeberschriftHaufen.place(x=5, y=5, width=100, height=20)
        # Label für den Haufen
        self.labelHaufen = Label(master=self.frameHaufen, text='', bg='white')
        self.labelHaufen.place(x=45, y=75, width=20, height=20)
        # Button für ein neues Spiel
        self.buttonNeuesSpiel = Button(master=self.frameHaufen, text='neues Spiel',
                                       command=self.buttonNeuesSpielClick)
        self.buttonNeuesSpiel.place(x=5, y=140, width=100, height=20)
        # Rahmen Computer
        self.frameComputer = Frame(master=self.tkFenster, bg='#FBD975')
        self.frameComputer.place(x=235, y=5, width=110, height=165)
        # Label mit Überschrift für den Computer
        self.labelUeberschriftComputer = Label(master=self.frameComputer,
                                               text='Computer', bg='white')
        self.labelUeberschriftComputer.place(x=5, y=5, width=100, height=20)
        # Anzeigefelder für den Zug des Computers
        self.labelZugComputer = Label(master=self.frameComputer, bg='white')
        self.labelZugComputer.place(x=45, y=75, width=20, height=20)
        self.labelZugComputer.config(text='')
        # Button des Computers
        self.buttonComputer = Button(master=self.frameComputer, text='ziehen',
                                     command=self.buttonComputerClick)
        self.buttonComputer.place(x=5, y=140, width=100, height=20)

    # Ereignisverarbeitung

    def buttonSpielerClick(self):
        pass

    def buttonComputerClick(self):
        pass

    def buttonNeuesSpielClick(self):
        pass

#-----------------------------------------------------------
# Erzeugung des GUI-Objekts
#-----------------------------------------------------------

guimanager = GUIManager()
guimanager.tkFenster.mainloop()

Aufgabe 2

Erläutere die Unterschiede zum Programm oben. Verdeutliche die Objektkonstellation exemplarisch mit einem Objektdiagramm.

Verbindung des GUI-Manager-Objekts mit dem Datenmodell

Das GUI-Manager-Objekt soll jetzt die vorgesehenen Funktionalitäten realisieren. Hierzu soll das GUI-Manager-Objekt die Dienste passender Datenmodellobjekte nutzen.

#-----------------------------------------------------------
# Grafische Benutzeroberfläche
#-----------------------------------------------------------

from tkinter import *

class GUIManager(object):

    def __init__(self, pSpielmanager, pHaufen):

        # Referenzattribute zum Datenmodell
        self.rHaufen = pHaufen
        self.rSpielmanager = pSpielmanager

        # Fenster
        self.tkFenster = Tk()
        self.tkFenster.title('Nim-Spiel')
        self.tkFenster.geometry('350x175')

        # Rahmen Spieler
        self.frameSpieler = Frame(master=self.tkFenster, bg='#FFCFC9')
        self.frameSpieler.place(x=5, y=5, width=110, height=165)
        # Label mit Überschrift für das Konto
        self.labelUeberschriftSpieler = Label(master=self.frameSpieler,
                                              text='Mensch',bg='white')
        self.labelUeberschriftSpieler.place(x=5, y=5, width=100, height=20)
        # Eingabefeld für den Zug des Spielers
        self.entryZugSpieler = Entry(master=self.frameSpieler, bg='white')
        self.entryZugSpieler.place(x=45, y=75, width=20, height=20)
        # Button des Spielers
        self.buttonSpieler = Button(master=self.frameSpieler, text='ziehen',
                                    command=self.buttonSpielerClick)
        self.buttonSpieler.place(x=5, y=140, width=100, height=20)
        self.buttonSpieler.config(state = 'disabled')

        # Rahmen Haufen
        self.frameHaufen = Frame(master=self.tkFenster, bg='#D5E88F')
        self.frameHaufen.place(x=120, y=5, width=110, height=165)
        # Label mit Überschrift für den Haufen
        self.labelUeberschriftHaufen = Label(master=self.frameHaufen,
                                             text='Haufen', bg='white')
        self.labelUeberschriftHaufen.place(x=5, y=5, width=100, height=20)
        # Label für den Haufen
        self.labelHaufen = Label(master=self.frameHaufen, text='', bg='white')
        self.labelHaufen.place(x=45, y=75, width=20, height=20)
        # Button für ein neues Spiel
        self.buttonNeuesSpiel = Button(master=self.frameHaufen, text='neues Spiel',
                                       command=self.buttonNeuesSpielClick)
        self.buttonNeuesSpiel.place(x=5, y=140, width=100, height=20)
        # Rahmen Computer
        self.frameComputer = Frame(master=self.tkFenster, bg='#FBD975')
        self.frameComputer.place(x=235, y=5, width=110, height=165)
        # Label mit Überschrift für den Computer
        self.labelUeberschriftComputer = Label(master=self.frameComputer,
                                               text='Computer', bg='white')
        self.labelUeberschriftComputer.place(x=5, y=5, width=100, height=20)
        # Anzeigefelder für den Zug des Computers
        self.labelZugComputer = Label(master=self.frameComputer, bg='white')
        self.labelZugComputer.place(x=45, y=75, width=20, height=20)
        self.labelZugComputer.config(text='')
        # Button des Computers
        self.buttonComputer = Button(master=self.frameComputer, text='ziehen',
                                     command=self.buttonComputerClick)
        self.buttonComputer.place(x=5, y=140, width=100, height=20)
        self.buttonComputer.config(state = 'disabled')

    # Ereignisverarbeitung

    def buttonSpielerClick(self):
        zug = int(self.entryZugSpieler.get())
        self.rSpielmanager.zugDurchfuehrenMensch(zug)
        self.haufenAnzeigen()
        self.gewinnerAnzeigen()
        self.zugComputerInitialisieren()
        self.buttonAktivieren()

    def buttonComputerClick(self):
        self.rSpielmanager.zugDurchfuehrenComputer()
        self.zugComputerAnzeigen()
        self.haufenAnzeigen()
        self.gewinnerAnzeigen()
        self.eingabeSpielerInitialisieren()
        self.buttonAktivieren()

    def buttonNeuesSpielClick(self):
        self.rHaufen.initHaufen(16)
        self.haufenZuBeginnAnzeigen()
        self.eingabeSpielerInitialisieren()
        self.zugComputerInitialisieren()
        self.ueberschriftInitialisieren()
        self.rSpielmanager.ersterSpieler()
        self.buttonAktivieren()

    # Aktualisierung der Anzeige

    def haufenAnzeigen(self):
        p = self.rHaufen.getPosition()
        self.labelHaufen.config(text=str(p))

    def haufenZuBeginnAnzeigen(self):
        p = self.rHaufen.getPosition()
        self.labelHaufen.config(text=str(p))

    def eingabeSpielerInitialisieren(self):
        self.entryZugSpieler.delete(0, 'end')
        self.entryZugSpieler.insert(0, '0')

    def zugComputerAnzeigen(self):
        z0 = self.rSpielmanager.getZugComputer()
        self.labelZugComputer.config(text=str(z0))

    def zugComputerInitialisieren(self):
        self.labelZugComputer.config(text='')

    def buttonAktivieren(self):
        if self.rSpielmanager.getAktuellerSpieler() == 'Mensch':
            self.buttonSpieler.config(state = 'normal')
            self.buttonComputer.config(state = 'disabled')
        elif self.rSpielmanager.getAktuellerSpieler() == 'Computer':
            self.buttonSpieler.config(state = 'disabled')
            self.buttonComputer.config(state = 'normal')

    def gewinnerAnzeigen(self):
        if self.rSpielmanager.spielBeendet():
            if self.rSpielmanager.getGewinner() == 'Mensch':
                self.labelUeberschriftSpieler.config(fg='red')
                self.labelUeberschriftSpieler.config(text='Gewinner')
            else:
                self.labelUeberschriftComputer.config(fg='red')
                self.labelUeberschriftComputer.config(text='Gewinner')

    def ueberschriftInitialisieren(self):
        self.labelUeberschriftSpieler.config(fg='black')
        self.labelUeberschriftSpieler.config(text='Mensch')
        self.labelUeberschriftComputer.config(fg='black')
        self.labelUeberschriftComputer.config(text='Computer')

#-----------------------------------------------------------
# Interaktive Durchführung des Spiels
#-----------------------------------------------------------

from nim_einhaufen import *

# Erzeugung der Datenmodell-Objekte
haufen = Nimhaufen(16)
mSpieler = SpielerMensch(haufen)
cSpieler = SpielerComputer(haufen)
spielmanager = Spielmanager(haufen, mSpieler, cSpieler)

# Erzeugung und Aktivierung des UI-Objekts
guimanager = GUIManager(spielmanager, haufen)
guimanager.tkFenster.mainloop()

Beachte, dass hier eine implementierte Version des Datenmodells benutzt wird, die sich in der Datei nim_einhaufen.py befindet.

Aufgabe 3

(a) Teste das gegebene Programm.

(b) Erkläre, wie das GUIManager-Objekt mit den Datenmodellobjekten kooperiert und die Spielaktionen durchführt. Wie wird die Verbindung zwischen dem GUIManager-Objekt und den Datenmodellobjekten hergestellt?

Aufgabe 4

Entwickle analog eine GUIManager-Klasse zum Nim-Spiel mit mehreren Haufen.