JavaFX - VBox Layout

VBox Layout in JavaFX

VBox which is also known as Vertical Box, is a layout control that arranges all the nodes of a JavaFX application in a single vertical column. The VBox layout pane is represented by a class named VBox of the package javafx.scene.layout. Instantiating this class will create an VBox layout. List of constructors of this class is as follows −

• VBox() − It is the default constructor that constructs an VBox layout with 0 spacing.

• VBox(double spacingVal) − It constructs a new VBox layout with the specified spacing between nodes.

• VBox(double spacingVal, Node nodes) − This parameterized constructor of VBox class accepts children nodes as well as spacing between them and creates a new VBox layout with the specified components.

• VBox(Node nodes) − It creates an VBox layout with specified children nodes and 0 spacing.

The figure below shows three boxes positioned in a vertical layout −

The VBox class comes with several pre-defined properties which are listed below −

• alignment − This property represents the alignment of the nodes inside the bounds of the VBox. You can set value to this property by using the setter method setAlignment().

• fillHeight − This property is of Boolean type and on setting this to be true; the resizable nodes in the VBox are resized to the height of the VBox. You can set value to this property using the setter method setFillHeight().

• spacing − This property is of double type and it represents the space between the children of the VBox. You can set value to this property using the setter method setSpacing().

• padding − It represents the space between the border of VBox and its child nodes. We can set value to this property using the setter method setPadding() which accepts Insets constructor as a parameter value.

In addition to these, this class also provides the following methods −

Example

The following program is an example of the VBox layout. In this, we are inserting a text field and two buttons namely play and stop. Save this code in a file with the name VBoxExample.java.

import javafx.application.Application; 
import javafx.geometry.Insets; 
import javafx.scene.Scene;
import javafx.scene.control.Button; 
import javafx.scene.control.TextField; 
import javafx.stage.Stage; 
import javafx.scene.layout.VBox;

public class VBoxExample extends Application {   
   @Override 
   public void start(Stage stage) {       
      //creating a text field   
      TextField textField = new TextField();       
      
      //Creating the play button 
      Button playButton = new Button("Play");       
      
      //Creating the stop button 
      Button stopButton = new Button("stop"); 
       
      //Instantiating the VBox class  
      VBox box = new VBox();    
      
      //Setting the space between the nodes of a HBox pane 
      box.setSpacing(10);    
      
      //Adding all the nodes to the VBox 
      box.getChildren().addAll(textField, playButton, stopButton);   

      //Setting the margin to the nodes 
      box.setMargin(textField, new Insets(20, 20, 20, 20)); 
      box.setMargin(playButton, new Insets(20, 20, 20, 20)); 
      box.setMargin(stopButton, new Insets(20, 20, 20, 20));      
      
      //Creating a scene object
      Scene scene = new Scene(box, 400, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Vbox Example in JavaFX"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls VBoxExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls VBoxExample

Output

On executing, the above program generates a JavaFX window as shown below.

Example

In this example, we will use the parameterized constructor of the VBox class to create a vertical layout. Save this code in a file with the name VBoxExample.java.

import javafx.application.Application; 
import javafx.geometry.Pos; 
import javafx.scene.Scene;
import javafx.scene.control.Button; 
import javafx.scene.control.TextField; 
import javafx.stage.Stage; 
import javafx.scene.layout.VBox;

public class VBoxExample extends Application {   
   @Override 
   public void start(Stage stage) {       
      //creating a text field   
      TextField textField = new TextField();       
      
      //Creating the play button 
      Button playButton = new Button("Play");       
      
      //Creating the stop button 
      Button stopButton = new Button("stop"); 
       
      //Instantiating the VBox class  
      VBox box = new VBox(10, textField, playButton, stopButton);    
      box.setAlignment(Pos.CENTER);
      
      //Creating a scene object
      Scene scene = new Scene(box, 400, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Vbox Example in JavaFX"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls VBoxExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls VBoxExample

Output

On executing, the above program generates the following output.