inf-schule | GUI-Entwicklung mit wxPython

Gestaltung des Layouts

Zielsetzung

Die Benutzeroberfläche zum Programm chuck a luck soll so gestaltet werden, dass ein Benutzer sich hier gut zurecht findet. Zu diesem Zweck sollen Komponenten gruppiert weren, um das Layout zu strukturieren.

Container-Komponenten als GUI-Objekte

Das folgende Testprogramm zeigt, wie man Objekte der Klasse Panel als Container für andere GUI-Objekte nutzt.

# -*- coding: iso-8859-1 -*-
from wx import *
# Ereignisverarbeitung

def Button_Einsatz_Click(event):
    # Verwaltung der Daten
    konto = int(stKonto.GetLabel())
    # Verarbeitung der Daten
    konto = konto - 1
    # Anzeige der Daten
    stKonto.SetLabel(str(konto))

# Erzeugung des Fensters
app = App()
frame = Frame(parent=None)
frame.SetTitle("Test")
frame.SetSize((208, 235))
frame.SetBackgroundColour("white")
frame.Show()
# Rahmen Konto
panelKonto = Panel(parent=frame)
panelKonto.SetSize((110, 100))
panelKonto.SetPosition((40, 35))
panelKonto.SetBackgroundColour("#FFCFC9")
# Label mit Überschrift für das Konto
stUeberschriftKonto = StaticText(parent=panelKonto, style=ALIGN_CENTRE|ST_NO_AUTORESIZE)
stUeberschriftKonto.SetLabel("Konto")
stUeberschriftKonto.SetSize((100, -1))
stUeberschriftKonto.SetPosition((5, 5))
stUeberschriftKonto.SetBackgroundColour("white")
# Label Konto
stKonto = StaticText(parent=panelKonto, style=ALIGN_CENTRE|ST_NO_AUTORESIZE)
stKonto.SetLabel("100")
stKonto.SetFont(Font(14, NORMAL, NORMAL, NORMAL))
stKonto.SetSize((30, 25))
stKonto.SetPosition((40, 35))
stKonto.SetBackgroundColour("white")
# Button zum Einzahlen
bEinsatz = Button(parent=panelKonto)
bEinsatz.SetLabel("Einsatz zahlen")
bEinsatz.SetPosition((5, 75))
bEinsatz.SetSize((100, 20))
bEinsatz.Bind(EVT_BUTTON, Button_Einsatz_Click)
# Aktivierung des Fensters
app.MainLoop()

Hier wird eine Art Tafel benutzt, um zusammengehörige Komponenten zu gruppieren. Diese Tafel ist im vorliegenden Testprogramm farblich gekennzeichnet.

Objekte der Klasse Panel dienen als Container für andere GUI-Objekte. Sie werden oft benutzt, um Komponenten der Benutzeroberfläche zu gruppieren. Mit Hilfe des parent-Attributs wird eine Verschachtelung von Komponenten erzeugt, die sich auf der Benutzeroberfläche durch eine Enthaltensein-Beziehung zeigt.

Bei dem oben gezeigten Programm ergibt sich folgende Komponenten-Verschachtelung:

frame ist parent von panelKonto.
panelKonto ist parent von stUeberschriftKonto, stKonto und bEinsatz.

Die Container-Objekte der Klassen Panel legen genau wie Fenster-Objekte der Klasse Frame Pixelkoordinatensysteme fest, mit deren Hilfe die umfassten Objekte genau plaziert werden.

Die folgende Abbildung verdeutlicht exemplarisch diese Koordinatensysteme.