Swing paintComponents in JavaFX

Question

I am apologising in advance for the upcoming silly question.

Is there a replacement for the paintComponents method a JPanel has for javaFX? Or should I just use a JFXPanel which is embed with Swing?

For example I figured that Timeline is the same as a Timer in Swing, what is the corresponding thing for a Panel/paintComponents?

EDIT: For example how would we go about animating a circle from an x-y coordinate to another? (Without the use of an TranslateTransition, of course)

I tried painting things with canvas but I couldn't figure out how to constantly update the canvas, like calling repaint() in Swing?

Answer 1

Here is an example of a grid, that resizes automatically using simple bindings.

import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Line;

public class Grid {
    private final Pane view = new Pane();

    private final int numColumns ;
    private final int numRows ;

    // arbitrary defaults of 20:
    private final DoubleProperty prefColumnWidth = new SimpleDoubleProperty(20);
    private final DoubleProperty prefRowHeight = new SimpleDoubleProperty(20);

    public Grid(int numColumns, int numRows) {
        this.numColumns = numColumns ;
        this.numRows = numRows ;

        for (int x = 0 ; x <= numColumns ; x++) {
            Line line = new Line();
            line.startXProperty().bind(view.widthProperty().multiply(x).divide(numColumns));
            line.endXProperty().bind(line.startXProperty());
            line.setStartY(0);
            line.endYProperty().bind(view.heightProperty());
            view.getChildren().add(line);
        }

        for (int y = 0 ; y <= numRows ; y++) {
            Line line = new Line();
            line.startYProperty().bind(view.heightProperty().multiply(y).divide(numRows));
            line.endYProperty().bind(line.startYProperty());
            line.setStartX(0);
            line.endXProperty().bind(view.widthProperty());
            view.getChildren().add(line);
        }

        view.prefWidthProperty().bind(prefColumnWidth.multiply(numColumns));
        view.prefHeightProperty().bind(prefRowHeight.multiply(numRows));
    }

    public final DoubleProperty prefColumnWidthProperty() {
        return this.prefColumnWidth;
    }


    public final double getPrefColumnWidth() {
        return this.prefColumnWidthProperty().get();
    }


    public final void setPrefColumnWidth(final double prefColumnWidth) {
        this.prefColumnWidthProperty().set(prefColumnWidth);
    }


    public final DoubleProperty prefRowHeightProperty() {
        return this.prefRowHeight;
    }


    public final double getPrefRowHeight() {
        return this.prefRowHeightProperty().get();
    }


    public final void setPrefRowHeight(final double prefRowHeight) {
        this.prefRowHeightProperty().set(prefRowHeight);
    }

    public Pane getView() {
        return view;
    }

    public int getNumColumns() {
        return numColumns;
    }

    public int getNumRows() {
        return numRows;
    }

}

Here's a simple test:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class GridTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        Grid grid = new Grid(10,10);
        Scene scene = new Scene(grid.getView());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

There are a bunch of different approaches you could use for this. Note that the approach above doesn't really require subclassing at all, so you could just write a method that created the pane:

private Pane createGrid(int numColumns, int numRows) {

    Pane view = new Pane();

    for (int x = 0 ; x <= numColumns ; x++) {
        Line line = new Line();
        line.startXProperty().bind(view.widthProperty().multiply(x).divide(numColumns));
        line.endXProperty().bind(line.startXProperty());
        line.setStartY(0);
        line.endYProperty().bind(view.heightProperty());
        view.getChildren().add(line);
    }

    for (int y = 0 ; y <= numRows ; y++) {
        Line line = new Line();
        line.startYProperty().bind(view.heightProperty().multiply(y).divide(numRows));
        line.endYProperty().bind(line.startYProperty());
        line.setStartX(0);
        line.endXProperty().bind(view.widthProperty());
        view.getChildren().add(line);
    }

    view.setPrefSize(20*numColumns, 20*numRows);
    return view ;
}

Or, if you wanted something closer to an AWT/Spring way of doing things, you could subclass Region, use a Canvas, and override Region.layoutChildren(). The layoutChildren() method is called as part of a layout pass (which will be triggered if the region changes size). In this one I added support for padding:

import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.Region;

public class Grid extends Region {

    private Canvas canvas ;
    private final int numColumns ;
    private final int numRows ;

    public Grid(int numColumns, int numRows) {
        this.numColumns = numColumns ;
        this.numRows = numRows ;
        canvas = new Canvas();
        getChildren().add(canvas);
    }

    @Override
    protected void layoutChildren() {
        double w = getWidth() - getPadding().getLeft() - getPadding().getRight() ;
        double h = getHeight() - getPadding().getTop() - getPadding().getBottom() ;

        canvas.setWidth(w+1);
        canvas.setHeight(h+1);

        canvas.setLayoutX(getPadding().getLeft());
        canvas.setLayoutY(getPadding().getRight());

        GraphicsContext gc = canvas.getGraphicsContext2D();
        gc.clearRect(0, 0, w, h);

        for (int i = 0 ; i <= numColumns ; i++) {

            // adding 0.5 here centers the line in the physical pixel,
            // making it appear crisper:
            double x = w*i/numColumns + 0.5;

            gc.strokeLine(x, 0, x, h);
        }

        for (int j = 0 ; j <= numRows ; j++) {
            double y = h*j/numRows + 0.5 ;
            gc.strokeLine(0, y, w, y);
        }
    }

    @Override
    protected double computePrefWidth(double height) {
        return 20 * numColumns;
    }

    @Override
    protected double computePrefHeight(double width) {
        return 20 * numRows ;
    }

}

Here's a test for this:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class GridTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        Grid grid = new Grid(10,10);
        grid.setPadding(new Insets(20));
        Scene scene = new Scene(grid, 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Answer 2

In JavaFX, the only thing that has a GraphicsContext drawing surface is a Canvas. So you could extend Canvas and add a repaint() method that gets Canas.getGraphicsContext2D() and does its own painting from there.

Taking that further, you could extend Pane and have an overlayed Canvas as a child node (bind the Pane and Canvas width/height properties together). Then you have a parent component that supports custom painting (and reacts to mouse events via the canvas events) just like JPanel from Swing.