How to crop grid columns manually in javafx?

Question

I am trying to create a layout with gridpane that contains 2 rows and 2 columns. The upper left region and the upper right region are wide; they receive 50% of it. But in the second row, I need the lower right area to get 60% of the width, so the lower left area is 40%.

I also tried using columns such as [[2col., 2col] [1col, 3col]]. That didn't work either.

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 GridPane , think that it has three columns with a width of 40%, 10%, and 50%. The top left node spans the first and second columns, the top right node only the third column. The bottom left is only in the first column, the bottom right is the second and third columns.

Sort of:

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

In the 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.

Answer 2

There is a very good solution from @James_D there. In my code, I assigned the same sizes to all vBox. Thus, there is another problem - in fact, we can call this a correction of the main error. Here is a snippet of working 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, 650, 550); VBox zoneTopLeft = createBaseContainer(300,300); VBox zoneTopRight = createBaseContainer(300,300); VBox zoneBottomLeft = createBaseContainer(200,200); VBox zoneBottomRight = createBaseContainer(400,200); GridPane page=new GridPane(); page.setHgap(10); page.setVgap(10); page.add(zoneTopLeft, 0, 0); page.setColumnSpan(zoneTopLeft, 2); page.add(zoneTopRight, 2, 0); page.setColumnSpan(zoneTopRight,2); page.add(zoneBottomLeft, 0, 1); page.add(zoneBottomRight, 1, 1); page.setColumnSpan(zoneBottomRight,3); root.getChildren().addAll(page); primaryStage.setScene(scene); primaryStage.show(); } private VBox createBaseContainer(double width,double height) { VBox base = new VBox(); // box base.setPrefWidth(width); base.setPrefHeight(height); 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); }