Falconbyte.net :: CSS Stylesheets in JavaFX

Thema in Kurzform

In JavaFX ist es spielend einfach, Cascading Style Sheets (CSS) auf unsere GUI-Elemente anzuwenden und diese sehr präzise und vielfälltig im Design anzupassen. Du wirst sehen: CSS passt genauso gut zu JavaFX wie zu HTML.

CSS inline anwenden

Die erste Methode, CSS in JavaFX einzusetzen, heisst setStyle(). Damit lässt sich ein Stylesheet direkt auf das gewünschte Node inline anwenden. Die Methode nimmt ein String Argument auf, das aus Key-Value-Paaren besteht und das CSS beschreibt. Zum Beispiel:

VBox vbox = new VBox();
vbox.setPadding(new Insets(20,20,20,20));
vbox.setSpacing(20);
vbox.setStyle("-fx-background-color: #45486b"); // CSS

In der vierten Zeile haben wir den Hintergrund der VBox angepasst (lila). Wie du siehst, funktioniert die CSS-Syntax wie wir es gewohnt sind. Achte aber darauf, vor die CSS-Eigenschaft das Präfix -fx- zu schreiben.

Es lassen sich problemlos mehrere CSS-Eigenschaften und Werte gleichzeitig auf ein Node anwenden. Dazu schreiben wir diese einfach innerhalb des Strings nebeneinander und setzen jeweils ein Semikon dazwischen:

Label label = new Label("Falconbyte");
label.setStyle("-fx-text-fill: fuchsia; -fx-font-size: 24px; -fx-font-family: 'Arial Black'"); // CSS

CSS Klassen anwenden

Komplexe Stylesheets werden in der Regel in gesonderten CSS-Dateien in Form von Klassen ausgelagert. Das sorgt für eine bessere Übersicht (Trennung Struktur und Design) und nur so ist es möglich, Node-übergreifend CSS anzuwenden.

Die folgende CSS-Klasse namens .falconbyte sehen wir in der Datei style.css:

.falconbyte {
    -fx-background-color: #d60787;
    -fx-text-fill: white;
    -fx-border-width: 1px;
    -fx-border-color: white;
}

Damit unsere JavaFX-Anwendung von der CSS-Datei Bescheid bekommt, müsen wir es der Scene zuerst noch mitteilen:

Scene s = new Scene(vbox, 400, 200);
s.getStylesheets().add("sample/style.css");

Jetzt sind wir soweit und können mit der Methode getStyleClass().add() die CSS-Klasse auf die gewünschten Nodes anwenden.

Button button = new Button(("Pink Planet"));
button.getStyleClass().add("falconbyte");

Vollständiger Code

VBox vbox = new VBox();
vbox.setPadding(new Insets(20,20,20,20));
vbox.setSpacing(20);
vbox.setStyle("-fx-background-color: #45486b");

Label label = new Label("Falconbyte");
label.setStyle("-fx-text-fill: fuchsia; -fx-font-size: 24px; -fx-font-family: 'Arial Black'");

Button button = new Button(("Pink Planet"));
button.getStyleClass().add("falconbyte");

vbox.getChildren().addAll(label, button);

Scene s = new Scene(vbox, 400, 200);
s.getStylesheets().add("path/style.css"); // Pfad der CSS-Datei
primaryStage.setScene(s);
primaryStage.setTitle("CSS Beispiel");
primaryStage.show();

Und hier das Ergebnis: