Ein Schachbrett mit javafx.scene.shape.Rectangle und CSS-Styling

05.03.2013

JavaFX Schachbrett-Beispiel

In dem folgenden kleinen JavaFX-Beispiel wird ein Schachbrett mit den Klassen Rectangle und dem RectangleBuilder erstellt. Das Aussehen der schwarzen Felder wird über eine CSS-Datei gesteuert. Zu Einsatz kommen außerdem noch die JavaFX-Klassen Application, Pane, Scene und Stage.

Das fertige Schachbrett ist auf folgendem Screenshot zu sehen:

Die Klasse Schachbrett erstellt in der Methode start die JavaFX-Oberfläche. Es wird zuerst eine Pane erstellt, die die einzelnen Felder (Rectangles) des Schachbretts enthält. Zu beachten ist dabei, dass nur jedes zweite Feld gezeichnet wird, weil der Hintergrund der Pane weiß ist und somit nur die schwarzen Felder erstellt werden müssen. Mit dem RectangleBuilder werden die einzelnen Felder erstellt und über die Parameter an der richtigen Stelle platziert. Zu beachten ist der Aufruf styleClass("gradientField"), der dafür sorgt, dass das Rectangle mit dem passenden Styling aus der CSS-Datei versehen wird. Anschließend wird noch eine Scene mit der passenden Größe erstellt und das Schachbrett hinzugefügt. Über den Aufruf primaryStage.getScene().getStylesheets().add("board.css"); wird die CSS-Datei für die Scene festgelegt.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.RectangleBuilder;
import javafx.stage.Stage;

public class Schachbrett extends Application {

    private static final int WIDTH = 40;
    private static final int HEIGHT = 40;
    private static final int BOARD_SIZE = 320;

    @Override
    public void start(Stage primaryStage) {

        Pane root = new Pane();
        for (int x = 0, c = 0; x < BOARD_SIZE; x = x + WIDTH, c++) {
            for (int y = 0; y < BOARD_SIZE; y = y + HEIGHT) {
                if (c % 2 == 0) {
                    Rectangle rect = RectangleBuilder.create()
                            .width(WIDTH)
                            .height(HEIGHT)
                            .x(x)
                            .y(y)
                            .styleClass("gradientField")
                            .build();

                    root.getChildren().add(rect);
                }

                c++;
            }
        }

        Scene scene = new Scene(root, BOARD_SIZE, BOARD_SIZE);

        primaryStage.setTitle("Chess Board");
        primaryStage.setScene(scene);
        primaryStage.getScene().getStylesheets().add("board.css");
        primaryStage.show();
    }

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

Das Aussehen des Schachbretts wird über die CSS-Datei board.css definiert. Generell ist der Hintergrund weiss (siehe .root). Über das Element .gradientField wird festgelegt, dass ein linearer Farbverlauf gewählt werden soll, der von oben links nach unten rechts verläuft. Verwendet werden die Farben grau und schwarz. Wer möchte kann über .styleClass("blackRect") auch die Farbe der Felder auf schwarz setzen.

Die Datei board.css

.root {
    -fx-fill: white;
}

.blackRect {
    -fx-fill: black;
}

.gradientField {
    -fx-fill: linear-gradient(to bottom right, grey, black);
}