Swing in Form bringen

Die Benutzeroberfläche ist das Aushängeschild einer Anwendung. Sie muss funktionalen und ästhetischen Ansprüchen genügen und ist Gegenstand langer Diskussionen und häufiger Änderungen. Der Java-Welt steht Swing als Werkzeug zur Verfügung, um anspruchsvolle Benutzer zufrieden zu stellen. Das kostenfreie Paket JGoodies Forms [1] kann dabei helfen, Dialoge gefälliger und einfacher zu gestalten. Dieser Artikel vermittelt einen ersten Eindruck, was von dieser Bibliothek erwartet werden kann.

Abb. 1: Dialog zur Erfassung von Personendaten. Vergrößern

Abb. 2: Tabellen-Struktur des Dialogs (durch JGoodies-Forms dargestellt). Vergrößern

private static JPanel addDialog() {   JTextField nameField = new JTextField();   JTextField vornameField= new JTextField();   JTextField alterField = new JTextField();   JTextArea bemerkungen = new JTextArea();   FormLayout formLayout = new FormLayout(     "right:pref"                      // Spalte 1     + ", 3dlu"                        // Spalte 2     + ", fill:max(100dlu;pref):grow"  // Spalte 3     + ", 3dlu"                        // Spalte 4     + ", right:pref"                  // Spalte 5     + ", 3dlu"                        // Spalte 6     + ", max(100dlu;pref)"            // Spalte 7     + ", 3dlu"                        // Spalte 8     ,     "pref"                            // Zeile 1     + ", 3dlu"                        // Zeile 2     + ", pref"                        // Zeile 3     + ", 3dlu"                        // Zeile 4     + ", pref"                        // Zeile 5     + ", 3dlu"                        // Zeile 6     + ", pref"                        // Zeile 7     + ", 3dlu"                        // Zeile 8     + ", max(50dlu;p):grow"           // Zeile 9     ); PanelBuilder builder = new PanelBuilder(formLayout); builder.setDefaultDialogBorder(); CellConstraints cc = new CellConstraints(); builder.addSeparator("Namen eingeben",  cc.xyw(1, 1, 7)); builder.addLabel("Name",                cc.xy (1, 3)); builder.add(nameField,                  cc.xyw(3, 3, 1)); builder.addLabel("Alter",               cc.xy(5, 3)); builder.add(alterField,                 cc.xy(7,3)); builder.addLabel("Vorname",             cc.xy(1, 5)); builder.add(vornameField,               cc.xyw(3, 5, 1)); builder.addLabel("Bemerkungen",         cc.xy(1, 7)); builder.addLabel("(Freitext)",          cc.xy(1, 9, "right,top")); builder.add(bemerkungen,                cc.xywh(3, 7, 5, 3)); return builder.getPanel();

Abb. 3: Quellcode zur Erzeugung des Layouts aus Abbildung 1.

JButton speichernButton = new JButton("Speichern"); JButton abbrechenButton = new JButton("Abbrechen"); JPanel panel = ButtonBarFactory.buildRightAlignedBar(new JButton[] {         speichernButton, abbrechenButton });     builder.add(panel, cc.xyw(3, 11, 5));

Abb. 4: Beispielquellcode zur Erzeugung eines Button-Panels.

Abb. 5: Beispiel zur Erzeugung eines Button-Panels. Vergrößern

JGoodies Forms

Aufgabe dieses Pakets ist es, die Dialoggestaltung von Swing-Anwendungen zu unterstützen. Eine wesentliche Komponente dient der Vereinfachung des Layout-Managements. Ziel dieses Pakets ist es, exzellente Ergebnisse bei kurzen Entwicklungszeiten zu erreichen. Dabei ist JGoodies Forms [1] mit der BSD Lizenz geschützt, Lizenzkosten fallen nicht an.

Layout-Management

Der Benutzer erwartet von Dialogen:

• Berücksichtigung unterschiedlicher Fenstergrößen
• Einheitlichkeit der Gestaltung und der Benutzung
• Übersichtliche Anordnung

Die Standard-Layout-Manager von Swing sind Spezialisten zur Lösung der ersten Anforderung. Dialogelemente werden in Abhängigkeit von der Fenstergröße dimensioniert und positioniert. JGoodies-Forms unterstützt darüber hinaus auch die übrigen Anforderungen.

Allgemein wird ein Dialog als übersichtlich empfunden, wenn Abstände zum Fensterrand eingehalten werden, gleiche Abstände zwischen den Elementen vorliegen und Dialogelemente einheitlich ausgerichtet sind.

Abbildung 1 zeigt einen entsprechenden Dialog, der im Folgenden als Beispiel dient.

Am Anfang war die Tabelle

Grundlage für die Gestaltung des Dialogs ist eine Tabelle (siehe rote Linien in Abbildung 2). Dialogelemente werden in die Zellen dieser Tabelle positioniert. Dieses sorgt für klare Linien.

Der Quellcode zur Gestaltung des Dialogs aus Abbildung 1 ist der Abbildung 3 zu entnehmen.

Die Tabelle wird im Konstruktor-Aufruf der Klasse FormLayout definiert: Das erste Argument legt den Aufbau der Spalten fest, das zweite Argument die Zeilen.

... dann die Zellengröße ...

Anhand der Argumente des FormLayout-Konstruktors lässt sich die Struktur der Tabelle bereits erahnen. Jede Beschreibung einer Zeile oder Spalte ist durch ein Komma von seinem Nachfolger getrennt. Die Beschreibung selbst kann aus mehreren Elementen bestehen, die durch Doppelpunkte voneinander getrennt sind.

Verpflichtend ist dabei nur die Angabe der Zeilen- bzw. Spaltengröße. Diese kann durch absolute Angaben wie Pixel, Punkt, Inch, Millimeter oder Zentimeter festgelegt werden.

Besonders wertvoll ist die Möglichkeit, die Abmessungen relativ zum Systemfont anzugeben. Dazu bietet JGoodies-Forms die Einheit Dialog Units (dlu) an, die mit der Systemschriftgröße skaliert.

Die dritte Option zur Angabe der Größe einer Tabellenzelle nimmt die Dialogelemente selbst als Maßstab. Die Abkürzung pref steht für preferred size: dieser Spalte oder Zeile wird so viel Platz eingeräumt, dass die größte Komponente mit ihrer preferred size angezeigt werden kann.

Durch die Funktionen max und min lassen sich maximale oder minimale Zeilenhöhen oder Spaltenbreiten festlegen.

Der Abstand zwischen den Elementen wird durch – später leer gelassene – Zellen definiert (siehe Abbildung 2). Es ist sinnvoll, diese Abstände in der Einheit Dialog Units anzugeben.

.. danach die Ausrichtung ..

Die Label der Eingabefelder sind nicht gleich groß (siehe Abbildung 1). Solche Elemente müssen in ihrer Zelle ausgerichtet werden. Dazu dient die Information vor der Größenangabe. Als Ausrichtungsoption stehen zur Wahl: left, right, top und bottom.

Diese Attribute werden der Größenangabe vorangestellt, z. B. right:pref ist demnach eine Spaltenbeschreibung, die dafür sorgt dass die größte Komponente der Zeile mit der preferred size dargestellt wird, die übrigen Komponenten werden rechtsbündig positioniert.

Wird keine Angabe gemacht, so sollen die Komponenten wie Eingabefelder oder Schaltflächen möglichst den gesamten Raum ihres Bereiches einnehmen. Das Verhalten wird auch durch die Ausrichtungsoption fill erreicht.

.. und schließlich das Resizing-Verhalten

Eine Veränderung der Fenstergröße erlaubt dem Benutzer, den Platz auf seinem Bildschirm optimal für verschiedene Anwendungen aufzuteilen. Steht mehr Platz zur Verfügung, so soll dieser optimal genutzt werden.

Es kann beispielsweise ein größerer Teil einer Tabelle angezeigt werden oder aber das Freitextfeld den zur Verfügung stehenden Platz nutzen.

Standardmäßig werden Komponenten beim Resizing in ihren Abmessungen nicht verändert. Wird das Attribut grow gesetzt, passt sich die Spaltenbreite oder Zeilenhöhe an die Fenstergröße an. Sollen gleich mehrere Zeilen oder Spalten wachsen, so kann das Attribut grow mit einem Gewichtungsfaktor versehen werden. Proportional zu diesem Faktor wird dann der zusätzliche Platz verteilt.

Damit sind alle Konfigurationstypen zur Beschreibung der Layouttabelle dargestellt. Durch das Ausrichtung:Größe:Resizing-Verhalten sind Zeilenhöhen und Spaltenbreiten der Tabelle definiert.

Den Zellen der Tabelle werden abschließend die Dialogelemente zugeordnet.

Jeder auf seinen Platz

Es gibt unterschiedliche Möglichkeiten, Dialogelemente einer Zelle zuzuweisen. Im Quellcode der Abbildung 3 ist ein explizites Verfahren gewählt, in dem die Koordinaten der Zelle angegeben werden, die für das Element bestimmt sind.

Dazu werden CellConstraints erstellt, die die Layout-Eigenschaften eines Dialogelements aufnehmen. Neben den Koordinaten kann auch die Ausdehnung, durch die Anzahl der Zeilen bzw. Spalten, angegeben werden. Es lassen sich hiermit Ausrichtung und Resizing- Verhalten einzelner Dialogelemente angeben.

Das Element wird zusammen mit dem CellConstraint dem PanelBuilder zugewiesen. Sind auf diese Weise alle Elemente registriert, so wird das Ergebnis-Panel mit PanelBuilder.getPanel zurückgegeben.

Uniformität ist gewünscht

Die Einheitlichkeit von Elementen in einem Dialog wird oftmals gewünscht. Ein prominentes Beispiel sind die Schaltflächen, die in der Regel am unteren Rand eines Dialoges zum Bestätigen oder Abbrechen positioniert sind.

Damit die Ausrichtung dieser Schaltflächen in der gesamten Applikation gleich ist, sollte eine Factory das Panel erzeugen, auf dem die Schaltflächen untergebracht werden.

JGoodies-Forms bietet zu diesem Zweck unter anderem die ButtonBarFactory. Abbildung 4 enthält einen Code-Schnipsel, in dem die Verwendung der Button-Bar gezeigt wird.

Die Schaltflächen Speichern und Abbrechen werden unter den Dialog gesetzt (siehe Abbildung 5).

Schlussfolgerung

Der Artikel zeigt, dass das Paket JGoodies-Forms ein nützliches Werkzeug für die Gestaltung von Swing-Dialogen ist. Die Qualität der Dialoge, die Verständlichkeit und die Wartbarkeit des Quellcodes lassen sich damit erheblich verbessern.

Testen Sie das Paket doch einfach mal für Ihre Swing-Entwicklung. Wir unterstützen Sie gern dabei.

Übrigens, das Thema Layout-Management wird Ihnen auch in unserem Seminar "Java GUI Entwicklung mit Swing“ nahe gebracht.

Seitenanfang

Seite drucken

Seite weiterempfehlen