How to span columns of a gridpane manually in javafx?

Question

I am trying to design a layout with gridpane which contains 2 rows and 2 columns. Top-left area and top right area shares width , they both get 50% of it. But in second row i need bottom right area to get 60% of width so bottom left area 40%.

I've also tried spaning columns like [[2col.,2col][1col,3col]] matrix. It didn't work neither.

Here is my code;

public class Main extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
    Group root = new Group();
    primaryStage.setTitle("Hello World");
    Scene scene = new Scene(root, 1700, 1200);


    //zoneTopLeft, spans 2 column
    VBox zoneTopLeft = createBaseContainer();
    //zoneTopRight, spans 2 columns
    VBox zoneTopRight = createBaseContainer();
    //zoneBottomLeft, spans 1 columns
    VBox zoneBottomLeft = createBaseContainer();
    //zoneBottomRight,spans 3 columns
    VBox zoneBottomRight = createBaseContainer();



    ColumnConstraints topRight=new ColumnConstraints();
    topRight.setPrefWidth(300);
    ColumnConstraints topLeft=new ColumnConstraints();
    topRight.setPrefWidth(300);
    ColumnConstraints bottomRight=new ColumnConstraints();
    topRight.setPrefWidth(400);
    ColumnConstraints bottomLeft=new ColumnConstraints();
    topRight.setPrefWidth(200);

    GridPane page=new GridPane();
    page.getColumnConstraints().addAll(topLeft,topRight,bottomLeft,bottomRight);
    page.setHgap(10);
    page.setVgap(10);
    page.add(zoneTopLeft, 0, 0);
    //        page.setColumnSpan(zoneTopLeft, 2);
    page.add(zoneTopRight, 1, 0); //2,0 for spaning
    //        page.setColumnSpan(zoneTopRight,2);
    page.add(zoneBottomLeft, 0, 1);
    //        page.setColumnSpan(zoneBottomLeft,1);
    page.add(zoneBottomRight, 1, 1);
    //        page.setColumnSpan(zoneBottomRight,3);

    root.getChildren().addAll(page);


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


}

private VBox createBaseContainer() {
    VBox base = new VBox(); // box
    base.setPrefWidth(250);
    base.setPrefHeight(200);
    base.setStyle("-fx-border-width: 1;-fx-border-color: red");
    //  base.prefWidthProperty().bind(scene.widthProperty());

    BorderPane top = new BorderPane(); // top area of base
    top.prefWidthProperty().bind(base.prefWidthProperty());
    top.setPrefHeight(33);
    top.setLeft(setBaseTitle());
    top.setRight(setBaseButtons());
    top.setStyle("-fx-border-width: 1;-fx-border-color: blue");

    StackPane bottom = new StackPane(); // bottom are of base, content keeper

    base.getChildren().addAll(top, bottom);
    return base;
}


private Node setBaseButtons() {
    return new HBox();
}

private Node setBaseTitle() {

    return new Label();
}


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

Answer 1

To do this with a GridPane, think of it as having three columns with widths 40%, 10%, and 50%. The top left node spans the first and second column, the top right just the third column. The bottom left is only in the first column, the bottom right spans the second and third column.

Something like:

|   c1   |c2|     c3    |
_________________________
|-----------|-----------|
|--------|--------------|

In code, do something like:

Node topLeft ;
Node topRight ;
Node bottomLeft ;
Node bottomRight ;

GridPane page = new GridPane();
// page.add(Node, colIndex, rowIndex, colSpan, rowSpan):
page.add(topLeft, 0, 0, 2, 1);
page.add(topRight, 2, 0, 1, 1);
page.add(bottomLeft, 0, 2, 1, 1);
page.add(bottomRight, 1, 1, 2, 1);


ColumnConstraints col1Constraints = new ColumnConstraints();
col1Constraints.setPercentWidth(40);
ColumnConstraints col2Constraints = new ColumnConstraints();
col2Constraints.setPercentWidth(10);
ColumnConstraints col3Constraints = new ColumnConstraints();
col3Constraints.setPercentWidth(50);
page.getColumnConstraints().addAll(col1Constraints, col2Constraints, col3Constraints);

Edit: text changed from getColumnContraints to getColumnConstraints.