java - How to align objects in JavaFX clearly

Question

I've to do some basic java FX work but I have a problem and I can't handle that. Firstly, my target layout is:

and what I've done is creating 2 Grid Panes and try to align them to each other. At first, it was seeming like it's ok. But as I wrote the rest, it started to seems very bad and I started to can't align anything. It was pretty simple to make a bottom button menu. But I couldn't align the Text Fields and Labels despite whatever I did. Here is my code `

addButton = new Button("Add");
firstButton = new Button("First");
nextButton = new Button("Next");
previousButton = new Button("Previous");
lastButton = new Button("Last");
updateByIdButton = new Button("Update By Id");
searchByIdButton = new Button("Search By Id");
cleanButton = new Button("Clean textFields");

GridPane root = new GridPane();

HBox bottomMenu = new HBox();

bottomMenu.getChildren().addAll(addButton, firstButton, nextButton, previousButton, lastButton, updateByIdButton, searchByIdButton, cleanButton);
bottomMenu.setSpacing(10);
BorderPane border = new BorderPane();
bottomMenu.setPadding(new Insets(10, 10, 10, 20));
border.setBottom(bottomMenu);

GridPane labels = new GridPane();
border.setCenter(root);

labels.setVgap(8);
labels.setHgap(5);
labels.setPadding(new Insets(10, 10, 10, 80));
Label idLabel = new Label("ID : ");
GridPane.setConstraints(idLabel, 0, 4);
Label nameLabel = new Label("Name : ");
GridPane.setConstraints(nameLabel, 0, 6);
Label streetLabel = new Label("Street : ");
GridPane.setConstraints(streetLabel, 0, 10);
Label cityLabel = new Label("City : ");
GridPane.setConstraints(cityLabel, 0, 13);
Label searchUpdateLabel = new Label("Search/Update ID : ");
GridPane.setConstraints(searchUpdateLabel, 19, 3);
Label genderLabel = new Label("Gender : ");
GridPane.setConstraints(genderLabel, 20, 6);
Label zipLabel = new Label("Zip : ");
GridPane.setConstraints(zipLabel, 25, 6);
labels.getChildren().addAll(idLabel, nameLabel, streetLabel, cityLabel, searchUpdateLabel, genderLabel, zipLabel);
labels.getColumnConstraints().add(new ColumnConstraints(50));
labels.getColumnConstraints().add(new ColumnConstraints(400));
root.getChildren().add(labels);

GridPane fields = new GridPane();
fields.setPadding(new Insets(10, 10, 10, 80));
fields.setVgap(10);
TextField idField = new TextField();
idField.setDisable(true);
idField.setMaxWidth(50);
GridPane.setConstraints(idField, 1, 3);
TextField nameField = new TextField();
GridPane.setConstraints(nameField, 1, 5);
TextField streetField = new TextField();
GridPane.setConstraints(streetField, 1, 6);
TextField cityField = new TextField();
GridPane.setConstraints(cityField, 1, 7);
TextField zipField = new TextField();
GridPane.setConstraints(zipField, 16, 6);
TextField genderField = new TextField();
GridPane.setConstraints(genderField, 21, 6);
TextField searchUpdateField = new TextField();
GridPane.setConstraints(searchUpdateField, 21, 3);
fields.getChildren().addAll(idField, nameField, streetField, cityField, zipField, genderField, searchUpdateField);
fields.getColumnConstraints().add(new ColumnConstraints(50));
fields.getColumnConstraints().add(new ColumnConstraints(400));
root.getChildren().add(fields);     

Also, my outputs seem like that when I try to align these things by using GridPane.setConstraints() or adding new columns.

question from:https://stackoverflow.com/questions/65645839/how-to-align-objects-in-javafx-clearly

Answer 1

It looks like you're treating the GridPane like a one dimensional object, when it's actually two dimensional. All your elements in your target don't line up like a grid, but it is possible to get something very close to the target with just a GridPane, and you have to set it up with some elements spanning several columns:

public class GridPaneSample extends GridPane {

public GridPaneSample() {
    add(new Label("ID"), 0, 0);
    Label searchIdLabel = new Label("Search/Update ID");
    TextField searchIdField = new TextField();
    TextField nameField = new TextField("Merve");
    TextField streetField = new TextField("Adnan Menderes");
    TextField cityField = new TextField("Ayden");
    add(searchIdLabel, 2, 0);
    add(new Label("Name"), 0, 1);
    add(new Label("Street"), 0, 2);
    add(new Label("City"), 0, 3);
    add(new Label("Gender"), 3, 3);
    add(new Label("Zip"), 5, 3);
    add(new TextField("1"), 1, 0);
    add(searchIdField, 3, 0);
    add(nameField, 1, 1);
    add(streetField, 1, 2);
    add(cityField, 1, 3);
    add(new TextField("F"), 4, 3);
    add(new TextField("1234"), 6, 3);
    setColumnSpan(searchIdLabel, 2);
    setColumnSpan(searchIdField, 4);
    setColumnSpan(nameField, 6);
    setColumnSpan(streetField, 6);
    setColumnSpan(cityField, 2);
    setVgap(4);
    setHgap(4);
    ColumnConstraints col50 = new ColumnConstraints(50);
    getColumnConstraints()
            .addAll(col50, new ColumnConstraints(70), new ColumnConstraints(100), col50, new ColumnConstraints(30),
                    new ColumnConstraints(20), col50);
    setPadding(new Insets(10, 0, 0, 60));
}
}

It gets a little ugly, and doesn't really fit the use case for GridPane. It's probably easier to just use a VBox, and then put each row into an HBox. You can align the first TextField "column" by putting the first label in each row in an HBox of its own, and set the minWidth of that HBox to the same on each row. Like this:

public class BoxesSample extends VBox {

public BoxesSample() {
    HBox row1 = new HBox(6, fixedSpaceLabel("ID"), sizedTextField("1", 60), new Label("Search/Update ID"),
                         sizedTextField("", 154));
    HBox row2 = new HBox(6, fixedSpaceLabel("Name"), sizedTextField("Merve", 320));
    HBox row3 = new HBox(6, fixedSpaceLabel("Street"), sizedTextField("Adnan Menderes", 320));
    HBox row4 = new HBox(6, fixedSpaceLabel("City"), sizedTextField("Aydin", 160), new Label("Gender"),
                         sizedTextField("F", 20), new Label("Zip"), sizedTextField("1234", 60));
    getChildren().addAll(row1, row2, row3, row4);
    setPadding(new Insets(10, 0, 0, 60));
    setSpacing(4);
}

private HBox fixedSpaceLabel(String labelText) {
    HBox results = new HBox(new Label(labelText));
    results.setMinWidth(50);
    results.setAlignment(Pos.CENTER_LEFT);
    return results;
}

private TextField sizedTextField(String initialValue, double width) {
    TextField results = new TextField(initialValue);
    results.setMinWidth(width);
    results.setMaxWidth(width);
    return results;
}
}