How to create a scrollable panel of components in JavaFX?

Question

So, basically, I'm trying to achieve this a scrollable set of components with spacing etc. and the ability to add more components. The list of components are custom anchorpane components.

Here's an example that I got working:

The problem is that that uses a gridpane inside of a scrollpane and for some reason the gridpane does not fill the width of the scrollpane at all. So, if I resize, everything stays where it is instead of stretching inside the gridpane columns. Also, if I were to stick to a gridpane (over a tilepane which seems to work better except when the components float next to each other despite the orientation being vertical and prefcolumns being 1), how would I add more rows? The idea of this is to list github repos in a nice, UX pleasing, fashion.

Thanks for any insight. Also: those repos aren't mine - I have none and a guy on a website made that (it's not well made so don't compare me to him lol).

Solution

This looks like you should use a VBox to hold your AnchorPanes and put them in a ScrollPane. Set fitToWidth to true on the ScrollPane and it should force the anchor panes to take up the whole width (and no more) of the scroll pane's viewport, assuming you don't change the maxWidth property on the AnchorPane from its default.

Mocked-up example (which can easily be done in FXML if you prefer):

import java.util.Random;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ScrollingVBox extends Application {


    @Override
    public void start(Stage primaryStage) {

        final Random rng = new Random();
        VBox content = new VBox(5);
        ScrollPane scroller = new ScrollPane(content);
        scroller.setFitToWidth(true);

        Button addButton = new Button("Add");
        addButton.setOnAction(e -> {
            AnchorPane anchorPane = new AnchorPane();
            String style = String.format("-fx-background: rgb(%d, %d, %d);"+
                    "-fx-background-color: -fx-background;",
                    rng.nextInt(256),
                    rng.nextInt(256),
                    rng.nextInt(256));
            anchorPane.setStyle(style);
            Label label = new Label("Pane "+(content.getChildren().size()+1));
            AnchorPane.setLeftAnchor(label, 5.0);
            AnchorPane.setTopAnchor(label, 5.0);
            Button button = new Button("Remove");
            button.setOnAction(evt -> content.getChildren().remove(anchorPane));
            AnchorPane.setRightAnchor(button, 5.0);
            AnchorPane.setTopAnchor(button, 5.0);
            AnchorPane.setBottomAnchor(button, 5.0);
            anchorPane.getChildren().addAll(label, button);
            content.getChildren().add(anchorPane);
        });

        Scene scene = new Scene(new BorderPane(scroller, null, null, addButton, null), 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Another solution might be to use a ListView. (This would be preferable if you had many items to display.) Create a class representing the items you are displaying in each AnchorPane and a custom list cell to display them.