Abbildung 2: Mit einer kleinen Modifikation erscheint der Text im Hallo-Welt-Beispiel nun zentriert.
Layouts
Die Objekte einer grafischen Oberfläche (Widgets) weisen immer eine hierarchische Anordnung auf. Wie bei einem Baum gibt es Elemente, die Kindelemente haben dürfen, und solche, die nur auf der untersten Ebene auftreten. Zu den Vertretern der letztgenannten Art zählen Bilder, Linien und Labels. GUI-Elemente mit Kindelementen stammen immer von der Klasse fbgui.Panel ab. Wichtig für Layouts sind die Klassen fbgui.HBox und fbgui.VBox.
Kindelemente von Panels dürfen Sie in den Ecken, an den Rändern sowie in der Mitte platzieren. Das erreichen Sie über das schon oben verwendete Attribut align. Eine Angabe wie die folgende platziert ein Widget an den linken Rand vertikal in der Mitte:
'align': (fbgui.LEFT,fbgui.CENTER)
Für die Kindelemente eines Panels stehen insgesamt neun Positionen bereit, die sich aus der Kombination von LEFT, CENTER und RIGHT sowie TOP, CENTER und BOTTOM ergeben.
Im Gegensatz zu einem Panel mit seinen festen Positionen ordnet eine fbgui.HBox die Kindelemente horizontal von links nach rechts an, eine fbgui.VBox analog vertikal. Einen Zwischenraum zwischen den umschlossenen Elementen erzeugen Sie entweder über das Attribut padding, oder Sie fügen spezielle Objekte ein, die den Platz belegen, etwa fbgui.HGap.
Korrekte Größe
Zum Verständnis des Layouts spielt es noch eine Rolle, wie Sie die Größe eines Objekts bestimmen. Hier gibt es drei Alternativen: Einmal können Sie die Größe absolut in Pixeln festlegen. Das ist selten sinnvoll, denn sobald sich die Bildschirmgröße ändert, etwa durch Einsatz eines anderen Monitors, sieht das Ergebnis unter Umständen nicht mehr optimal aus.
Die zweite Möglichkeit besteht darin, die Größe in Relation zum übergeordneten Element festzulegen. Dazu definiert man oft ein Kindelement genauso breit wie das Elternelement.
Die dritte Möglichkeit betrifft hauptsächlich die Varianten HBox und VBox. Hier ist es oft notwendig, die umschließende Box gerade so groß zu machen, dass alle Kindelemente darin Platz haben (dynamische Größe). Eine horizontale Leiste mit Druckknöpfen fällt dann gerade so groß aus wie alle Schaltflächen zusammen. Die Leiste richten Sie dann anschließend im übergeordneten Panel sauber zentral aus.
Mit diesen theoretischen Grundlagen fällt die Implementation einer kleinen Anwendung leicht. Abbildung 3 zeigt einen Mediaplayer, ausgelegt auf ein 2,8-Zoll-Display mit einer Auflösung von 320 x 240 Pixeln. Neben einem Bild für die Cover-Art und den Songtitel gibt es nur noch zwei Leisten mit Schaltflächen.
Abbildung 3: Mit der passenden Bibliothek gelingt es, eine Mediaplayer-Oberfläche samt allen wichtigen Funktionen sogar für 2,8-Zoll-Displays zu erstellen.
Das grundsätzliche Layout richtet sich vertikal aus und hat drei Zeilen – dafür kommt fbgui.VBox zum Einsatz. Jede Zeile wiederum erzeugen Sie über fbgui.HBox. Die oberste Zeile enthält ein Bild mit der Cover-Art und dem Songtitel. Die unteren Zeilen stellen Tasten für die Navigation im Player bereit. Vom Layout her sollen alle Zeilen gleich breit ausfallen, genauso die Schaltflächen in den beiden Zeilen.
Gehversuche
Beim Entwickeln einer GUI erweist es sich als sinnvoll, erst die Oberfläche ohne weitergehende Logik schrittweise zu entwickeln. Sie nehmen also den Rahmen aus Listing 2 und ersetzen nur die Zeilen 14 bis 18 durch jene aus Listing 4. Die Methode get_gui() (zweite Zeile) baut die Oberfläche zusammen.
Listing 4
app = fbgui.App(config) topbox = get_gui() topbox.pack() app.set_widget(topbox) app.run()
Die Implementation sehen Sie in Listing 5. Am Anfang steht die äußere Box mit vertikaler Ausrichtung (Zeilen 1 bis 5). Außer dem Rand (margins) und etwas Zwischenraum (padding) setzen Sie keine Attribute. Das toplevel=True zeichnet das GUI-Element als oberstes Element aus.
Bei den nächsten drei Elementen handelt es sich um die Box mit horizontaler Ausrichtung für die erste Zeile sowie um das Bild und den Text. Das Argument parent sorgt dabei für die richtige Schachtelung (Zeilen 16, 24 und 30).
