JavaFx 10. 로그인 기능 만들기

이번에는 로그인 기능을 만들어 보겠습니다.

이번 포스트의 핵심은 fxml 파일을 두개 사용하는 것입니다. 즉, 이번 포스트를 통해서 여러개의 fxml 파일을 사용하는 방법을 알게 될 수 있습니다.

자료구조는 다음과 같습니다.

Main.java

MainController.java

Login.fxml

Main.fxml

1. Main.java

package application;
    
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
 
 
public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            Parent root = FXMLLoader.load(getClass().getResource("/application/Login.fxml"));
            Scene scene = new Scene(root);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}
 

이번에는 첫번째 scene 이 Login.fxml 이 되도록 코딩하였습니다.

처음 앱을 실행하면 Login.fxml scene 이 표시되는 것입니다.

2. Login.fxml

<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
 
<AnchorPane prefHeight="300.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.MainController">
   <children>
      <Button layoutX="114.0" layoutY="204.0" mnemonicParsing="false" onAction="#Login" text="Login">
         <font>
            <Font size="18.0" />
         </font>
      </Button>
      <TextField fx:id="txtUserName" layoutX="48.0" layoutY="105.0" promptText="UserName">
         <font>
            <Font size="18.0" />
         </font>
      </TextField>
      <PasswordField fx:id="txtPassword" layoutX="48.0" layoutY="150.0" promptText="Password">
         <font>
            <Font size="18.0" />
         </font>
      </PasswordField>
      <Label fx:id="lblStatus" alignment="CENTER" layoutY="35.0" prefHeight="19.0" prefWidth="300.0" text="Status" textFill="#d31c1c">
         <font>
            <Font size="18.0" />
         </font>
      </Label>
   </children>
</AnchorPane>
 

컨트롤러는 MainController 에 연결합니다. 로그인 버튼에 On Action 을 설정 합니다.

3. MainController.java

package application;
 
import java.io.IOException;
 
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
 
public class MainController {
 
    @FXML
    private Label lblStatus;
    
    @FXML
    private TextField txtUserName;
    
    @FXML
    private TextField txtPassword;
    
    public void Login(ActionEvent event) throws Exception{
        if(txtUserName.getText().equals("user") && txtPassword.getText().equals("pass")){
            lblStatus.setText("Login Success");
            Stage primaryStage = new Stage();
            Parent root = FXMLLoader.load(getClass().getResource("/application/Main.fxml"));
            Scene scene = new Scene(root);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        }else{
            lblStatus.setText("Login Failed");
        }
    }
    
}
 

Login 메소드를 확인 하시면 userName 과 password 가 일치하면 새로운 stage 가 생성되도록 코딩했습니다.

stage 는 자바에서 frame 개념과 같다고 보시면 됩니다.

scene 는 자바에서 component 개념과 같다고 보시면 될겁니다. 아마도 ㅋㅋㅋ

즉, 위 코딩을 해석하면 입력된 값이 user 와 pass 인 경우 새로운 창이 생성되는 것이고, 그렇지 않으면 로그인 실패라는 문구가 라벨에 표시되는 것입니다.

4. Main.fxml

이건 올릴 필요가 거의 없지만, 일단 포스트 자체에 백업을 해둔다는 개념도 있기때문에 업로드 해놨습니다.

<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
 
 
<AnchorPane prefHeight="300.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="application.MainController">
   <children>
      <Label layoutX="88.0" layoutY="98.0" text="Main Windows">
         <font>
            <Font size="18.0" />
         </font>
      </Label>
   </children>
</AnchorPane>
 

어플리케이션 실행 화면