Javafx grid layout leaving big spaces

Question

I am making a text based game with a GUI. I am using Javafx I am trying to line up elements using grid panes. I am trying to making something like this: example.

Here is my code and what is looks like at the moment

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.TextArea;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class test extends Application {

    Stage window;
    ListView<String> listView;
    TextArea descArea = new TextArea();
    Label healthLabel = new Label("Health:");
    Label manaLabel = new Label("Mana:");
    Label healthDisplay = new Label("100/100");
    Label manaDisplay = new Label("100/100");

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        window = primaryStage;
        window.setTitle("Game");


        GridPane grid = new GridPane();
        grid.setPadding(new Insets(10, 10, 10, 10));
        grid.setVgap(10);
        grid.setHgap(10);

        descArea.setPrefWidth(750);
        descArea.setPrefHeight(450);
        descArea.setWrapText(true);
        GridPane.setConstraints(descArea, 0, 0);

        GridPane.setConstraints(healthLabel, 1, 0);
        GridPane.setValignment(healthLabel, VPos.TOP);

        GridPane.setConstraints(healthDisplay, 2, 0);
        GridPane.setValignment(healthDisplay, VPos.TOP);

        GridPane.setConstraints(manaLabel, 1, 1);
        GridPane.setValignment(manaLabel, VPos.TOP);

        GridPane.setConstraints(manaDisplay, 2, 1);
        GridPane.setValignment(manaDisplay, VPos.TOP);


        listView = new ListView<>();
        listView.getItems().addAll("Action 1", "Action 2", "Action 3", "Action 4");
        listView.setPrefWidth(260);
        listView.setPrefHeight(150);
        GridPane.setValignment(listView, VPos.BASELINE);
        GridPane.setConstraints(listView, 0, 2);


        grid.getChildren().addAll(descArea, healthLabel, healthDisplay, manaLabel, manaDisplay, listView);

        Scene scene = new Scene(grid, 950, 750);
        window.setScene(scene);
        window.show();
    }

and it shows up like this example2 I am trying to move the mana up under the health label and make the list box smaller. Is the grid the right way to do it or is there a better way?

Thanks

Answer 1

I am trying to move the mana up under the health label

Let the descArea span two rows. That will mean the two labels lie in one row each (rows 0 and 1) and the description area spans both rows:

// GridPane.setConstraints(descArea, 0, 0);
// (node, columnIndex, rowIndex, columnSpan, rowSpan):
GridPane.setConstraints(descArea, 0, 0, 1, 2);

and make the list box smaller

You set the preferred size of the list box with

listView.setPrefWidth(260);
listView.setPrefHeight(150);

By default, the GridPane will resize each control to fill the width of the cell containing it. Since the list box is in the same column as the text area, which has a preferred width of 750, this will force the list box to also have a width of 750. You can fix this in two ways:

Set the max width of the list box:

listView.setMaxWidth(260);

or, if you prefer a "GridPane" solution, use some column constraints to override the default behavior:

ColumnConstraints leftCol = new ColumnConstraints();
leftCol.setFillWidth(false);
grid.getColumnConstraints().addAll(leftCol, new ColumnConstraints());