JavaFX - 6 | 자바 GUI | GridPane | 로그인 창 만들기와 간단한 유효성 검사

자바FX의 GridPane 은 그리드가 특징이다. (그리드는 바둑판 모양을 말함)

초보자가 마땅한 레이아웃이 생각나지 않을 때는 GridPane 이 그나마 깔끔하게 느껴진다. 그리드 페인은 바둑판 처럼 행과 열에 배치한다.

예제로 로그인 창을 만들어 보자

package com;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application  {

    Stage window;
    Scene scene;

    @Override
    public void start(Stage primaryStage) throws Exception{
        window = primaryStage;
        window.setTitle("JavaFX Layout");

        GridPane gridPane = new GridPane();
        gridPane.setPadding(new Insets(10));
        gridPane.setVgap(8);
        gridPane.setHgap(10);

        // label
        Label user = new Label("User Name: ");
        GridPane.setConstraints(user, 0, 0);

        // input
        TextField name = new TextField("Mr KEN");
        GridPane.setConstraints(name, 1, 0);

        // label
        Label passwd = new Label("Password: ");
        GridPane.setConstraints(passwd, 0, 1);

        // input
        TextField passInput = new TextField();
        passInput.setPromptText("password");
        GridPane.setConstraints(passInput, 1, 1);

        Button submit = new Button("submit");
        GridPane.setConstraints(submit, 1, 2);
        submit.setOnAction( e -> {
            System.out.println("name: " + name.getText());
            System.out.println("password: " + passInput.getText());
        });


        Button validate = new Button("validate");
        validate.setOnAction( e -> isInt(passInput, passInput.getText()));
        GridPane.setConstraints(validate, 2, 2);


        gridPane.getChildren().addAll(user, name, passwd, passInput, submit, validate);

        scene = new Scene(gridPane, 500, 300);
        window.setScene(scene);
        window.show();
    }

    private boolean isInt(TextField input, String msg){
        try{
            int age = Integer.parseInt(input.getText());
            System.out.println("Int confirmed");
            return true;
        } catch (NumberFormatException e){
            System.out.println("wrong password" + msg + " not a number");
            return false;
        }
    }


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

* import 문을 보면 전체적으로 어떤 GUI 인지 상상이 간다. 버튼과 레이블, 텍스트 필드를 그리드 페인에 배치한다... 정도로 읽는다.

다음은 콤포넌트 들의 생성이다.

GridPane 의 SetConstraints 에는 콤포넌트의 인스턴스 말고도 인수가 필요하다. 열과 행이다. 보통은 행과 열인데 좀 햇갈린다.

1, 0은

2열 1행 이다. (0부터 시작하므로 숫자를 하나씩 더하면 행열이 나온다.) 그리드니까 가로 몇개 세로 몇개가 필요한다음 계산대로 (0,0) (1,0) (2,0) ... 이렇게 배치하면 된다.

submit 버튼을 누르면 콘솔에 프린트를 표시한다. 원래는 백엔드 데이터 베이스에 접속해서 아이디와 패스워드가 맞는지 처리해야 하는 부분이다. 이 포스팅은 JavaFX GUI 내용이라 그 내용까지 다루지 않았다. 이런 방식으로 UI 를 디자인 하여 사용할 수 있다는 것 까지만 다루고 데이터 베이스는 별도로 학습해야하는 부분이다.