Updated March 20, 2023
Introduction to JavaFX FlowPane
In JavaFX, FlowPane is a class that lays out its child nodes in the boundary of flow pane. There are 2 types of flowpanes- horizontal and vertical where the former lays out the child nodes in rows that wrap up along the pane width and latter lays out the child nodes in columns that wrap up along the pane height. Java FlowPane can be instantiated from the class javafx.scene.layout.FlowPane. Now, let us see the syntax of FlowPane.
Syntax:
FlowPane fp = new FlowPane();Constructors
There are several constructors for JavaFX FlowPane. It can be parameterized or non-parameterized based on the requirement.
They are:
- FlowPane(): A FlowPane layout will be created with an hgap or vgap equal to 0.
- FlowPane( double hg, double val ): A FlowPane layout will be created with a specified hgap or vgap.
- FlowPane(double hg, double vg, Node…ch): A FlowPane layout of horizontal will be created with a specified hgap or vgap.
- FlowPane(Node…ch): A FlowPane layout of horizontal will be created with hgap or vgap equal to 0.
- FlowPane(Orientationor): A FlowPane layout will be created with hgap or vgap equal to 0 and orientation mentioned.
- FlowPane(Orientationor, double hg, double vg): A FlowPane layout will be created with hgap, vgap and orientation mentioned.
- FlowPane(Orientationor, double hg, double vg, Node .. ch): A FlowPane layout will be created with hgap, vgap and orientation mentioned.
- FlowPane(Orientationor, Node .. ch): A FlowPane layout will be created with hgap, vgap equal to 0 and orientation mentioned.
Methods of JavaFX FlowPane
Java FlowPane has different methods that implement different functionalities. The following are the commonly used methods that are used in FlowPane.
- clearConstraints(Nodechild): FlowPane constraints will be removed from the child node.
- computeMinWidth(double height): The minimum width of the region will be computed using this method.
- computeMinHeight(double width): The minimum height of the region will be computed using this method.
- getAlignment(): Alignment property’s value will be returned.
- setAlignment(Posv): Alignment property’s value will be set.
- getMargin(Nodechild): The margin constraints value will be returned.
- computePrefWidth(double height): ThePreferred width for the region that is needed for the given height will be computed.
- computePrefHeight(double width): The preferred height for the region that is needed for the given width will be computed.
Examples to Implement JavaFX FlowPane
Now, let us see different examples to implement JavaFX FlowPane.
Example #1
java program to demonstrate Flow pane
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
/sample class that extends the application class
public class JavaFXFlowPaneExample extends Application {
//application starts at this point
@Override
public void start(Stage s) throws Exception {
//create label 1
Label labl1=new Label("Name of your institution");
//create label 2
Label labl2=new Label("Experience : (In months) ");
//create textfield 1
TextField txt1=new TextField();
//create textfield 2
TextField txt2=new TextField();
//create a button
Button b=new Button ("Click here to login ! !");
//create Flowpane
FlowPane fp=new FlowPane(30.0,30.0,labl1,txt1,labl2,txt2,b);
//create scene
Scene sc = new Scene(fp,900,200);
//set scene
s.setScene(sc);
//display result
s.show();
}
//main method
public static void main(String[] args) {
launch(args);
}
}Output:
Here, two text fields with 2 labels and a button are displayed on executing the code. These text fields and buttons are on the same row. It is because the default alignment of flow pane is horizontal. If the labels or buttons are more than the dimension specified, then the rest of them will be placed in the next row.
Example #2
java program to demonstrate Flow pane with only buttons
import java.awt.Insets;
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
//class that extends application class
public class JavaFXFlowPaneExample extends Application {
//application starts at this point
@Override
public void start(Stage s) throws Exception {
//set title
s.setTitle("FlowPane Example");
//create buttons
Button bt1 = new Button("Fruits");
Button bt2 = new Button("Vegetables");
Button bt3 = new Button("Groceries");
Button bt4 = new Button("Households");
Button bt5 = new Button("Juices");
Button bt6 = new Button("Diary products");
//create Flow pane
FlowPane fp = new FlowPane();
//Set the horizontal gap
fp.setHgap(25);
//observable list
ObservableList<Node> li = fp.getChildren();
//Adding all the nodes to the flow pane
li.addAll(bt1, bt2, bt3, bt4,bt5,bt6);
//create scene
Scene sc = new Scene(fp, 700, 100);
//set scene
s.setScene(sc);
//display the result
s.show();
}
//main method
public static void main(String[] args) {
Application.launch(args);
}
}Output:
A Flow pane is created with 6 buttons in a single row. If more buttons are added, it will be present in successive rows.
Example #3
java program to demonstrate Flow pane with only buttons
import java.awt.Insets;
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Orientation;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
//class that extends application class
public class JavaFXFlowPaneExample extends Application {
//application starts at this point
@Override
public void start(Stage s) throws Exception {
//set title
s.setTitle("FlowPane Example");
//create buttons
Button bt1 = new Button("Fruits");
Button bt2 = new Button("Vegetables");
Button bt3 = new Button("Groceries");
Button bt4 = new Button("Households");
Button bt5 = new Button("Juices");
Button bt6 = new Button("Diary products");
//create Flow pane
FlowPane fp = new FlowPane();
//Set the horizontal gap
fp.setHgap(25);
//set the vertical gap
fp.setVgap(10);
//set the orientation
fp.setOrientation(Orientation.VERTICAL);
//observable list
ObservableList<Node> li = fp.getChildren();
//Adding all the nodes to the flow pane
li.addAll(bt1, bt2, bt3, bt4,bt5,bt6);
//create scene
Scene sc = new Scene(fp, 500, 500);
//set scene
s.setScene(sc);
//display the result
s.show();
}
//main method
public static void main(String[] args) {
Application.launch(args);
}
}Output:
On executing the code, a dialog box appears will all the buttons arranged vertically. This is done with the help of orientation set as vertical. Here, unlike the programs mentioned above, a vertical and horizontal gap is also set.
Recommended Articles
This is a guide to JavaFX FlowPane. Here we discuss the basic concept, Constructors and Methods of JavaFX FlowPane along with respective examples. You may also look at the following articles to learn more –
