© GreenFlash/Shutterstock.com
Das User Interface im Wandel – Teil 4

UI Builder – intelligente Helfer


Grundsätzlich braucht man nur einen Texteditor, um Java-Applikationen mit grafischer Benutzeroberfläche zu erstellen. Leichter und deutlich effizienter geht es mit einem passenden User Interface Builder. Wir haben uns einige etwas genauer angesehen.

In den vorangegangenen Ausgaben des Java Magazins haben wir verdeutlicht, dass die Benutzeroberfläche einer Applikation das zentrale Element aus Sicht des Anwenders ist. Es ist die Kommunikationsschnittstelle und diese muss daher entsprechend sorgfältig gestaltet werden. In diesem letzten Teil der Serie sehen wir uns an, welche Tools es gibt, um diesen Prozess etwas einfacher durchzuführen. Für unterschiedliche Grafik-Frameworks (AWT, Swing, JavaFX, …) und diverse integrierte Entwicklungsumgebungen (IDE) gibt es Unterstützung in Form von GUI Buildern. Mit deren Hilfe kann man mittels Drag and Drop und dem Konfigurieren von Eigenschaften die grafische Oberfläche einer Java-Applikation gestalten. Dabei wird nahezu jeder Entwickler einen solchen GUI Builder bereits im Einsatz haben. Ein Blick über den Tellerrand, nach dem Motto „was es sonst noch so gibt …“, kann jedoch nicht schaden. Einige GUI Builder sind direkt in der Standardinstallation der jeweiligen Entwicklungsumgebung vorhanden. Andere Tools können über ein Plug-in nachgerüstet werden. Ebenso gibt es GUI Builder als eigenständige Applikationen, die unabhängig von der IDE ausgeführt werden. Die generierten Dateien für die Oberfläche können dann in das aktive Java-Projekt übernommen werden.

User Interface Builder für NetBeans

Die beliebte integrierte Entwicklungsumgebung NetBeans [1] enthält direkt nach der Installation entsprechende GUI Builder. Sehen wir uns als Erstes den GUI Builder für Swing-(AWT-)Applikationen an. Dieser bietet entsprechende Basisfeatures zur Auswahl, Platzierung und Konfiguration der entsprechenden Swing Controls. Auf oberster Ebene eines Frames wählt man als erstes den Layoutmanager aus (Abb. 1) und kann dann über die Control-Palette die entsprechenden Steuerelemente auswählen und per Drag and Drop auf das Formular ziehen. Abschließend können die Eigenschaften entsprechend konfiguriert werden.

krypczyk_bochkor_interface_4_1.tif_fmt1.jpgAbb. 1: Der GUI Builder für Swing (AWT) in NetBeans

Auf diese Weise kann man das User Interface vollständig im Designer erstellen. Der GUI Builder generiert den entsprechenden Quellcode automatisch. Diesen kann man einsehen, jedoch ist eine manuelle Anpassung hier nicht vorgesehen bzw. notwendig. Ebenso können wir über den Property-Editor die Bindings konfigurieren bzw. Events zuordnen.

Scene Builder für JavaFX

Entwickelt man eine Applikation für JavaFX, erfolgt die Definition der Fenster und anderer UI-Elemente mit Hilfe von XML-Code, also deklarativ. Der XML-Code ist hierarchisch strukturiert. Für eine interaktive Bearbeitung in Form eines grafischen Werkzeugs gibt es den Scene Builder. Dieser kann als ausführbare Anwendung von [2] heruntergeladen werden. Nach der Installation steht eine eigene Applikation zur Verfügung. JavaFX bietet bekanntermaßen reichhaltige Möglichkeiten zur Gestaltung des User Interfaces. Hier gibt es neben den Standard-Controls (Button, Label, …) vielfältige weitere Gestaltungsmöglichkeiten. Beispielsweise kann man Visualisierungen mit Hilfe geometrischer Objekte (Shapes) wie Rechteck, Circle usw. vornehmen. Es stehen auch komplexere Objekte wie ein Polygon zur Verfügung (Abb. 2).

krypczyk_bochkor_interface_4_2.tif_fmt1.jpgAbb. 2: Scene Builder für JavaFX

Der Vorteil des Einsatzes des Scene Builders ist, dass man das Design des User Interfaces losgelöst von der eigentlichen Entwicklung der Applikation umsetzen kann. Damit wird eine bevorzugte personelle Trennung von Design und Entwicklung bestmöglich unterstützt. Die Trennung der Aufgaben hatten wir im zweiten Teil der Serie thematisiert. Entwickler bleiben komplett in ihrer vertrauten Entwicklungsumgebung. Der Designer arbeitet im Tool Scene Builder. Eine auf diese Weise generierte Scene wird als *.fmxl-Datei gespeichert und kann dann in den Quellcode übernommen werden. Direkt aus dem Scene Builder heraus kann man eine Vorschau der erstellten Scene begutachten. Über den Menüpunkt Preview | Show Preview in Windows erfolgt eine Darstellung der Szene in einem eigenen Fenster.

Man kann den Scene Builder auch unmittelbar in die Entwicklungsumgebung einbinden, sodass die Arbeitsumgebung direkt mit dem Öffnen der entsprechenden Datei aufgerufen wird. Beispielhaft sehen wir uns das für die IDE NetBeans an. Installieren Sie auch dazu das Tool Scene Builder auf dem Rechner. Merken Sie sich den Installationspfad, zum Beispiel C:\\Programme\SceneBuilder. In NetBeans gehen Sie zum den Menüpunkt Tools | Optionen | Java | JavaFX und geben dort den Pfad zum Tool Scene Builder an. Wenn Sie danach in der Projektansicht eine entsprechende *.fmxl auswählen, haben Sie den zusätzlichen Eintrag Open, der zu einem Öffnen der Datei im Tool Scene Builder führt (Abb. 3).

krypczyk_bochkor_interface_4_3.tif_fmt1.jpgAbb. 3: Integration von Scene Builder in NetBeans

Window Builder in Eclipse

Jetzt schauen wir auf die Möglichkeiten zum toolgestützten Erstellen von Benutzeroberflächen in der IDE Eclipse. Installieren Sie dazu – sofern Sie mit einer anderen Entwicklungsumgebung arbeiten – die aktuelle Version von Eclipse auf Ihren Rechner [3]. Ein gewisser Standard für das Erstellen von grafischen Oberflächen in Eclipse ist der Window Builder. Diesen installieren und aktivieren Sie über den in Eclipse integrierten Marketplace (Help | Eclipse Marketplace). Suchen Sie nach dem Window Builder, bestätigen Sie die Lizenzvereinbarung und lassen Sie Eclipse die Installation durchführen. Nach einem Neustart der IDE sollte das Feature zur Verfügung stehen. Erstellen Sie e...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang