Ljutgu Las
Ljutgu Las

Reputation: 75

JavaFX Grid Pane button "taking" 2 cells

I'm trying to make a calculator like GUI with JavaFX. The problem is that I don't know the way to add button to "take" two cells. See the photo bellow.

In that empty space i want to add a button Calc

I tried adding it to the position 0, 3 but it spaces all the buttons

Here's my code

Main:

public class Test extends Application {
    @Override
    public void start(Stage primaryStage) {
        BorderPane borderPane = new BorderPane();
        borderPane.setPadding(new Insets(5, 35, 5, 35));

        TextField txf = new TextField("6.333");
        txf.setAlignment(Pos.TOP_RIGHT);
        txf.setPrefHeight(35);

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

        String[] signs = new String[]{"7", "8", "9", "+",
                                      "4", "5", "6", "-",
                                      "3", "2", "1", "*"};
        int signIndex = 0;

        for(int i = 0; i<3; i++) {
            for(int j = 0; j<4; j++) {
                CustomButton btnTemp = new CustomButton(signs[signIndex]);
                grid.add(btnTemp, j, i);
                signIndex++;
            }
        }

        CustomButton btnZero = new CustomButton("0", 100, 20);
        //grid.add(btnZero, 0, 3);

        CustomButton btnDot = new CustomButton(".");
        grid.add(btnDot, 2, 3);
        CustomButton btnSlash = new CustomButton("/");
        grid.add(btnSlash, 3, 3);

        CustomButton btnC = new CustomButton("C", 100, 20);
        grid.add(btnC, 4, 0);
        CustomButton btnSqrt = new CustomButton("√", 100, 20);
        grid.add(btnSqrt, 4, 1);
        CustomButton btnPlusMinus = new CustomButton("+/-", 100, 20);
        grid.add(btnPlusMinus, 4, 2);
        CustomButton btnEqu = new CustomButton("=", 100, 20);
        grid.add(btnEqu, 4, 3);

        borderPane.setTop(txf);
        borderPane.setCenter(grid);

        Scene scene = new Scene(borderPane, 400, 200);

        primaryStage.setTitle("Calculator");
        primaryStage.setScene(scene);
        primaryStage.setResizable(false);
        primaryStage.show();
    }
}

Upvotes: 2

Views: 518

Answers (1)

Itai
Itai

Reputation: 6911

Use setColumnSpan:

GridPane.setColumnSpan(btnC, 2); 

(Assuming you meant btnC, I can't understand which button you want to span 2 columns... )

Upvotes: 2

Related Questions