javafx vbox and gridpane

Question

Problem: I have a confusion in between vbox and gridpane.. Usually when you could use vbox, you could as well use gridPane of 1 column and n rows, so I am and not sure when to use each and the difference.

Facts:

• I know that a gridpane has n rows and n columns.

• I know that vbox would only list components vertically. (n rows 1 column)

Confusion: It comes when say I want to list 40-50 (horizontal boxes or other components) vertically, I don't know which of them to pick cause sometimes I see people adding those components into a vbox as children, and others would use gridpane n(rows)x1(column) and would always create a row constraint dynamically.

Further more: In java swing, I would use gridBagLayout cause in my case it was the only layout to benefit from the constraint feature since those components are of different heights. However, in javafx, I can still put components of different sizes in a vbox as well or use the gridPane which is the alternative of gridbaglayout in java swing.

Summary:

In swing gridbaglayout is the only solution, in javafx vbox or gridpane(alternative to gridbaglayout in swing)?

------ Edit ------

When I put my hbox inside a gridpane cell, the components inside the box resize, however, they don't when I put the hbox inside a vbox.

Example:

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>

<VBox maxHeight="1080.0" maxWidth="1920.0" minHeight="600.0" minWidth="800.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <ScrollPane hbarPolicy="NEVER">
         <content>
            <VBox>
               <children>
                  <HBox alignment="CENTER_LEFT" maxHeight="50.0" maxWidth="350.0" minHeight="50.0" minWidth="250.0" spacing="10.0">
                     <children>
                        <Label text="label">
                           <HBox.margin>
                              <Insets left="10.0" />
                           </HBox.margin>
                        </Label>
                        <TextField />
                        <ImageView fitHeight="24.0" fitWidth="24.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="" />
                           </image>
                           <HBox.margin>
                              <Insets right="10.0" />
                           </HBox.margin>
                        </ImageView>
                     </children>
                  </HBox>
                  <HBox alignment="CENTER_LEFT" maxHeight="50.0" maxWidth="350.0" minHeight="50.0" minWidth="250.0" spacing="10.0">
                     <children>
                        <Label text="another label">
                           <HBox.margin>
                              <Insets left="10.0" />
                           </HBox.margin>
                        </Label>
                        <TextField />
                        <ImageView fitHeight="24.0" fitWidth="24.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="" />
                           </image>
                           <HBox.margin>
                              <Insets right="10.0" />
                           </HBox.margin>
                        </ImageView>
                     </children>
                  </HBox>
               </children>
            </VBox>
         </content>
      </ScrollPane>
   </children>
</VBox>

Why aren't the components resizing accordingly to the current size of the hbox?

Answer 1

Use VBox , unless you need features only provided by GridPane . There are less layout parameters to specify for VBox which makes it easier to use and reduces the potential sources of errors. Furthermore it's more expensive to do the layout with GridPane which could slow down updates for applications changing the size of the node often.

There are things you cannot achieve using VBox though (at least not in a convenient way):

• Placing multiple children in the same "cell" (could be done by wrapping those children in another layout)
• rowSpan
• specify the relative size of "rows" (could be done by binding the prefHeight properties of children, but it's more clean using GridPane )
• alignment of children in "cells"
• leaving "cells" empty (could be done applying a margin, but this gets complicated for relative heights)
• ...