JavaFX - FlowPane Layout

FlowPane Layout in JavaFX

The flow pane layout arranges all of its nodes in a flow. In a horizontal Flow Pane, elements are wrapped based on their height, while in a vertical Flow Pane, elements are wrapped according to their width.

In JavaFX, the class named FlowPane of the package javafx.scene.layout represents the Flow Pane. To create a flow pane layout within our JavaFX application, instantiate this class using any of the below constructor −

• FlowPane() − It constructs a new horizontal FlowPane layout.

• FlowPane(double hGap, double vGap) − It creates a new horizontal FlowPane layout with the specified hGap and vGap.

• FlowPane(double hGap, double vGap, Node childNodes) − Constructs a horizontal FlowPane layout with the specified hGap, vGap and nodes.

• FlowPane(Orientation orientation) − It creates a new FlowPane layout with the specified orientation. It can be either HORIZONTAL or VERTICAL.

This class contains the following properties −

Example

The following program is an example of the FlowPane layout. In this, we are inserting four button in the horizontal flow pane. Save this code in a file with the name FlowPaneExample.java.

import javafx.application.Application; 
import javafx.geometry.Insets; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.layout.FlowPane; 
import javafx.scene.shape.Sphere; 
import javafx.stage.Stage; 
         
public class FlowPaneExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //Creating button1 
      Button button1 = new Button("Button1");       
      
      //Creating button2 
      Button button2 = new Button("Button2");       
      
      //Creating button3
      Button button3 = new Button("Button3");       
      
      //Creating button4 
      Button button4 = new Button("Button4");       
      
      //Creating a Flow Pane 
      FlowPane flowPane = new FlowPane();    
       
      //Setting the horizontal gap between the nodes 
      flowPane.setHgap(25); 
       
      //Setting the margin of the pane  
      flowPane.setMargin(button1, new Insets(20, 0, 20, 20)); 
      
      //Adding all the nodes to the flow pane 
      flowPane.getChildren().addAll(button1, button2, button3, button4); 
        
      //Creating a scene object 
      Scene scene = new Scene(flowPane, 400, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Flow Pane Example in JavaFX"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){
      launch(args); 
   } 
}

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls FlowPaneExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls FlowPaneExample

Output

On executing, the above program generates a JavaFX window as shown below.

Example

In the following example, we are going to create a FlowPane with vertical orientation. To set the orientation, we will use the parameterized constructor of the FlowPane class by passing the Orientation.VERTICAL enum value as an argument. Save this code in a file with the name JavafxFlowpane.java.

import javafx.application.Application; 
import javafx.geometry.Orientation; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.layout.FlowPane; 
import javafx.scene.shape.Sphere; 
import javafx.stage.Stage; 
         
public class JavafxFlowpane extends Application { 
   @Override 
   public void start(Stage stage) {      
      //Creating button1 
      Button button1 = new Button("Button1");       
      
      //Creating button2 
      Button button2 = new Button("Button2");       
      
      //Creating button3
      Button button3 = new Button("Button3");       
      
      //Creating button4 
      Button button4 = new Button("Button4");       
      
      //Creating a Flow Pane 
      FlowPane flowPane = new FlowPane(Orientation.VERTICAL);    
       
      //Setting the horizontal gap between the nodes 
      flowPane.setVgap(15); 
       
      //Setting the margin of the pane  
      flowPane.setAlignment(Pos.CENTER); 
      
      //Adding all the nodes to the flow pane 
      flowPane.getChildren().addAll(button1, button2, button3, button4); 
        
      //Creating a scene object 
      Scene scene = new Scene(flowPane, 400, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Flow Pane Example in JavaFX"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){
      launch(args); 
   } 
}

To compile and execute the saved java file from the command prompt, use the following commands −

javac --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxFlowpane.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxFlowpane

Output

When we execute the above Java program, it will generate a JavaFX window displaying the following output −