JAVA

JavaFX를 이용한 ProgressBar와 ProgressIndicator를 활용한 데이터 입력 화면 작성

지오준 2024. 12. 29. 10:00
반응형

JavaFX를 이용한 ProgressBar와 ProgressIndicator를 활용한 데이터 입력 화면 작성

JavaFX를 이용하면 직관적이고 모던한 GUI를 만들 수 있습니다. 이번 포스팅에서는 ProgressBar, ProgressIndicator, Thread, 그리고 Task를 활용하여 데이터 입력 작업을 시각적으로 표시하는 화면을 작성하는 방법을 단계별로 소개하겠습니다.

1. 프로젝트 설정

JavaFX 프로젝트를 생성하고 필요한 라이브러리를 설정합니다. Maven 또는 Gradle을 사용하는 경우 JavaFX SDK를 의존성으로 추가합니다.

Maven 예제:

<dependencies>
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-controls</artifactId>
        <version>21.0.0</version>
    </dependency>
</dependencies>

2. UI 설계

VBox를 사용하여 간단한 데이터 입력 폼을 구성하고, ProgressBar와 ProgressIndicator를 추가합니다.

FXML 코드 예제:

<VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"
      spacing="10" alignment="CENTER" style="-fx-padding: 20;">
    <Label text="데이터 입력" style="-fx-font-size: 16; -fx-font-weight: bold;"/>
    <TextField fx:id="dataField" promptText="데이터를 입력하세요"/>
    <Button fx:id="startButton" text="시작"/>
    <ProgressBar fx:id="progressBar" prefWidth="200"/>
    <ProgressIndicator fx:id="progressIndicator"/>
</VBox>

3. Task와 Thread를 활용한 비동기 작업

JavaFX의 Task를 사용하여 데이터 처리 작업을 수행하고 진행 상황을 ProgressBar와 ProgressIndicator에 반영합니다.

Controller 코드:

import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.scene.control.*;

public class DataInputController {

    @FXML
    private TextField dataField;

    @FXML
    private Button startButton;

    @FXML
    private ProgressBar progressBar;

    @FXML
    private ProgressIndicator progressIndicator;

    @FXML
    public void initialize() {
        startButton.setOnAction(event -> startTask());
    }

    private void startTask() {
        // 데이터 입력값 확인
        String inputData = dataField.getText();
        if (inputData == null || inputData.trim().isEmpty()) {
            showAlert("오류", "데이터를 입력하세요.", Alert.AlertType.ERROR);
            return;
        }

        // Task 생성
        Task<Void> task = new Task<>() {
            @Override
            protected Void call() throws Exception {
                // 100% 기준으로 10단계로 나눔
                for (int i = 0; i <= 10; i++) {
                    if (isCancelled()) {
                        break;
                    }
                    updateProgress(i, 10);
                    Thread.sleep(500); // 작업 시뮬레이션
                }
                return null;
            }
        };

        // ProgressBar와 ProgressIndicator에 Task 바인딩
        progressBar.progressProperty().bind(task.progressProperty());
        progressIndicator.progressProperty().bind(task.progressProperty());

        // Task 완료 시 UI 초기화
        task.setOnSucceeded(e -> showAlert("완료", "작업이 완료되었습니다.", Alert.AlertType.INFORMATION));
        task.setOnFailed(e -> showAlert("오류", "작업 중 오류가 발생했습니다.", Alert.AlertType.ERROR));
        task.setOnCancelled(e -> showAlert("취소됨", "작업이 취소되었습니다.", Alert.AlertType.WARNING));

        // 별도 Thread로 실행
        Thread thread = new Thread(task);
        thread.setDaemon(true); // JavaFX 애플리케이션 종료 시 함께 종료
        thread.start();
    }

    private void showAlert(String title, String content, Alert.AlertType alertType) {
        Platform.runLater(() -> {
            Alert alert = new Alert(alertType);
            alert.setTitle(title);
            alert.setContentText(content);
            alert.showAndWait();
        });
    }
}

4. 주요 코드 설명

  1. Task:

    • Task는 JavaFX에서 비동기 작업을 수행할 때 사용하는 클래스로, updateProgress를 통해 진행률을 업데이트할 수 있습니다.

  2. Thread:

    • Task는 별도의 Thread에서 실행됩니다. Daemon으로 설정하면 JavaFX 애플리케이션 종료 시 함께 종료됩니다.

  3. UI 바인딩:

    • ProgressBar와 ProgressIndicator의 progressProperty를 Task의 progressProperty에 바인딩하여 자동으로 진행 상태를 반영합니다.

  4. Alert:

    • 작업 완료 또는 오류 발생 시 사용자에게 알림을 제공합니다.

5. 실행 결과

  • 데이터를 입력한 후 "시작" 버튼을 클릭하면 작업 진행 상태가 ProgressBar와 ProgressIndicator에 표시됩니다.
  • 작업이 완료되면 "작업이 완료되었습니다." 메시지가 표시됩니다.

스크린샷:

[데이터 입력 필드]       [ProgressBar 진행률 50%]   [완료 메시지]

6. 확장 가능성

  • 실제 데이터 처리 연동:

    • 예를 들어 파일 업로드나 대규모 계산 작업에 Task를 사용할 수 있습니다.

  • 취소 기능 추가:

    • "취소" 버튼을 추가하여 Task.cancel()을 호출하면 작업을 취소할 수 있습니다.

  • 스타일링:

    • CSS를 활용하여 UI의 색상 및 레이아웃을 개선할 수 있습니다.

JavaFX를 활용하면 사용자 친화적인 GUI를 쉽게 구현할 수 있습니다. 이번 예제를 바탕으로 더욱 다양한 애플리케이션을 개발해보세요!

반응형