[JavaFX] 실시간 업데이트 되는 Timer(시계) 컨트롤 구현 방법

들어가며

• JavaFX를 이용해 실시간으로 업데이트되는 Timer 컨트롤을 구현해보고자 합니다.
• 원본 소스는 아래 위치에 있습니다.

rlawlstjd0077/JavaFxPlayGround

---

구현

Timer.fxml

<fx:root type="StackPane" prefHeight="400.0" prefWidth="260.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
  <children>
    <Rectangle height="50.0"
      style="-fx-fill: #2d4035; -fx-stroke: transparent; -fx-arc-height: 7; -fx-arc-width: 7; -fx-stroke-type: inside; -fx-stroke-width: 0;"
      width="400.0"/>
    <Text fx:id="time"
      style="-fx-fill: #FFF5E2; -fx-font-weight: bold; -fx-font-size: 30px; -fx-stroke-type: outside; -fx-stroke-width: 0;"
      text="0000-00-00 00:00:00">
      <StackPane.margin>
        <Insets left="20.0" right="20.0"/>
      </StackPane.margin>
    </Text>
  </children>
</fx:root>

• 따로 CSS는 없어서 디자인 좀 구립니다..

• 시각이 표현될 TextView를 Rectangle을 이용하여 만들어 줍니다.

  • fx:root가 궁금하다면 아래 글 참고

     

(JavaFX) FXML 작성 시 "" 를 사용하는 이유

---

TimerViewModel.java

public class TimerViewModel {
  private static final DateTimeFormatter TIME_FORMAT = DateTimeFormatter.ofPattern("yyyy-MM-dd  HH:mm:ss");
  private final StringProperty time = new SimpleStringProperty();
  private ScheduledFuture<?> scheduledFuture;

  public TimerViewModel() { startRealTimeMode(); }

  public void startRealTimeMode() {
      stopTimer();
      scheduledFuture = Executors.newSingleThreadScheduledExecutor()
              .scheduleWithFixedDelay(() -> Platform.runLater(() -> setTime(ZonedDateTime.now(ZoneId.of("Asia/Seoul")))),
                      0,
                      500,
                      TimeUnit.MILLISECONDS);
  }

  private void setTime(ZonedDateTime targetTime) { time.set(targetTime.format(TIME_FORMAT)); }

  private void stopTimer() {
      if (scheduledFuture != null && !scheduledFuture.isDone()) {
          scheduledFuture.cancel(true);
          scheduledFuture = null;
      }
  }

  public StringProperty timeProperty() { return time; }
}

• 실시간으로 변경되는 시각 데이터를 가지고 있는 ViewModel 클래스입니다.

• 내부에서 Timer를 통하여 1초마다 시각을 업데이트 해줍니다.

• 시각 정보는 StringProperty로 제공이 되며 후에 Text를 표현할 컨트롤에 bind되어 활용될 예정입니다.

---

TimerController.java

public class TimerController extends StackPane {
  @FXML
  private Text time;
  TimerViewModel viewModel;

  public TimerController() {
      viewModel = new TimerViewModel();
      FxUtil.loadFxml(this);
      init();
  }

  private void init() {
      time.textProperty().bind(viewModel.timeProperty());
  }
}

• Timer를 전시할 Controller 클래스 입니다.

  • FxUtil.loadFxml(this)는 FXML 파일을 로딩하는 코드를 Util 클래스로 분리한 것으로 이 곳을 참고

• 내부에서 TimerViewModel 인스턴스를 생성하여 viewmodel의 timeProperty()를 TextView 역할을 하는 time에 바인딩 시켜줍니다.

---

실행

TimerTest.java

public class TimerTest extends Application {

  @Test
  public void test() {
    launch();
  }

  @Override
  public void start(Stage primaryStage) throws IOException {
    TimerController controller = new TimerController();
    primaryStage.setScene(new Scene(controller));
    primaryStage.setTitle("Timer Test");
    primaryStage.show();
  }
}

• 테스트 코드를 만들어 전시해주도록 합시다.

---

결과 화면

• 기능은 잘 동작하는군요. (디자인은 신경쓰지 않겠습니다)

---

관련 글

불러오는 중입니다...

[JavaFx] Tray Icon 전시 방법

(JavaFX) JavaFX 애니메이션 사용법

[JavaFx] Tray Icon에 메뉴 추가 방법 (Tray Menu 사용법)

---

끝으로

이 글이 도움이 되었다면, 하단의 Google 광고 👎👎👎 한번씩 클릭 부탁 드립니다. 🙏🙏🙏

광고 클릭은 많은 힘이 됩니다!