I wish to align checkboxes in javaFX

Question

I need to create a GUI with aligned checkboxes like in this image:

My attempted code results in the following image:

I used 3 HBoxes, with each HBox containing two toppings. I then added the HBoxes to the ToppingsOptionPane.

What do I need to do to align the checkboxes?

I tried using 2 VBoxes containing three topping each, with the first VBox positioned center left and the second VBox center right. The second VBox ended up displayed under the first VBox, and not beside it. So that didn't work.

import javafx.event.ActionEvent;
import javafx.geometry.Pos;
import javafx.scene.control.CheckBox;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import java.text.NumberFormat;

//************************************************************************
// ToppingsOptionPane.java
// Shows use of check boxes.
//************************************************************************

public class ToppingsOptionPane extends VBox{
    private Text phrase;
    private double totalPrice;
    private CheckBox pepperoni, olives, bacon, ham, mushroom, meatballs;
    NumberFormat fmt1 = NumberFormat.getCurrencyInstance();

    //--------------------------------------------------------------------
    // Constructor. Sets up pane with Text object and check boxes
    // that determine the price of the pizza.
    //--------------------------------------------------------------------
    public ToppingsOptionPane(){

        totalPrice = 10;
        phrase = new Text("Pizza Cost: " + fmt1.format(totalPrice));
        phrase.setFont(new Font("Helvetica", 20));

        pepperoni = new CheckBox("Pepperoni");
        pepperoni.setOnAction(this::processCheckBoxAction);

        olives = new CheckBox("Olives");
        olives.setOnAction(this::processCheckBoxAction);

        HBox toppings1 = new HBox(pepperoni,olives);
        toppings1.setAlignment(Pos.CENTER);
        toppings1.setSpacing(20);

        bacon = new CheckBox("Bacon");
        bacon.setOnAction(this::processCheckBoxAction);

        ham = new CheckBox("Ham");
        ham.setOnAction(this::processCheckBoxAction);

        HBox toppings2 = new HBox(bacon,ham);
        toppings2.setAlignment(Pos.CENTER);
        toppings2.setSpacing(20);

        mushroom = new CheckBox("Mushroom");
        mushroom.setOnAction(this::processCheckBoxAction);

        meatballs = new CheckBox("Meatballs");
        meatballs.setOnAction(this::processCheckBoxAction);

        HBox toppings3 = new HBox(mushroom,meatballs);
        toppings3.setAlignment(Pos.CENTER);
        toppings3.setSpacing(20);

        setSpacing(20); // between text and checkboxes
        getChildren().addAll(toppings1,toppings2,toppings3,phrase);
    }

    //--------------------------------------------------------------------
    // Event handler. Updates price of the pizza.
    //--------------------------------------------------------------------
    public void processCheckBoxAction(ActionEvent event){

        int sum = 0;
        double toppings = 0;

        if (pepperoni.isSelected())
            sum+=1;
        if (olives.isSelected())
            sum+=1;
        if (bacon.isSelected())
            sum+=1;
        if (ham.isSelected())
            sum+=1;
        if (mushroom.isSelected())
            sum+=1;
        if (meatballs.isSelected())
            sum+=1;

        toppings = sum * 0.50;
        phrase.setText("Pizza Cost: " + fmt1.format(totalPrice + toppings));
    }
}

import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.stage.Stage;

//************************************************************************
// PizzaToppings.java
// Shows use of check boxes.
//************************************************************************
public class PizzaToppings extends Application {

    //--------------------------------------------------------------------
    // Creates and shows program window
    //--------------------------------------------------------------------
    public void start(Stage primaryStage){

        ToppingsOptionPane pane = new ToppingsOptionPane();
        pane.setAlignment(Pos.CENTER);
        pane.setStyle("-fx-background-color: wheat");

        Scene scene = new Scene(pane,400,250);

        primaryStage.setTitle("Pizza Cost");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    //--------------------------------------------------------------------
    // Main method. Calls launch method.
    //--------------------------------------------------------------------
    public static void main(String[] args){
        launch(args);
    }
}

Answer 1

First of all, I would really recommend you to use FXML if you have the chance, it really helps with problems like this. The solution to your problem is pretty easy actually, try to see JavaFX as a big Tetris game, what I did was using two Vboxes each one containing 3 elements, then putting the Vboxes inside an HBox.

VBox toppings1V = new VBox(pepperoni, bacon, mushroom);
toppings1V.setSpacing(20);
VBox toppings2V = new VBox(olives, ham, meatballs);
toppings2V.setSpacing(20);
HBox hBox = new HBox(toppings1V, toppings2V);
hBox.setSpacing(30);
hBox.setAlignment(Pos.CENTER);