CODEWITHSUNDEEP
javauser-interfacejavafxmethodslayout
user15367506
user15367506

Reputation:

Center objects in HBox and VBox (JavaFx)

I am making a simple GUI for one of my assignments. I have created a bare bone interface and I am currently having some problems. The program displays everything fine it's just that I want to center the objects so it would look neater. What I tried is to put the button (belongs on the bottom) to a borderPane and align it to the center using the setCetner method but that did nothing. is there another way I can try to center all my objects on my pane?

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

public class Main extends Application {

    private TextField startDate;
    private Text start;
    private Text end;
    private TextField endDate;
    private Button count;

    @Override
    public void start(Stage primaryStage) {

        start = new Text("Start Date: ");
        end = new Text("End Date: ");

        startDate = new TextField("1/1/2000");
        endDate = new TextField(getDate());

        count = new Button("Count");

        HBox startLine = new HBox(10);
        startLine.getChildren().addAll(start, startDate);


        HBox endLine = new HBox(10);
        endLine.getChildren().addAll(end, endDate);

        HBox button = new HBox();
        button.getChildren().add(count);
        BorderPane borderPane = new BorderPane();
        borderPane.setCenter(button);


        VBox vbox = new VBox(10);
        vbox.getChildren().addAll(startLine, endLine, button);


        Pane root = new Pane();

        root.getChildren().addAll(vbox);

        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("Date Counter");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public String getDate(){
        DateFormat dateFormat = new SimpleDateFormat("MM/dd/yyyy");
        Date date = new Date();
        return dateFormat.format(date);
    }

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

}

Upvotes: 0

Views: 958

Answers (1)

Stefan Warminski
Stefan Warminski

Reputation: 1835

To let the UI look nicer I prefer GridPane (e. g. the Textfields are aligned)

// set the "coordinates" of the nodes
GridPane.setConstraints(start, 0, 0);
GridPane.setConstraints(startDate, 1, 0);
GridPane.setConstraints(end, 0, 1);
GridPane.setConstraints(endDate, 1, 1);
// center button here
GridPane.setConstraints(count, 0, 2, 2, 1, HPos.CENTER, VPos.CENTER);

// some spacing, otherwise the nodes stick together
Insets spacing = new Insets(3d);
GridPane.setMargin(start, spacing);
GridPane.setMargin(startDate, spacing);
GridPane.setMargin(end, spacing);
GridPane.setMargin(endDate, spacing);
GridPane.setMargin(count, spacing);

// nodes to the grid
GridPane grid = new GridPane();
grid.getChildren().addAll(start, startDate, end, endDate, count);

Scene scene = new Scene(grid, 400, 300);

If you want to center the complete grid you have to add grid.setAlignment(Pos.TOP_CENTER);.

Upvotes: 1

Related Questions