In diesem Tutorial zeigen wir dir, was der SceneBuilder ist und wie du ihn super einfach einrichten kannst, um maximal effizient eigene GUI-Anwendungen in JavaFX zu entwickeln.
Was ist der SceneBuilder?
Der SceneBuilder ist das Standard-Tool und ein WYSIWYG-Editor zum Erstellen von grafischen Benutzeroberflächen in JavaFX. Mit dem SceneBuilder kannst du schnell und einfach ganze JavaFX-Anwendungen entwicklen und das mit einem minimalen Programmieraufwand. Die einzelnen GUI-Elemente deiner Anwendung (Buttons, Textfelder, Labels usw.) lassen sich nämlich ganz easy per Drag & Drop an die gewünschte Position platzieren, bewegen sowie grafisch komfortabel anpassen.
Kein Mensch entwickelt heute noch die Benutzeroberfläche in JavaFX vollständig von Hand. Das tut der "Programmierer-Ehre" auch keinen Abbruch, da der SceneBuilder ja auch nur die grafische Oberfläche für dich arrangiert. Den maschinellen Kern und Funktionalität deiner Anwendung musst du (bzw. dein KI-Assistent) auch weiterhin selbst programmieren. Du kannst dich jetzt sogar noch besser auf das eigentliche Programmieren konzentrieren, da der "Ballast" der GUI vom SceneBuilder weitgehend übernommen wird.
FXML
FXML ist eine XML-basierte Sprache, die dazu dient, den Objektbaum der Benutzeroberflächen in JavaFX zu beschreiben. Der SceneBuilder kümmert sich automatisch um diese Datei, sodass du dich die meiste Zeit garnicht für ihren Inhalt interessieren musst.
Installation und Einrichtung des SceneBuilder
Installation SceneBuilder
Wir zeigen dir im Folgenden, wie easy du den SceneBuilder installierst und für intelliJ einrichtest.
- Download der neusten Version des SceneBuilders
- Öffne intelliJ und richte dein JavaFX-Projekt ein (Tutorial)
- Gehe in intelliJ zu Settings > Languages & Frameworks > JavaFX
- Wähle nun im Dialogfeld die SceneBuilder-App auf deinem Rechner aus und klicke auf OK
- Speichere die Änderung. Eventuell musst du intelliJ einmal neu starten.
Unsere Java-Klasse
Der Klassen-Code unserer ersten Klasse namens Main sieht so aus:
public class Main extends Application {
@Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Hello World");
primaryStage.setScene(new Scene(root, 300, 275));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}Wie du siehst, lädt die FXMLLoader-Klasse bereits die existierende FXML-Datei namens sample.fxml. sample.fxml ist die Grundlage für unsere Arbeit mit dem SceneBuilder.
Beispiel Anwendung entwickeln
Damit wir unsere sample.fxml mit dem SceneBuilder bearbeiten können, klickst du einfach mit der rechten Maustaste im intelliJ-Projektbrowser auf sample.fxml und wählst Open in SceneBuilder - und tada: Der SceneBuilder öffnet sich und du kannst deine Benutzeroberfläche direkt erstellen.
Der SceneBuilder ist super einfach zu bedienen. Im Library-Suchfenster oben links kannst du dir direkt das gewünschte GUI-Element bzw. Node suchen.
Als Beispiel suchen wir einen AnchorPane und schieben den Container einfach in das mittlere Fenster. Danach suchen wir einen Button und ziehen diesen wiederum in den AnchorPane Container. Das Ganze sollte bei dir nun ungefähr so aussehen:
Wenn du im SceneBuilder jetzt einmal speicherst und dir danach die sample.fxml Datei ansiehst, kannst du erkennen, dass der FXML-Code durch unsere Aktivität im SceneBuilder automatisch generiert wurde. Nice! 🤠
Controller Klasse erstellen
Interaktiv ist unsere Anwendung allerdings noch nicht. Aktuell ist der Button nämlich noch tot, das heißt, dass er bei einem Klick keine Methode ausführt.
Um den Button als echtes GUI-Element zu aktivieren, erstellen wir in unserem JavaFX-Projekt zunächst eine neue Klasse und nennen sie zum Beispiel Controller. Der Klassencode sollte so aussehen:
public class Controller {
@FXML
private Button btn;
public void klickMich(){
System.out.println("Das ist JavaFX!");
}
}
Die Klasse Controller hält die Button-Referenz namens btn, die mit der Annotation @FXML markiert ist. Das bedeutet, das dieser Button mit der FXML-Mechanik verknüpft wird.
Es folgt eine einfache Methode klickMich(), die ausgeführt werden soll, wenn der Nutzer auf den Button klickt.
Controller im SceneBuilder auswählen
Im nächsten Schritt muss die Controller-Klasse noch im SceneBuilder als aktiver Controller ausgewählt werden: Setze dazu links unten im SceneBuilder die Controller-Klasse als Controller fest.
Als letztes musst du nur noch den Button mit der FXML-Umgebung verknüpfen. Wähle dazu um SceneBuilder den Button aus und wechsle rechts im Fenster zu Code. Wähle hier unter identity als fx:id die Referenz des Buttons aus (hier: btn). Direkt darunter bei On Action wähls tu du die Methode aus, die beim Klick ausgeführt werden soll (hier: klickMich())
Das ist das Arbeitsprinzip des SceneBuilder 🥰
Wir hoffen, dir hat das Tutorial geholfen und wünschen dir nun viel Spaß beim Designen deiner JavaFX-GUI mit dem SceneBuilder.
