Java Tutorial #51

JavaFX Tutorial und Einstieg

2021-08-06 | credit: ©vegefox.com

Overview

Wenn du fit in den Java-Grundagen bist, kannst du den nächsten großen Sprung in deiner Programmierer-Karriere wagen: Das Designen von graphischen Benutzeroberflächen. Damit kannst du deinen Kunden Programme liefern, die sie auch bedienen können!

// Schnelles Code-Beispiel

public class Main extends Application {

    @Override
    public void start(Stage primaryStage){

        HBox box = new HBox();
        Button btn = new Button("Klick mich");

        box.getChildren().add(btn);
        primaryStage.setScene(new Scene(box, 320, 240));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
} 

Was ist JavaFX?

JavaFX ist Oracles Framework zum Erstellen von graphischen Benutzeroberflächen (GUI) in Java-Applikationen. Es wurde in Version 1.0 2008 veröffentlicht. Bis 2014 waren AWT und Swing die Standardlösungen für grafische Anwendungen in Java. Allerdings waren diese was Technik, Design und Möglichkeiten betrifft, stark in die Jahre gekommen und nicht mehr zeitgemäß. Anstatt in die Weiterentwicklung von AWT/Swing zu investieren, entschied sich Oracle mit JavaFX für eine komplette Neuentwicklung der GUI-Ebene. 

JavaFX-Programme sind plattformübergreifend. Neben klassischen Desktop-Anwendungen sind auch Web-Anwendungen und Apps für mobilen Endgeräte möglich. 

Was muss ich mitbringen?

Ohne sichere Vorkenntnisse in Java macht es keinen Sinn, JavaFX zu lernen. Wir haben in den letzten 50 Kapiteln unserer Tutorial-Reihe den Java-Sprachkern und erweiterte Techniken der Programmierung kennengelernt. Diese sind notwendig, um JavaFX zu verstehen und den nächsten Sprung in deiner Programmierer-Karriere hinzulegen, nämlich deinen Kunden Programme zu liefern, die sie auch bedienen können 😉

JavaFX Installation

Die JavaFX-Laufzeitumgebung war von Java 7 Update 6 bis 10 Teil der Java SE-Installation. Mit Java 11 wurde JavaFX aus dem JDK abgekoppelt. Es ist heute als separates Standalone-Modul verfügbar, das heißt, dass eine gesonderte Installation notwendig ist. 

Falls du eine ältere Java-Version nutzt (z.B. 1.8), kannst du diesen Schritt überspringen.

Werbung

Installation in IntelliJ

Wir zeigen dir nun am Beispiel von IntelliJ, wie du JavaFX installierst. Solltest du eine andere IDE (NetBeans, Eclipse) nutzen, kannst du die entsprechenden Installationsanleitungen in der offiziellen JavaFX-Dokumentation nachlesen.

Schritt 1. JavaFX-Projekt erstellen

Starte ein neues Projekt in IntelliJ. Klicke hierzu auf File -> New Project. Wähle anschließend JavaFX -> JavaFX Application aus. Gib nun den Namen deines Projekts ein. Die folgende Frage nach dem Maven Repository bestätigen wir.

Jetzt sollte ein neues JavaFX-Beispielprogramm automatisch generiert worden sein. Die Klasse Main.java ist die ausführende Klasse. 

Schritt 2. JavaFX SDK einbinden

Lade dir für dein System die passende JavaFX SDK runter: https://gluonhq.com/products/javafx/. Entpacke das Teil am Besten gleich in deinen Projektordner. In unserem Beispielprojekt haben wir die Version JavaFX 16 als Latest Release in ein Java Projekt mit JDK-Version 16.0.2 eingebaut. 

Gehe anschließend in intelliJ zu File -> Project Structure. Im sich jetzt öffnenden Fenster "Project Settings" gehe auf Libraries und klicke auf das Plus (+) Icon. Wähle nun den lib-Ordner des eben heruntergeladenen Dateipakets aus (alle Dateien einbinden außer die darin enthaltene zip-Datei). 

Schritt 3. JavaFX VM Options anpassen

Noch sind wir nicht am Ziel. Denn wenn du das Programm nun startest, erhältst du vermutlich folgende Fehlermeldung: 

Error: JavaFX runtime components are missing, and are required to run this application

Um dieses Problem zu lösen, klicke auf Run -> Edit Configurations.. und füge die folgende Zeile unter VM Options ein. Den Pfad passt du entsprechend deiner eigenen Ordner-Location an: 

Linux/ Mac: 
--module-path /path/to/javafx-sdk-16.0.1/lib --add-modules javafx.controls,javafx.fxml

Windows:
--module-path "\path\to\javafx-sdk-16.0.1\lib" --add-modules javafx.controls,javafx.fxml

Sollte das Feld "VM Options" nicht angezeigt werden, klicke im gleichen Fenster auf "Modify options" und setzte das Häkchen zum Aktivieren des Feldes:

JavaFX VM Options

Aufbau einer JavaFX-Anwendung

Grundkomponenten 

Eine JavaFX-Anwendung besteht im Kern aus folgenden Grundkomponenten:

Infografik JavaFX Stage Scene Nodes

  • Application: Jede JavaFX-Anwendung erweitert die Klasse Application. Sie ist der Einstiegspunkt in die JavaFX-Anwendung und für deren Lebenszyklus verantwortlich. 
  • Stage: Die Klasse Stage erzeugt das Programmfenster (inkl. Titel-Leiste), das als "Bühne" für den Inhalt dient. 
  • Scene: Diese Klasse dient (wie der Name schon sagt) als "Szene" und enthält den gesamten Content bzw. Fensterinhalt. Aufgabe der Scene ist es, den SceneGraph zu verwalen. 
  • SceneGraph: Beschreibt die Struktur der Elemente (Nodes) einer Scene. Der SceneGraph ist als ein gewurzelter Baum aufgebaut. 
  • Nodes: Als Nodes gelten in einer JavaFX-Anwendung die einzelnen GUI-Elemente wie etwa Bedienelemente, Container, Text usw. 

Die Klasse Application

Sehen wir uns jetzt einmal ein einfaches JavaFX-Programm an:

package sample;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage){

        HBox layout = new HBox();
        Button btn = new Button("Klick mich");

        layout.getChildren().add(btn);
        primaryStage.setScene(new Scene(layout, 320, 240));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Beim Ausführen springt uns dieses kleine Fenster entgegen:

JavaFX Erklärung

Wie du siehst, erweitert unsere Klasse Main die JavaFX-Klasse Application. Application definiert den Lebenszyklus einer JavaFX-Anwendung. Das ist der "Türöffner" für unsere JavaFX-Anwendung. Die Klasse hat u.a. folgende Methoden: 

  • launch(): Initiiert den Start der JavaFX-Anwendung, indem zuerst die Methode init() und danach start() ausgeführt wird. Bei Programmende führt sie dann schließlich die Methode stop() aus. 
  • init(): Diese Methode dient der Initialisierung der JavaFX-Anwendung. Sie hat eine Leerimplementierung und muss nicht überschrieben werden. 
  • start(): Erzeugt das primäre Anwendungsfenster und muss von jeder JavaFX-Anwendung überschrieben werden. Der Methode wird das primäre Stage-Objekt übergeben. 
  • stop(): Diese Methode wird beim Beenden der Anwendung automatisch ausgeführt und muss nicht überschrieben werden.

Infografik JavaFX launch

Die Methode start()

Schauen wir uns nun den Inhalt der start()-Methode genauer an, so finden wir die oben beschriebenen Grundkomponenten wieder: 

Da ist zuerst die Referenz primaryStage, die auf das Stage-Objekt zeigt. Mit der Methode show() wird beim Start der Anwendung das Hauptfenster angezeigt.

In Stage enthalten ist ein Objekt der Klasse Scene, das mit der Methode setScene() entsprechend zugewiesen wird. Scene wiederum enthält alle Nodes, deren strukturelle Anordnung durch den SceneGraph beschrieben werden. 

Nodes

In unserer kleinen Anwendung haben wir drei Nodes: Das erste Node ist ein Layout-Objekt vom Typ HBox (in einem HBox-"Container" werden alle Elemente nebeneinander angeordnet). Das HBox-Objekt erhält dann über den verketteten Methodenaufruf getChildren().add() ein Button-Element als "Kind" zugewiesen - das ist das zweite Node. Das Button-Objekt enthält wiederum ein untergeordnetes Text-Node("Klick mich").

Infografik Java if else Verzweigung

Das Stammnode wird immer als "Root Node" bezeichnet. Alle weiteren Nodes, die selbst mindestens ein Kind haben, sind Parent Nodes. Nodes ohne Kinder nennt man "Leaf Node" (dt.: "Blatt"). 

Wie du siehst, ist der Scene Graph in diesem Beispiel sehr einfach. In größeren JavaFX-Anwendungen kann der Scene Graph zu regelrechten Monster-Bäumen anwachsen.

Werbung

Java lernen

Werde zum Java Profi!

PHP Lernen

Lerne serverbasierte Programmierung

JavaScript lernen

Skille dein Webcoding

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2023 Stefan E. Heller

Impressum | Datenschutz | Changelog

Falconbyte Youtube Falconbyte GitHub facebook programmieren lernen twitter programmieren lernen discord programmieren lernen