[JavaFX] JavaFX를 이용해 간단한 UI 만들어보기

JavaFX를 시작하며

• 이번 시간에는 JavaFX를 이용해서 정말 간단한 UI를 만드는 작업을 해보겠습니다.
• 정말 생판 모르던 JavaFX를 가지고 이렇게 저렇게 막 만든지라 볼품(?) 없어도 이해 바랍니다.
• 아래와 같은 UI 를 만들어 볼 예정입니다. 텍스트를 입력하고 버튼을 누르면 하단에 텍스트가 뜨는 형식입니다.

---

프로젝트 구조

프로젝트 구조는 이러합니다.

 

1. Main.java

2. Controller.java

3. sample.fxml

 

 위 처럼 3개의 파일이 만들어져 있습니다. UI를 만드는 방법은 Java 코드에서 만드는 방법과 fxml에서 만드는 방법이 있는데 저는 fxml 을 사용해 만들겠습니다. 

 

* fxml이란?

-  XML 을 base로 한 유저 인터페이스 마크업 언어로 JavaFX application 의 유저 인터페이스를 작성하는 목적으로 오라클 사에서 만들어졌다.

 

---

구현test.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane prefHeight="200" prefWidth="300" xmlns="http://javafx.com/javafx/8.0.101" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
    <top>
        <ToolBar>
            <items>
                <TextField fx:id="txtField" prefWidth="240" style="-fx-cursor: red;" styleClass="clickable" stylesheets="@style.css" />
                <Button fx:id="btn" onAction="#handleButtonActoin" prefWidth="40" />
            </items>
        </ToolBar>
    </top>
    <center>
        <ImageView fx:id="imageView">
            <image>
                <Image url="@imgres.png" />
            </image>
        </ImageView>
    </center>
    <bottom>
        <Label fx:id="resultLabel" alignment="CENTER" prefWidth="300" />
    </bottom>
</BorderPane>

• 이렇게 작성을 했고 상단에 툴바에 텍스트 필드와 버튼이 들어가고 가운데 center에는 이미지뷰가 들어갑니다. 그리고 bottom 에는 텍스트를 출력할 label이 들어갑니다.
•  이제 UI 작성이 완료가 되었습니다. 아 그전에 이미지를 넣어야 겠죠? image 같은 경우에는 아무 이미지나 다운을 받아 소스 파일 위치에 넣어주시면 됩니다. 그리고 이미지의 이름을 <Image> 태그 안에 url에 명시를 해줍니다.
• 이제 해야 할 일은 Button 을 제어하고 입력된 Text를 출력해주는 일 입니다. 순서를 생각해 보죠.

1. 버튼 클릭을 감지한다.

 

2. TextField에 입력된 값을 가져와 저장한다.

 

3. 저장된 입력 값을 Label에 출력 해준다.

 

•  이 절차를 진행 하면 됩니다. 소스코드를 보죠. 일단 그 전에 위 소스코드에서 Button 태그를 한 번 볼까요?
•  위에서 onAction="#handleButtonAction" 이라는 내용이 보이시나요? 이 문법이 Button이 클릭 됬을 때 즉 액션이 일어났을 때
• 감지를 할수 있는 리스너를 달아주는 과정이라고 보시면 될 것 같습니다. 그래서 이제 아래의  Controller.java 코드를 보시면 
• handleButtonActoin 이라는 메소드에서 getText로 텍스트 필드의 입력값을 저장하고 바로 Label에 출력을 해주는 모습을 볼 수 있습니다.

Controller.java

package sample;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.*;
import javafx.scene.image.ImageView;

import java.net.URL;
import java.util.ResourceBundle;

public class Controller implements Initializable{
    @FXML
    private TextField txtField;
    @FXML
    private Label resultLabel;

    private String inputValue;

    @FXML
    private void handleButtonActoin(ActionEvent event){
        inputValue = txtField.getText();
        txtField.setText("");
        resultLabel.setText(inputValue);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {

    }

}

 

Main.java

• 어플리케이션을 실행시킬 Main 클래스를 작성해보겠습니다.
• 이때 test.fxml 파일의 위치가 Main 패키지 경로와 동일한 위치에 있어야 합니다.
  • 아래 코드에서는 java/sample 패키지 밑에 있으므로 test.fxml 은 resources/sample 밑에 있어야 함

package sample;

public class Main extends Application {

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

  @Override
  public void start(Stage primaryStage) throws Exception {
		Parent root = FXMLLoader.load(getClass().getResource("test.fxml"));
        primaryStage.setTitle("Application");
        primaryStage.setScene(new Scene(root, 400, 400));
        primaryStage.show();
  }
}