GridPane to horizontally/vertically fill the whole Stage

Question

This is what my layout looks like with gridlines, this is how it looks when I resize the main window, and this is what I want the final result to be. Basically, I need some tips on how to make my GridPane fill the whole Stage horizontally and/or vertically while some of its cells keep the specified width/height. I've tried everything I can think of at the moment, but still can't find the solution. Using AnchorPane could be the thing that would help me achieve the wanted resut, but I'm still trying to figure out how. I don't want to use SceneBuilder, as I'm not a big fan of "drag and drop" programming =)

@Override
public void start(final Stage primaryStage){
    BorderPane border = new BorderPane();
    GridPane grid = new GridPane();

    grid.getColumnConstraints().add(new ColumnConstraints(70));     //column 1
    grid.getColumnConstraints().add(new ColumnConstraints());       //column 2
    grid.getColumnConstraints().add(new ColumnConstraints(70));     //column 3
    grid.getColumnConstraints().add(new ColumnConstraints(100));    //column 4
    grid.getColumnConstraints().add(new ColumnConstraints());       //column 5
    grid.getColumnConstraints().add(new ColumnConstraints());       //column 6
    grid.getColumnConstraints().add(new ColumnConstraints());       //column 7
    grid.getColumnConstraints().add(new ColumnConstraints());       //column 8

    grid.setVgap(10);
    grid.setHgap(5);
    grid.setPadding(new Insets(20,20,20,20));
    grid.setGridLinesVisible(false);

    Button btnDownload = new Button("Download next");
    Label lblDownloadNext = new Label("next download in");
    Label lblTimer = new Label("03:21");
    VBox vboxTimer = new VBox();
    vboxTimer.setAlignment(Pos.CENTER);
    vboxTimer.getChildren().addAll(lblDownloadNext,lblTimer);
    Label lblTimer.setId("timer");
    Button btnStop = new Button("STOP");
    Button btnStop.setMaxWidth(Double.MAX_VALUE);

    grid.add(btnDownload, 0, 0, 2, 1);
    grid.add(vboxTimer, 2, 0, 5, 1);
    grid.add(btnStop, 7, 0);

    Label lblCSVPath = new Label("CSV path:");
    TextField txtCSVPath = new TextField("Select a CSV/TXT file");
    txtCSVPath.setId("csvpath");
    txtCSVPath.setEditable(false);
    Button btnCSVBrowse = new Button("Browse");
    Button btnCSVParse = new Button("Parse");
    btnCSVParse.setMaxWidth(Double.MAX_VALUE);
    grid.add(lblCSVPath, 0, 1);
    grid.add(txtCSVPath, 1, 1, 5, 1);
    grid.add(btnCSVBrowse, 6, 1);
    grid.add(btnCSVParse, 7, 1);

    Label lblOutput = new Label("Save to:");
    TextField txtOutputPath = new TextField("Select Output folder");
    txtOutputPath.setId("outputpath");
    txtOutputPath.setEditable(false);
    Button btnOutputBrowse = new Button("Browse");
    btnOutputBrowse.setMaxWidth(Double.MAX_VALUE);
    grid.add(lblOutput, 0, 2);
    grid.add(txtOutputPath, 1, 2, 6, 1);
    grid.add(btnOutputBrowse, 7, 2);

    TableView<CSVData> tblDoi = new TableView<CSVData>();
    tblDoi.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
    TableColumn columnDoi = new TableColumn("DOI URL");
    TableColumn columnUt = new TableColumn("UT");
    columnUt.setMinWidth(135);
    columnUt.setMaxWidth(175);
    tblDoi.getColumns().addAll(columnDoi, columnUt);
    grid.add(tblDoi, 0, 3, 8, 2);

    Label lblArticlesDownloaded = new Label("count");
    Label lblArticlesDownloadedCount = new Label("0");
    lblArticlesDownloadedCount.setId("downloadedCount");
    VBox vboxDownloaded = new VBox();
    vboxDownloaded.setAlignment(Pos.TOP_CENTER);
    vboxDownloaded.getChildren().addAll(lblArticlesDownloaded, lblArticlesDownloadedCount);
    Label lblArticlesLeft = new Label("left");
    Label lblArticlesLeftCount = new Label("0");
    lblArticlesLeftCount.setId("leftCount");
    VBox vboxLeft = new VBox();
    vboxLeft.setAlignment(Pos.TOP_CENTER);
    vboxLeft.getChildren().addAll(lblArticlesLeft, lblArticlesLeftCount);
    Label lblArticlesTotal = new Label("total");
    Label lblArticlesTotalCount = new Label("0");
    lblArticlesTotalCount.setId("totalCount");
    VBox vboxTotal = new VBox();
    vboxTotal.setAlignment(Pos.TOP_CENTER);
    vboxTotal.getChildren().addAll(lblArticlesTotal, lblArticlesTotalCount);

    Button btnStart = new Button("START");
    btnStart.setMaxWidth(Double.MAX_VALUE);
    Button btnExit = new Button("EXIT");
    btnExit.setMaxWidth(Double.MAX_VALUE);
    grid.add(vboxDownloaded, 0, 5, 1, 1);
    grid.add(vboxLeft, 1, 5);
    grid.add(vboxTotal, 2, 5);
    grid.add(btnStart, 3, 5, 3, 1);
    grid.add(btnExit, 6, 5, 2, 1);

    MenuBar menuBar = new MenuBar();
    Menu menuView = new Menu("View");
    CheckMenuItem menuViewWebViewItem = new CheckMenuItem("Show WebView");
    CheckMenuItem menuViewConsole = new CheckMenuItem("Show Console");
    menuView.getItems().addAll(menuViewWebViewItem, menuViewConsole);
    menuBar.getMenus().add(menuView);

    HBox menuBox = new HBox();
    menuBox.getChildren().add(menuBar);
    HBox.setHgrow(menuBar, Priority.ALWAYS);

    HBox gridBox = new HBox();
    gridBox.getChildren().add(grid);
    gridBox.setAlignment(Pos.CENTER);

    border.setTop(menuBox);
    border.setCenter(gridBox);

    Scene scene = new Scene(border, 500, 600);
    scene.getStylesheets().add(Main.class.getResource("application.css").toExternalForm());
    primaryStage.setTitle("Science Direct PDF Downloader");
    primaryStage.setScene(scene);
    primaryStage.setResizable(true);
    primaryStage.setMinWidth(500);
    primaryStage.setMinHeight(400);
    primaryStage.show();

I've left out what I think were the unnecessary bits of code. Thanks!

Solution 1

I think this will help you. you can sort out with help of Scene Builder. first of all you need to set constraints for grid pane. In below picture you can make by set them. according you side.

At here you maintain what side you want to increase.it also done by fxml.

 <GridPane AnchorPane.bottomAnchor="-15.0" AnchorPane.leftAnchor="161.0" AnchorPane.rightAnchor="270.0" AnchorPane.topAnchor="30.0">

here AnchorPane.bottomAnchor="-15.0" this are the primay location and now they are spread when the window resize...

If you want to change something in elements.you can use withProperty() of grid pane. Its something like this.

GridPane pne  =new GridPane();
    pne.widthProperty().addListener(new ChangeListener<Number>
    () {

        @Override
        public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) {
            System.out.println("now do here what you want with inner objects");
        }
    }); 

by using these property you can also change in inner elements and other properties of grid pane.

Solution 2

trick lies in the obscure row and column constraints, this did it for me

for(int row = 0; row < 4; row++) {
        messageButtonGrid.getRowConstraints().add( 
                new RowConstraints(Region.USE_COMPUTED_SIZE, 
                        Region.USE_COMPUTED_SIZE, 
                        Region.USE_COMPUTED_SIZE, 
                        Priority.SOMETIMES, 
                        VPos.TOP, 
                        true));
    }

Comments

[E. Normous]

I may be missing something, but creating a new AnchorPane and adding my Grid to it and setting AnchorPane.setLeftAnchor(grid, 50.0); AnchorPane.setRightAnchor(grid, 50.0); AnchorPane.setTopAnchor(grid, 50.0); AnchorPane.setBottomAnchor(grid, 50.0) leaves me with this. So, GridPane is still not filling the whole AnchorPane horizontally/vertically.

[E. Normous]

Okay, but how do I do that programmatically? grid.setPrefSize(width, height); doesn't do anything. I am able to make GridPane fill the whole AnchorPane in SceneBuilder as seen here.

[E. Normous]

GridPane still doesn't fill width/height of the AnchorPane when you add some nodes to it. For example, this is what I get when I gp.setGridLinesVisible(true); gp.add(new Label("label"), 0, 0); gp.add(new Button("button"), 0, 1);. What I want to achieve is something like this, but programmatically. I guess I should stick to SceneBuilder as I don't see this being achieved any other way.

[Anshul Parashar]

@E.Normous programtically its happen by widthProperty() as a shown above..you add here your conditions. but i will suggest its better if you used scene builder because its very light weighted tool and provides reliablity..now its up to you. if you like my answer then vote it up..if you have further queries about widhtProperty you can write me :)

[E. Normous]

I guess I'll be using SceneBuilder after all, bummer. Thanks for the suggestions!