GridPane中的JavaFX居中VBox

Question

would really appreciate some help with my problem.

I'm using JavaFX and the NetBeans IDE. I am making a very simple launch window for a desktop client. The window currently looks like this image.

Current Look:

Wanted Look (editted with paint):

In other words, I want the buttons to be:

1. centered underneath the 'Welcome' text
2. maintain their current width

My current setup is:

I have a GridPane acting as the root. Not sure why JavaFX chose to use (col,row), but that's how I'll represent my setup in the following:

• @GridPane(0,0) -> 'Welcome' Text
• @GridPane(0,1) -> VBox (this VBox contains the 2 buttons shown in above image)

The relevant code (or what I think is relevant, please correct me if I am wrong) is below:

//adds GridPane to Scene
GridPane grid = new GridPane();
RowConstraints row1 = new RowConstraints();
row1.setPercentHeight(25);
grid.getRowConstraints().add(row1);
grid.setAlignment(Pos.CENTER);
Scene scene = new Scene(grid, 400, 300,Color.WHITESMOKE);

//Create welcome message and add it to grid, and align it to the center
Text sceneTitle = new Text("Welcome");
grid.add(sceneTitle,0,0);
GridPane.setHalignment(sceneTitle,HPos.CENTER);

//Create buttons and fix their widths
Button newBtn = new Button("Create New Project");
Button loadBtn = new Button("Load Existing Project");
newBtn.setMaxWidth(150);
loadBtn.setMaxWidth(150);

//Create a VBox, add children to it, and then add it to the grid
VBox vBtns = new VBox();
vBtns.setSpacing(5);
vBtns.getChildren().addAll(newBtn,loadBtn);
grid.add(vBtns,0,1);

I've tried a lot of different things.. to mention some of the more 'logical' ones:

//1. Center the VBox within its current GridPane cell
GridPane.setHalignment(vBtns,HPos.CENTER);

//2. Center the buttons within the VBox 
newBtn.setAlignment(Pos.CENTER);
loadBtn.setAlignment(Pos.CENTER);

I've never been good at GUI programming. It's very discouraging when something that should be so simple takes so long to figure out. Are there any developers out there who can help me find a solution?

Answer 1

To fix it with your current setup, you just need:

vBtns.setAlignment(Pos.CENTER);

However, this just seems overly complex. Why not just do

import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.RowConstraints;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class LayoutTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        GridPane grid = new GridPane();
        RowConstraints row1 = new RowConstraints();
        row1.setPercentHeight(25);
        grid.getRowConstraints().add(row1);

        ColumnConstraints colConstraints = new ColumnConstraints();
        colConstraints.setHalignment(HPos.CENTER);
        grid.getColumnConstraints().add(colConstraints);

        grid.setAlignment(Pos.CENTER);
        Scene scene = new Scene(grid, 400, 300,Color.WHITESMOKE);

        //Create welcome message and add it to grid, and align it to the center
        Text sceneTitle = new Text("Welcome");
        sceneTitle.setStyle("-fx-font-size:48;");
        grid.add(sceneTitle,0,0);

        //Create buttons and fix their widths
        Button newBtn = new Button("Create New Project");
        Button loadBtn = new Button("Load Existing Project");
        newBtn.setMaxWidth(150);
        loadBtn.setMaxWidth(150);

        grid.add(newBtn, 0, 1);

        GridPane.setMargin(loadBtn, new Insets(5, 0, 5, 0));
        grid.add(loadBtn, 0, 2);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}