Search code examples
javajavafxfxmldistributionvbox

How equitably distribute node in VBox in JavaFX FXML


How can I distribute equitably several section in a VBox? In other words, I have this FXML code:

<Tab text="SOO properties">
    <content>
        <VBox>
            <HBox>
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Name" />
                <TextField />
            </HBox>
            <HBox>
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Number of MobileEntity slots" />
                <TextField />
            </HBox>
            <HBox>
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="MobileEntity buffer size" />
                <TextField />
            </HBox>
            <HBox>
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Connections number" />
                <TextField />
            </HBox>
            <HBox>
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Peripherals number" />
                <TextField />
            </HBox>
        </VBox>
    </content>
</Tab>

That product this view:

enter image description here

How can I obtain something like that?

enter image description here


Solution

  • According to GoXr3Plus, GridPane works good for this case:

    <Tab text="SOO properties">
        <GridPane prefHeight="230.0" prefWidth="358.0">
            <columnConstraints>
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            </columnConstraints>
            <rowConstraints>
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            </rowConstraints>
            <children>
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Name" />
                <TextField GridPane.columnIndex="1" />
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Number of MobileEntity slots" GridPane.rowIndex="1" />
                <TextField GridPane.columnIndex="1" GridPane.rowIndex="1" />
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="MobileEntity buffer size" GridPane.rowIndex="2" />
                <TextField GridPane.columnIndex="1" GridPane.rowIndex="2" />
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Connections number" GridPane.rowIndex="3" />
                <TextField GridPane.columnIndex="1" GridPane.rowIndex="3" />
                <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Peripherals number" GridPane.rowIndex="4" />
                <TextField GridPane.columnIndex="1" GridPane.rowIndex="4" />
            </children>
        </GridPane>
    </Tab>
    

    Produces this view:

    enter image description here