Eclipse + JavaFX: 간단한 요금 입력 시스템 만들기

이 블로그에서는 Eclipse와 JavaFX를 이용해 간단한 요금 입력 시스템을 구현하는 방법을 소개합니다. 이를 통해 JavaFX UI 구성과 이벤트 처리를 배우고, 프로젝트를 설정하는 방법을 익힐 수 있습니다.

---

1. 준비물

• Eclipse IDE (2023-xx 버전 추천)
• JDK 17 이상
• JavaFX SDK (https://openjfx.io/ 에서 다운로드)

---

2. 프로젝트 설정

1. Eclipse에서 새로운 Java 프로젝트를 생성합니다.

   • 프로젝트 이름: BillingSystem

2. JavaFX SDK를 프로젝트에 추가합니다.

   • 프로젝트 속성(Project Properties) > Java Build Path > Libraries > Modulepath > Add External JARs
   • JavaFX SDK 폴더의 lib 디렉토리에서 JAR 파일을 추가합니다.

3. VM 옵션 설정

   • Run Configurations > VM Arguments에 다음을 추가:

     --module-path "C:\path\to\javafx-sdk\lib" --add-modules javafx.controls,javafx.fxml

---

3. UI 설계

FXML 파일을 작성하여 간단한 UI를 만듭니다.

BillingSystem.fxml

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<BorderPane xmlns:fx="http://javafx.com/fxml" fx:controller="application.BillingController">
    <top>
        <Label text="요금 입력 시스템" style="-fx-font-size: 20; -fx-padding: 10;" />
    </top>
    <center>
        <GridPane hgap="10" vgap="10" style="-fx-padding: 20;">
            <Label text="항목 이름:" GridPane.rowIndex="0" GridPane.columnIndex="0" />
            <TextField fx:id="itemNameField" GridPane.rowIndex="0" GridPane.columnIndex="1" />

            <Label text="단가:" GridPane.rowIndex="1" GridPane.columnIndex="0" />
            <TextField fx:id="unitPriceField" GridPane.rowIndex="1" GridPane.columnIndex="1" />

            <Label text="수량:" GridPane.rowIndex="2" GridPane.columnIndex="0" />
            <TextField fx:id="quantityField" GridPane.rowIndex="2" GridPane.columnIndex="1" />

            <Button text="계산" fx:id="calculateButton" GridPane.rowIndex="3" GridPane.columnIndex="1" />
        </GridPane>
    </center>
    <bottom>
        <Label fx:id="resultLabel" style="-fx-padding: 10;" />
    </bottom>
</BorderPane>

---

4. 컨트롤러 작성

BillingController.java

package application;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

public class BillingController {

    @FXML
    private TextField itemNameField;

    @FXML
    private TextField unitPriceField;

    @FXML
    private TextField quantityField;

    @FXML
    private Button calculateButton;

    @FXML
    private Label resultLabel;

    @FXML
    public void initialize() {
        calculateButton.setOnAction(event -> calculateTotal());
    }

    private void calculateTotal() {
        try {
            String itemName = itemNameField.getText();
            double unitPrice = Double.parseDouble(unitPriceField.getText());
            int quantity = Integer.parseInt(quantityField.getText());

            double total = unitPrice * quantity;
            resultLabel.setText(itemName + "의 총 요금은: " + total + "원 입니다.");
        } catch (NumberFormatException e) {
            resultLabel.setText("올바른 숫자를 입력하세요.");
        }
    }
}

---

5. 메인 애플리케이션

Main.java

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        try {
            Parent root = FXMLLoader.load(getClass().getResource("BillingSystem.fxml"));
            Scene scene = new Scene(root);
            primaryStage.setTitle("요금 입력 시스템");
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

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

---

6. 실행 결과

프로그램을 실행하면 다음과 같은 화면이 나타납니다:

1. 항목 이름, 단가, 수량을 입력합니다.
2. 계산 버튼을 누르면 하단에 총 요금이 표시됩니다.
3. 입력값이 잘못되었을 경우 에러 메시지가 표시됩니다.

---

7. 개선 아이디어

• 계산된 데이터를 테이블에 추가하여 여러 항목을 관리하는 기능 추가
• CSS를 활용한 UI 스타일링 개선
• 데이터 저장 및 불러오기 기능 추가

JavaFX를 활용한 간단한 프로젝트를 통해 기본기를 다지는 좋은 연습이 되길 바랍니다!