how to set TextField in 4 columns spaces JavaFx

Question

I want to make a calculator in JavaFx. I am using GridPane in order to set the position of calculator buttons and a Textfield. My question is: how can I set TextField in 4 column spaces?

In the following example:

  TextField userTextField = new TextField();
    grid.add(userTextField, 0, 0,3,3);

What does it mean the coordinates 0,0, 3, 3 in grid? What does it stand for? Any help is appreciated, thank you very much.

In the following javafx program i only want to set TextField and buttons of my calculator sample :

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

    public class calculadora_css extends Application{

     @Override
        public void start(Stage primaryStage) {
               primaryStage.setTitle("JavaFX Welcome");
               GridPane grid = new GridPane();
               grid.setAlignment(Pos.TOP_CENTER);
               grid.setHgap(20);
               grid.setVgap(20);
               grid.setPadding(new Insets(10, 10, 10, 10));

               TextField userTextField = new TextField();

               grid.add(userTextField, 0, 0,3,1);

               Button btn1 = new Button("7");
               grid.add(btn1, 0,1);
               Button btn2 = new Button("8");
               grid.add(btn2, 1,1);
               Button btn3 = new Button("9");
               grid.add(btn3, 2,1);
               Button btn3_3 = new Button("+");
               grid.add(btn3_3, 3,1);
                Button btn4 = new Button("4");
               grid.add(btn4, 0,2);
               Button btn5 = new Button("5");
               grid.add(btn5, 1,2);
               Button btn6 = new Button("6");
               grid.add(btn6, 2,2);
               Button btn6_6 = new Button("*");
               grid.add(btn6_6, 3,2);
                Button btn7 = new Button("1");
               grid.add(btn7, 0,3);
               Button btn8 = new Button("2");
               grid.add(btn8, 1,3);
               Button btn9 = new Button("3");
               grid.add(btn9, 2,3);
                Button btn9_9 = new Button("-");
               grid.add(btn9_9, 3,3);
                Button btn10 = new Button("0");
               grid.add(btn10, 0,4);
               Button btn11 = new Button(".");
               grid.add(btn11, 1,4);
               Button btn12 = new Button("=");
               grid.add(btn12, 2,4);
               Button btn12_12 = new Button("/");
               grid.add(btn12_12, 3,4);

            Scene scene = new Scene(grid, 300, 275);
            primaryStage.setScene(scene);

            scene.getStylesheets().add
           (calculadora_css.class.getResource("calculadora_css.css").toExternalForm());
            primaryStage.setResizable(false);
            primaryStage.show();

    }

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

    }

i want to set the buttons below the TextField but in the final compiled program the +, *,-, / buttons are pushed to the right, i tried to arrange the buttons according to the commentaries above, thank you very much, anyhelp is appreciated

Answer 1

The extra parameters apart from columnIndex and rowIndex that you find are the columnspan and rowspan respectively.

ColumnSpan allows you to use more than one column for a control that has been added as a child to the GridPane. Similarly, RowSpan allows you to use more than one row.

Either, you can use the setColumnSpan(Node child,Integer value) to set the colspan or you can also do it using the add(Node child, int columnIndex, int rowIndex, int colspan, int rowspan) for defining the columnspan while adding a child.

So, coming to your question,

grid.add(userTextField, 0, 0,3,3);

stands for adding the userTextField control to :

• columnIndex 0 of the gridPane
• rowIndex 0 of the gridPane
• colSpan 3 to use 3 columns starting from column index 0
• rowSpan 3 to use 3 rows starting from row index 0