Jam Digital dengan GUI

Nama: Azka Rizqullah Ramadhani

NRP: 5025231148

Kelas: PBO A

Deskripsi Tugas:

Saya membuat implementasi program Jam Digital menggunakan JavaFX sebagai Graphical User Interface (GUI). Pemilihan JavaFX didasarkan pada kemampuannya dalam membuat antarmuka pengguna yang modern dan interaktif, dengan sintaks yang relatif mirip dengan Java Swing, tetapi dengan fitur tambahan yang tidak ada di Swing.

Program ini terdiri dari 3 Class yaitu:

• Number Display
• Clock Display
• Main

Diagram tabelnya seperti berikut

Main

Kelas Main berfungsi sebagai entry point program di mana aplikasi jam digital ini akan dijalankan. Dalam kelas ini, saya menginisialisasi dan menampilkan komponen-komponen GUI seperti berikut:

• Membuat instance dari ClockDisplay, yang merupakan komponen utama untuk menampilkan jam.
• Menggunakan layout VBox untuk mengatur tata letak elemen GUI.
• Mengatur judul jendela aplikasi dan gaya tampilan (dalam hal ini menggunakan StageStyle.DECORATED).
• Menampilkan scene ke pengguna dan memulai fungsi startClock() untuk menginisialisasi jalannya jam.

Kelas ini berperan penting dalam mengintegrasikan antarmuka dan logika dari jam digital yang berjalan secara real-time.

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        ClockDisplay clockDisplay = new ClockDisplay();

        VBox root = clockDisplay.getLayout();
        Scene scene = new Scene(root, 400, 300);

        primaryStage.setTitle("Clock Application");
        primaryStage.initStyle(StageStyle.DECORATED);
        primaryStage.setScene(scene);
        primaryStage.show();

        clockDisplay.startClock();
    }

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

Clock Display

Kelas ClockDisplay bertanggung jawab menampilkan jam digital real-time di aplikasi JavaFX.

Komponen Utama:

• NumberDisplay hours, minutes, seconds: Mengelola jam, menit, dan detik.
• Label clockLabel: Menampilkan waktu dengan gaya visual, seperti font besar dan bayangan (DropShadow).
• VBox layout: Layout vertikal dengan latar belakang hitam dan teks putih.

Fungsi Utama:

• Konstruktor: Menginisialisasi waktu awal dan menyiapkan layout serta gaya visual.
• initCurrentTime(): Mengatur waktu jam ke waktu sistem saat ini.
• startClock(): Menjalankan pembaruan waktu setiap detik menggunakan Timeline, memperbarui detik, menit, dan jam secara real-time.
• updateDisplay(): Memperbarui tampilan jam pada label dengan format "HH:mm:ss".
• getLayout(): Mengembalikan layout jam untuk ditampilkan di tampilan utama aplikasi.

Kelas ini mengatur tampilan jam yang dinamis dan menarik dengan pembaruan otomatis.

public class ClockDisplay {
    private NumberDisplay hours;
    private NumberDisplay minutes;
    private NumberDisplay seconds;
    private final Label clockLabel;
    private final VBox layout;

    public ClockDisplay() {
        hours = new NumberDisplay(23);
        minutes = new NumberDisplay(59);
        seconds = new NumberDisplay(59);

        clockLabel = new Label();
        clockLabel.setStyle("-fx-font-size: 70px; -fx-text-fill: white;");
        clockLabel.setFont(Font.font("Roboto"));

        DropShadow dropShadow = new DropShadow();
        dropShadow.setOffsetX(4.0);
        dropShadow.setOffsetY(4.0);
        dropShadow.setColor(Color.AQUA);

        clockLabel.setEffect(dropShadow);

        layout = new VBox(clockLabel);
        layout.setStyle("-fx-background-color: black;");
        layout.setAlignment(Pos.CENTER);

        initCurrentTime();
        updateDisplay();
    }

    public void initCurrentTime(){
        LocalTime currentTime = LocalTime.now();
        hours.setValue(currentTime.getHour());
        minutes.setValue(currentTime.getMinute());
        seconds.setValue(currentTime.getSecond());
    }

    public void startClock() {
        Timeline clock = new Timeline(new KeyFrame(Duration.seconds(1), event -> {
            seconds.increment();
            if (seconds.getValue().equals("00")) {
                minutes.increment();
                if (minutes.getValue().equals("00")) {
                    hours.increment();
                }
            }
            updateDisplay();
        }));
        clock.setCycleCount(Timeline.INDEFINITE);
        clock.play();
    }

    private void updateDisplay() {
        String time = String.format("%s:%s:%s", hours.getValue(), minutes.getValue(), seconds.getValue());
        clockLabel.setText(time);
    }

    public VBox getLayout() {
        return layout;
    }
}

Number Display

Kelas NumberDisplay bertugas mengelola nilai angka yang memiliki batas tertentu, seperti jam, menit, atau detik pada jam digital.

Komponen Utama:

• int limit: Menyimpan batas maksimum angka (contoh: 23 untuk jam, 59 untuk menit/detik).
• int value: Menyimpan nilai angka saat ini, dimulai dari 0.

Fungsi Utama:

• Konstruktor (NumberDisplay): Menginisialisasi objek dengan batas maksimum (limit) dan nilai awal (value) 0.
• increment(): Menambah nilai value satu per satu dan mengembalikannya ke 0 ketika mencapai batas limit.
• getValue(): Mengembalikan nilai value sebagai string dengan format dua digit (contoh: "08" untuk angka 8).
• setValue(int value): Mengatur nilai value jika berada dalam batas yang benar (0 hingga limit). Jika nilai di luar batas, menampilkan pesan kesalahan melalui kelas PopUp.

Kegunaan:

Kelas ini berperan penting dalam menjaga agar nilai waktu (jam, menit, detik) tetap valid dan terformat dengan benar, serta menampilkan pesan kesalahan jika ada input tidak valid.

public class NumberDisplay {
    private final int limit;
    private int value;

    NumberDisplay(int limit){
        this.limit = limit;
        value = 0;
    }

    public void increment(){
        value++;
        value %= limit;
    }

    public String getValue(){
        if(value<10 else="" if="" int="" public="" return="" setvalue="" value="" void="">= 0 && value <= limit){
            this.value = value;
        }else{
            PopUp error = new PopUp(Alert.AlertType.ERROR,"value input error");
            error.show();
        }
    }
}

Hasil:

Github