How to use the JavaFX VBox
The JavaFX VBox is also very easy to use because it is similar to the HBox. The VBox JavaFX layout its children in a single vertical column, while the HBox layout its children in a horizontal style. So, if you are creating an application that places the nodes in column style or vertical style, you will need to use the VBox to place them perfectly.
Like HBox, you cannot set the locations for your nodes or children. The JavaFX VBox automatically computes them and puts them in the right place. You can still control the location by settings the constraints but about it later and let’s move on creating the VBox in JavaFX.
Creating the JavaFX VBox
Working with JavaFX VBox is very similar to working with an HBox. The difference are they work in opposite directions. To create the JavaFX VBox, we need to make the VBox object using the VBox constructor. We can create the VBox objects with or without setting the spacing and the initial set of children. The following example below will show you how to create an empty VBox, create the VBox with spacing, and create the VBox with spacing and initial children. Take a look at the given code below.
// Creates an empty VBox
VBox obj1 = new VBox();
// Creates a VBox with spacing of 15px
VBox obj2 = new VBox(15);
// Creates a VBox with spacing and initial children
Button btn1 = new Button("Button 1");
Button btn2 = new Button("Button 2");
VBox obj3 = new VBox(15, btn1, btn2);
There are some VBox properties that you should be aware of. The following three VBox properties are listed below.
- alignment – The alignment property helps you align the nodes inside the VBox layout area.
- fillWidth – This property is used to specify the resizable children to fill the full width of the VBox.
- spacing – This property is used to specify the spacing of the children. The default value is set to 0.
Now, let us go over each of the properties and show you examples of each. Let’s start with:
Alignment Property of VBox JavaFX
The Alignment property is effortless to use, and it is used to specify how the nodes are aligned within the content area of the VBox. VBox allocates just enough space for its content to layout all children at their preferred size. The Alignment property has several geometry positions, like BASELINE_CENTER, BASELINE_LEFT, BASELINE_RIGHT, BOTTOM_CENTER, BOTTOM_LEFT, BOTTOM_RIGHT, CENTER, CENTER_LEFT, CENTER_RIGHT, TOP_CENTER, TOP_LEFT, and TOP_RIGHT. You may notice the effect of the alignment property if the VBox is bigger than its preferred size. The following example will show how the alignment property is used in the JavaFX program.
// Set the alignment vbox.setAlignment(Pos.BOTTOM_RIGHT);
FillWidth Property
The FillWidth property specifies the resizable node to fill the full widthof the content area of the VBox. Note that this property only affects nodes that allow for horizontal expansion. For example, if you have a button inside your VBox and the maximum width of the button is based on its preferred width, this doesn’t expand the button if you will use the fillWidth property.
To expand the button, you need to set its maximum width to Double.MAX_VALUE. If you don’t want to fill the children’s width or nodes, you can disable it by setting the fillHeight property to false. The following example will show how the fillHeight property is used.
VBox root = new VBox(15);
Button b1 = new Button("One");
Button b2 = new Button("Two");
Button b3 = new Button("Three");
// Set the max width of the buttons to Double.MAX_VALUE
// so they can grow horizontally
b1.setMaxWidth(Double.MAX_VALUE);
b2.setMaxWidth(Double.MAX_VALUE);
b3.setMaxWidth(Double.MAX_VALUE);
root.setStyle("-fx-padding: 10;");
root.getChildren().addAll(b1, b2, b3);
Scene scene = new Scene(root);
stage.setScene(scene);
stage.setTitle("Understanding VBox");
stage.show();
Spacing Property
This property is also straightforward to use. The Spacing property specifies the vertical distance between the nodes in an VBox. The default value of the spacing is set to 0px. To set the spacing, you can set it using the setSpacing() method or using constructors. To apply the spacing between the children of the VBox, It should be like this. vbox.setSpacing(10);. If you don’t want to use the setSpacing() method, you may also use the constructor like VBox vbox = new VBox(10);.
There is another feature in VBox. You can let the nodes or children grow vertically by using the setVgrow() method. The Vgrow constraints specify whether a node expands vertically when additional space is available. The VBox class provides setVgrow() and setMargin() method to specify these constraints.
The following code is an example of setting the Vgrow method, VBox.setVgrow(textArea, Priority.ALWAYS); if you want to add margins, do this. VBox.setMargin(textArea, new Insets(5));.
