How to create totally custom JavaFX control? Or: how to create Pane with dynamically drawn background?

Question

I would like to create totally custom JavaFX control. I don't want "to prefer composition", because I don't have things to compose of.

For example, suppose I need a pane, which has coordinate grid inside. Pane should work as normal pane, i.e. it should be possible to add controls or geometric fugures there, but at backgroud of Pane a grid should be drawn. Additionaly, numeric values should be drawn at the edge of the pane.

All this should dynamically reflect the transform and viewport of the pane.

Another example: suppose I want to have tiled image as beckground. There are millions of tiles, like in google maps, so I can't load them as child nodes, because they will exhaust memory. I need they dynamilcally loaded and unloaded while user scrolls the pane.

Again, the pane should behave as normal pane, i.e. childs can be added to it.

How to accomplish this? I am finding, that low-level methods similar to paintConponent are either absent or deprecated. So, what to do?

UPDATE

I want to design A CONTAINER with custom background.

For example, like this:

(it should be endless, i.e. show more lines once control resized)

Container should have no children by default, but still has background. Background should not be child of a container. I, programmer, should be able to add children to this container and only after that, children should appear in the container. They should appear above background.

Like this:

Note, that we have only 2 children here.

UPDATE

In code below ScrollBarstandard control is displayed. As you can see, it contains knob, which can be moved, and arrow buttons, which can be pressed.

Simultaneously, the number of children in this control is reported as zero.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ScrollBar;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class ChildrenOfDefaultControls extends Application {
   @Override
   public void start(Stage primaryStage) throws Exception

   {

      ScrollBar scrollBar = new ScrollBar();

      AnchorPane root = new AnchorPane(scrollBar);
      AnchorPane.setLeftAnchor(scrollBar, 0.);
      AnchorPane.setRightAnchor(scrollBar, 0.);
      AnchorPane.setTopAnchor(scrollBar, 100.);

      Scene scene = new Scene(root, 800, 600);

      primaryStage.setTitle(String.valueOf(scrollBar.getChildrenUnmodifiable().size()));
      primaryStage.setScene(scene);
      primaryStage.show();

   }

   public static void main(String[] args) {
      Application.launch(ChildrenOfDefaultControls.class, args);
   }
}

Okay, I agree if everybody say it is impossible to draw like in Swing, let's do composition. But how to hide this composition from the user, as it done it ScrollBarcontrol?

Answer 1

Use Canvas to render arbitrary content using commands provided by a GraphicsContext; add the Canvas to a Pane having a suitable layout. In this example, "CanvasPane wraps an instance of Canvas in a Pane and overrides layoutChildren() to make the canvas dimensions match the enclosing Pane." Switching the root from BorderPane to StackPane allows placing controls atop the animated background. The example adds a single CheckBox, but you can add a Parent containing any desired controls. Resize the stage to see the effect.

    StackPane root = new StackPane();
    root.getChildren().addAll(canvasPane, cb);

Addendum: In this related example, cited by @jewelsea, the background is rendered directly in the implementation of layoutChildren(), also filling the Pane as the enclosing Parent is resized.

You still have Canvas as a child.

Yes, it's a convenient way to render endless background, albeit with some overhead: "Each call pushes the necessary parameters onto the buffer where they will be later rendered onto the image of the Canvas node by the rendering thread at the end of a pulse."

I want to design controls like Oracle does, from scratch, not combining existing ones.

As discussed here, "JavaFX UI controls…are built by using nodes in the scene graph," including images, text and basic geometric shapes. This significantly mitigates the overhead of the context switch required by Swing paintComponent() and even JavaFX getGraphicsContext2D(). Of course, as discussed here, "writing new UI Controls is not trivial." You'll have to decide if the effort is justified in your use case.

Can I hide part of children from control user, so that he didn't see that control contains Canvas?

Yes, Canvas is convenient, but not essential. In the example below, LinePane extends StackPane and tiles a Rectangle with a portion of an image in your question. Note that LinePane is still a StackPane in LineTest, which adds a Button in Pos.TOP_LEFT. The Rectangle occupies the Pos.CENTER by default. Overriding layoutChildren() affords an opportunity for the Rectangle to be resized dynamically.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.ImagePattern;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

/**
 * @see https://stackoverflow.com/a/43814198/230513
 */
public class LineTest extends Application {

    @Override
    public void start(Stage Stage) {
        Stage.setTitle("LineTest");
        LinePane linePane = new LinePane();
        Button button = new Button("Button");
        LinePane.setAlignment(button, Pos.TOP_LEFT);
        LinePane.setMargin(button, new Insets(50));
        linePane.getChildren().add(button);
        Scene scene = new Scene(linePane, 320, 240);
        Stage.setScene(scene);
        Stage.show();
    }

    private static class LinePane extends StackPane {

        private static final String URL = "https://i.sstatic.net/bqXKK.png";
        private final Image lines = new Image(URL);
        private final Rectangle rectangle = new Rectangle();

        public LinePane() {
            rectangle.setFill(new ImagePattern(lines, 8, 22, 34, 34, false));
            getChildren().add(rectangle);
        }

        @Override
        protected void layoutChildren() {
            super.layoutChildren();
            final double x = snappedLeftInset();
            final double y = snappedTopInset();
            final double w = snapSize(getWidth()) - x - snappedRightInset();
            final double h = snapSize(getHeight()) - y - snappedBottomInset();
            rectangle.setLayoutX(x);
            rectangle.setLayoutY(y);
            rectangle.setWidth(w);
            rectangle.setHeight(h);
        }
    }

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