JavaFX: BorderPane and VBox

This entry is part 10 of 55 in the series JavaFX

VBox in BorderPane will layout the nodes in a vertical column.  It is good for displaying a list of items.

Here, I create a list using a ListView class.  This is a list created from an observable list.  Observable lists are usually lists that are updated constantly.  We will talk about observable list in our later posts.

package javafxapplication9;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.control.ListView;
import javafx.stage.Stage;

public class JavaFXApplication9 extends Application {

    public void start(Stage stage) {

        BorderPane border = new BorderPane();

        border.setPrefSize(500, 400);

        HBox hbox = addHorizontalBox();

        Scene scene = new Scene(border);
        stage.setTitle("Layout Sample");;

    private VBox addVBox() {

        VBox vbox = new VBox();
        vbox.setPadding(new Insets(10)); // Set all sides to 10
        vbox.setSpacing(8);              // Gap between nodes

        Text title = new Text("Top 5 Rock Albums");
        title.setFont(Font.font("Arial", FontWeight.BOLD, 14));

        ListView<String> list = new ListView<String>();
        ObservableList<String> items = FXCollections.observableArrayList(
                "Like A Rolling Stone", "Archtung Baby", "Help!", "Smell Like Teen Spirit");

        return vbox;

    private HBox addHorizontalBox() {

        HBox hbox = new HBox();
        hbox.setPadding(new Insets(15, 12, 15, 12));
        hbox.setSpacing(10);   // Gap between nodes
        hbox.setStyle("-fx-background-color: blue;");

        Button buttonAccept = new Button("Accept");
        buttonAccept.setPrefSize(100, 20);

        Button buttonNext = new Button("Next");
        buttonNext.setPrefSize(100, 20);

        hbox.getChildren().addAll(buttonAccept, buttonNext);

        return hbox;

    public static void main(String[] args) {



We have the above display as we have this line in line 29:


We could modify it to have a display that take the entire column.



Series Navigation<< JavaFX: BorderPane class
JavaFX: Making the previous example simpler >>