Java: Benutzeroberflächen gestalten mit Gridbag-Layout

Viele Anwendungen verwenden verschachtelte Border- und Grid-Layouts. Am Ende sind sie dann zu kompliziert und zu verschachtelt, als dass man damit arbeiten könnte. Oder aber die Fensteranpassung funktioniert einfach nicht vernünftig. Häufig liegt die Lösung dann darin, sich mit dem windschiefen Fenster abzufinden. Oder man stellt eine feste Fenstergröße ein. Keine dieser Alternativen ist zufriedenstellend. Die Anwendung sieht dadurch nicht besonders gut aus. Meistens ist sie auch in ihren Möglichkeiten beschränkt.

Zum Glück gibt es eine Lösung für diese Probleme: Gridbag-Layout. Leider betrachten viele dieses Layout als so komplex und schwierig zu erlernen, dass sie es nach einem schlechten ersten Eindruck nie damit versuchen. Gridbag-Layout vermag wirklich fast jedes Problem im Bereich Benutzerschnittstellenlayout zu lösen. Es sorgt dafür, dass die Fenstergröße korrekt angepasst wird. Was noch wichtiger ist, sie entspricht dann den Wünschen des Designers. Alles was man braucht sind etwas Planung und Geduld.

Die Planung

Gridbag-Layout ist nicht für Test-Interfaces geeignet. Man sollte Gridbag-Layout nicht für eine schnell zusammengebastelte Benutzerschnittstelle verwenden, nur um zu sehen, welchen Eindruck sie macht. Das ist in etwa so, als errichtete man im Wohnzimmer ein Baugerüst, um einen Nagel aus der Wand zu ziehen. Für Test-Anwendungen sind Border-Layout und Grid-Layout weit besser geeignet. Nach der Testphase sollte man zu Gridbag-Layout wechseln. Natürlich ist es effektiver, mit einer Anwendung zu beginnen, die nicht nur Testzwecken dienen soll.

Hat man sich entschlossen, Gridbag-Layout zu verwenden, sollte man als Nächstes ein Blatt Papier und einen Bleistift zur Hand nehmen. Die Tastatur bleibt vorerst unberührt. Erst wenn man genau weiß, wie die Benutzerschnittstelle aussehen wird, kommt sie zum Einsatz. Man muss seine Anwendung wirklich sorgfältig planen, bevor man sich ans Programmieren macht.

Als Lernbeispiel für Gridbag-Layout könnte man sich eine kleine Anwendung vorstellen: Sie zeigt eine Fotoserie aus einer Flickr-RSS-Quelle. Die fertige Schnittstelle wird in etwa so aussehen:

Hier ist die Originalskizze für diese Schnittstelle:

Wie man sieht, entspricht das Endergebnis größtenteils der Planung.

Es sollten einige Linien zu sehen sein, die längs und quer über die geplante Benutzerschnittstelle verlaufen. Diese Linien dienen dazu, die Oberfläche in Spalten und Zeilen zu unterteilen. Auf diese Weise erhält im entstandenen Gitter jede Komponente ihren Platz. Das wäre dann das „Grid“ (Gitter) im Gridbag-Layout. Die Zahlen entlang der Benutzerschnittstelle sind die Gitterzahlen (grid numbers).

Eigentlich sind die Vorüberlegungen bei Gridbag-Layout die gleichen wie bei den tabellenbasierten Layouts in den armseligen Zeiten von HTML 3 und 4. Konzepte wie rowspan und colspan kommen ins Spiel, wenn auch unter anderen Namen.

Wenn Schnittstelle und Gitter stehen, ist es Zeit, das Layout der Schnittstelle zu erstellen. Das Programmieren kann beginnen.