Create FlowPane using FXML

javafx.scene.layout.FlowPane lays out its children in a flow that wraps at the flowpane's boundary.

Modify Sample.fxml in the last article "Create GridPane using FXML" to replace GridPane with FlowPane. Default orientation in "horizontal".

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.textfield.*?>

<FlowPane fx:controller="javafxml.Sample" xmlns:fx="http://javafx.com/fxml" 
    prefHeight="200" prefWidth="200">
        
        <Text text="java-Buddy"/>
        <Label text="Who are you?"/>
        <TextField id="textfield" fx:id="textfield"/>
        <Button id="button"  text="Click Me!" 
            onAction="#handleButtonAction" fx:id="button"/>
        <Label id="label" fx:id="label"/>

</FlowPane>

FlowPane with orientation in "vertical".

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.textfield.*?>

<FlowPane fx:controller="javafxml.Sample" xmlns:fx="http://javafx.com/fxml" 
    prefHeight="70" prefWidth="350" orientation="vertical">
        
        <Text text="java-Buddy"/>
        <Label text="Who are you?"/>
        <TextField id="textfield" fx:id="textfield"/>
        <Button id="button"  text="Click Me!" 
            onAction="#handleButtonAction" fx:id="button"/>
        <Label id="label" fx:id="label"/>

</FlowPane>