Organizing objects with the GridPane class in JavaFX - ProgrammerTech
Language:

Search

Organizing objects with the GridPane class in JavaFX

  • Share this:
Organizing objects with the GridPane class in JavaFX

Organizing items by GridPane

Organizing by ( GridPane ) From its name, it is clear to us that it is a table through which we can organize the elements in the scene. We learned how to create and add elements to a scene and today we will learn how to use GridPane to organize elements in a scene. And when we say elements, we mean (buttons, texts, fields, etc.), that is, interactive elements. Which the user interacts with such as buttons, text boxes, ComboBox...etc.

We will use the GridPane package that follows the layout package and that follows the Scene package and the TextField package as well. In the Scene package, we can write a text box and use the button package to create a button. We will learn how to create two interactive elements, a text box and a button, add them to the GridPane, add the GridPane to the scene, and then add the scene to the final clip. The GridPane class is used to create a container that arranges the things we add in it as an imaginary table. This table consists of lines and columns of equal size.

Example 1

package mhamad;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class Mhamad extends Application {
    public void start(Stage stage) {
        TextField txt=new TextField();
        Button b=new Button("click");
        GridPane p=new GridPane();
        p.setHgap(10);
        p.setVgap(10);
        p.setMinSize(400, 400);
        p.setAlignment(Pos.CENTER);
        p.add(b, 0, 0);
        p.add(txt, 0, 1);
        Scene s=new Scene(p);
        stage.setScene(s);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

Before entering to start writing the program, we called the packages we need, of which the geometry.Pos package is responsible. About GridPane alignment either centered, right, or left. The layout.GridPane package is responsible for organizing the interactive elements and is the mainstay of this lesson. And the rest of the invoked packages we got to know in the previous lessons from the beginning of the JavaFX lessons. Then we entered the start function and started writing the program and at first we created the class of the text box TextField. Then we created the Button class and then we created the GridPane class and took the p object.

Then we set the horizontal footnotes by setHgap and the vertical footnotes by setVgap and took the footnote 10 for the horizontal and vertical. We set the GridPane size to be 400 for the width and 400 for the length by the setMinSize function. We align the GridPane to the center of the screen via setAlignment and the value taken by CENTER ie in the middle of the screen. And we add the elements to the GridPane using the add function for the first column 0, 0 and the second column 0, 1 and add them to the scene. We add the scene to the model stage and show the interface.

When we run the above code, we will get the following result

1-83.webp

We also note that the button has been placed in cell 0 and the text box in cell 1 as we requested it. If we change the location of the cells in reverse with the command p.add(txt, 1, 0) the result will be.

2-76.webp

We notice that we have placed the button in cell 0,0 and the text box in cell 1,0 ie the next column.

 

Create a login form with GridPane

We will use the same packages we used before, in addition to new packages, which are:

  1. Class Button to create the button.
  2. Class PasswordField Creates a text for entering the password.
  3. Class TextField to create a text box.
  4. The GridPane class with which we can organize the interactive elements that we create.
  5. The text.Text class that is used to create texts.
  6. Class Stage.
  7. The geometry.Pos class is used to align the GridPane (center, right, left).

Example 2

package mhamad;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class Mhamad extends Application {   
    public void start(Stage stage) {
        Text t1=new Text("Email");
        Text t2=new Text("Password");
        TextField txt1=new TextField();
        PasswordField txt2=new PasswordField();
        Button b=new Button("Send");
        GridPane p=new GridPane();
        p.setMinSize(300, 300);
        p.setAlignment(Pos.CENTER);
        p.setHgap(5);
        p.setVgap(5);
        p.add(t1, 0, 0);
        p.add(txt1, 1, 0);
        p.add(t2, 0, 1);
        p.add(txt2, 1, 1);
        p.add(b, 0, 2);
        Scene s=new Scene(p);
        stage.setScene(s);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    } 
}

In this example we have used several packages: geometry.Pos package is used to align the GridPane to the center, right, or left. The Button package and the PasswordField package are packages for creating a text entry for a password. and the TextField package for the text box and the GridPane package for organizing objects. And we entered the start function and started writing the codes, and at the beginning we created a label t1 to enter the email and we created a second label t2 for the password field.

And we created a textbox class named txt1 using the TextField class and the Password class. txt2 via the PasswordField class and then we created the Button class in order to send the data. Then we created a GridPane in order to organize the elements and specify the size of the GridPane via the setMinSize function. Length 300 and Width 300 and we center align them with setAlignment. Then we set the spacing between the elements from the right, top and bottom using setHgap and the vertical alignment between the elements using setVgap.

And we added the object title t1 and added the text box in the adjacent column and then we added the password t2 and added it to the second column. Then we added the button at the bottom in the third row and its number 2 ie cell 2, then we created the scene and added it to the form and showed the form.

When you run this code, the result will be:

3-67.webp

Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com