FlowPane in JavaFX with Code | 100% Perfect for beginners

Contents

How to use the FlowPane in JavaFX

FlowPane in JavaFX is a very simple layout pane that lays out its children in rows and columns. The JavaFX FlowPane is something like a combination of HBox and VBox, so if you have a FlowPane layout in your application. “Flow Pane,” the name itself, lets the nodes flow horizontally or vertically. JavaFX FlowPane is used in situations where the content is necessary to display.

For example, you have a series of buttons horizontally or vertically. When the user resizes the window that doesn’t have a FlowPane layout, if the window is too small, the contents will not be displayed. Using FlowPane helps the layout to display the content as often as possible. If the window becomes smaller and smaller, the children inside the JavaFX FlowPane will flow horizontally or vertically. FlowPane in JavaFX may be arranged left to right or right to left, controlled by the nodeOrientation property.

Creating the JavaFX FlowPane

Creating the FlowPane in JavaFX is very easy. FlowPane provides several ways to make the FlowPane layout. You can create an empty FlowPane. You can also specify the orientation, spacing, and adding and initial nodes in the FlowPane. Now, let’s go over the example code given below and learn how to make the FlowPane layout in JavaFX.

// Create an empty FlowPane
FlowPane flowPane1 = new FlowPane();
        
// Create an empty FlowPane and set the orientation
FlowPane flowPane2 = new FlowPane(Orientation.VERTICAL);
        
// Create an empty FlowPane with 5px horizontal and 10px vertical spacing
FlowPane flowPane3 = new FlowPane(5, 10);
        
// Create an empty FlowPane with orientation and spacing
FlowPane flowPane4 = new FlowPane(Orientation.VERTICAL, 5, 10);
        
// Create a FlowPane with initial nodes inside
FlowPane flowPane5 = new FlowPane(new Button("Button 1"), new Button("Button 2"));

FlowPane has properties you need to learn. These properties are helpful when you are using the FlowPane Layout. Take time to read the descriptions of each property. These are the alignment, rowValignment, columnHalignment, hgap, vgap, orientation, prefWrapLength. Please proceed below.

alignment – The alignment property is to align the FlowPane, and the default value is Pos.TOP_LEFT.
rowValignment – This property specifies the vertical alignment of the nodes within each row in a horizontal FlowPane.
columnHalignment – This property specifies the horizontal alignment of the nodes within each column in a vertical FlowPane.
hgap and vgap – The hgap and vgap properties specify the nodes’ horizontal and vertical gaps.
orientation – The orientation property specifies the orientation of the FlowPane.
prefWrapLength – The preferred width in a horizontal FlowPane and the preferred height in a vertical FlowPane where the content should wrap and the default value is 400.

Alignment Property

The alignment property of the JavaFX FlowPane controls the alignment of its content. You need to set the parameter of the setAlignment() method, and the default value is Pos.TOP_LEFT. The Pos value contains a vertical alignment and horizontal alignment. In a horizontal FlowPane, each row is aligned using the hpos value of the alignment, and rows (the entire content) are aligned using the vpos value. In a vertical FlowPane, each column is aligned using the vpos value of the alignment, and the columns (the entire content) are aligned using the hpos value. Proceed to the example given below.

// Create an empty FlowPane
FlowPane root = new FlowPane();
        
// Setting the alignment to center right
root.setAlignment(Pos.CENTER_RIGHT);

Button b1 = new Button("One");
Button b2 = new Button("Two");
Button b3 = new Button("Three");

root.getChildren().addAll(b1, b2, b3);

Scene scene = new Scene(root);
stage.setScene(scene);
stage.setTitle("Understanding FlowPane");
stage.show();

Output

JavaFX FlowPane rowValignment and columnHalignment Properties

JavaFX FlowPane layouts its children at their preferred sizes. Rows and Columns could be of different sizes, but you can align the nodes or children in each row or column using the rowValignment and columnHalignment properties.

In a horizontal JavaFX FlowPane, the nodes in one row may be of different heights. The row’s height is the largest of the preferred heights of all nodes in the row. The rowValignment property lets you specify the vertical alignment of the nodes in each row. While in a vertical JavaFX FlowPane, the nodes in one column may be of different widths. The column’s width is the largest of the preferred widths of all nodes in the column. The columnHalignment property lets you specify the horizontal alignment of children in each column. Proceed to the example given below.

public void start(Stage stage) {
     FlowPane f1 = createFlowPane(HORIZONTAL, VPos.TOP, HPos.LEFT);
     FlowPane f2 = createFlowPane(HORIZONTAL, VPos.CENTER, HPos.LEFT);
     FlowPane f3 = createFlowPane(VERTICAL, VPos.CENTER, HPos.RIGHT);
     
     HBox root = new HBox(f1, f2, f3);

    Scene scene = new Scene(root);
    stage.setScene(scene);
    stage.setTitle("Understanding FlowPane");
    stage.show();
}

private FlowPane createFlowPane(Orientation orientation, VPos rowAlign, HPos colAlign){
    
    Text text = new Text();
    if(orientation == Orientation.HORIZONTAL){
        text.setText(rowAlign.toString());
    }else{
        text.setText(colAlign.toString());
    }
    
    TextArea textArea = new TextArea(orientation.toString());
    textArea.setPrefColumnCount(5);
    textArea.setPrefRowCount(3);
    
    FlowPane flowPane = new FlowPane(orientation, 5, 10);
    flowPane.setRowValignment(rowAlign);
    flowPane.setColumnHalignment(colAlign);
    flowPane.setPrefSize(175, 130);
    flowPane.getChildren().addAll(text, textArea);
    flowPane.setStyle("-fx-padding: 10; -fx-border-style: solid inside; -fx-border-width: 2; -fx-border-insets: 5; -fx-border-radius: 5; -fx-border-color: red;");
    
    return flowPane;
}

Output

hgap and vgap Properties

The hgap and vgap in the JavaFX FlowPane are very easy to use. Using these properties will help you set gaps in between the nodes. Using the hgap property, the horizontal spacing between the nodes of children in a row. The vgap property specifies the spacing between the nodes or children in a column. Proceed to the example given below to learn how the hgap and vgap work.

// create a FlowPane with 5px hgap and 10px vgap
FlowPane flowPane = new FlowPane(5, 10);

// or setting the gap using the method
flowPane.setHgap(15);
flowPane.setVgap(10);

Orientation Property

The orientation property lets you set the orientation of FlowPane. To set the orientation of the FlowPane, you can set it to Orientation.HORIZONTAL. You can also set the orientation using the setter method. Proceed to the example given below.

// create a horizontal FlowPane
FlowPane flowPane = new FlowPane(Orientation.HORIZONTAL);

// setting the FlowPane's orientation using the setter method
flowPane.setOrientation(Orientation.HORIZONTAL);

prefWrapLength Property

The prefWrapLength property is the preferred width in a horizontal FlowPane or the preferred height in a vertical FlowPane where content should wrap. The prefWrapLength property is used to compute the preferred size of the FlowPane. Treat the value of this property as a hint to resize your FlowPane.