Add ScrollPane into FlowPane

Question

I want to insert ScrollPane into FlowPane:

public FlowPane infrastructurePane()
    {

        final FlowPane flow = new FlowPane();
        flow.setPadding(new Insets(5, 5, 5, 5));
        flow.setVgap(5);
        flow.setHgap(5);
        flow.setAlignment(Pos.CENTER);

        final ScrollPane scroll = new ScrollPane();

        scroll.setHbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);    // Horizontal scroll bar
        scroll.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);    // Vertical scroll bar
        scroll.setContent(flow);
        scroll.viewportBoundsProperty().addListener(new ChangeListener<Bounds>()
        {
            @Override
            public void changed(ObservableValue<? extends Bounds> ov, Bounds oldBounds, Bounds bounds)
            {
                flow.setPrefWidth(bounds.getWidth());
            }
        });

        //flow.setPrefWrapLength(170); // preferred width allows for two columns
        flow.setStyle("-fx-background-color: white;");

        for (int i = 0; i < 28; i++)
        {
            flow.getChildren().add(generateRectangle());
        }

        String cssURL = "/com/dx57dc/css/ButtonsDemo.css";
        String css = this.getClass().getResource(cssURL).toExternalForm();
        flow.getStylesheets().add(css);

        return flow;

    }

    public Rectangle generateRectangle()
    {

        Rectangle rect2 = new Rectangle(10, 10, 10, 10);
        rect2.setId("app");
        rect2.setArcHeight(8);
        rect2.setArcWidth(8);
        //rect2.setX(10);
        //rect2.setY(160);
        rect2.setStrokeWidth(1);
        rect2.setStroke(Color.WHITE);
        rect2.setWidth(220);
        rect2.setHeight(180);

        return rect2;
    }

But when I run the code I cannot see the ScrollPane. Can you tell me what am I missing into my code in order to make the FlowPane scrollable?

EDIT

Answer 1

Accroding to the code, you want "Add FlowPane into ScrollPane" right? The scrollpane cannot be seen because it is defined in infrastructurePane() method locally but not added to the scene. Return scrollpane in that method. Also you need to set the prefHeight of the flowpane when the view port is changed. Also you may want to use stackpane as a top container. Here the full demo:

public class FlowInScroll extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        StackPane root = new StackPane();
        root.getChildren().addAll(infrastructurePane());
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
    }

    public ScrollPane infrastructurePane() {

        final FlowPane flow = new FlowPane();
        flow.setPadding(new Insets(5, 5, 5, 5));
        flow.setVgap(5);
        flow.setHgap(5);
        flow.setAlignment(Pos.CENTER);

        final ScrollPane scroll = new ScrollPane();

        scroll.setHbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);    // Horizontal scroll bar
        scroll.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);    // Vertical scroll bar
        scroll.setContent(flow);
        scroll.viewportBoundsProperty().addListener(new ChangeListener<Bounds>() {
            @Override
            public void changed(ObservableValue<? extends Bounds> ov, Bounds oldBounds, Bounds bounds) {
                flow.setPrefWidth(bounds.getWidth());
                flow.setPrefHeight(bounds.getHeight());
            }
        });

        //flow.setPrefWrapLength(170); // preferred width allows for two columns
        flow.setStyle("-fx-background-color: yellow;");

        for (int i = 0; i < 28; i++) {
            flow.getChildren().add(generateRectangle());
        }

        String cssURL = "/com/dx57dc/css/ButtonsDemo.css";
        String css = this.getClass().getResource(cssURL).toExternalForm();
        flow.getStylesheets().add(css);

        return scroll;
    }

    public Rectangle generateRectangle() {

        Rectangle rect2 = new Rectangle(10, 10, 10, 10);
        rect2.setId("app");
        rect2.setArcHeight(8);
        rect2.setArcWidth(8);
        //rect2.setX(10);
        //rect2.setY(160);
        rect2.setStrokeWidth(1);
        rect2.setStroke(Color.WHITE);
        rect2.setWidth(220);
        rect2.setHeight(180);

        return rect2;
    }

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