Tutorial JavaFX Membuat Aplikasi Grafis

JavaFX adalah framework java yang ditujukan untuk pembuatan aplikasi desktop dan aplikasi internet. JavaFX ditujukan untuk menggantikan library Swing yang telah lama tersedia dalam platform Java SE. Tutorial ini akan membahas metode dasar pembuatan program dengan JavaFX.

Instalasi Java Development Kit

Sebelum dimulai, pastikan Java Development Kit (JDK) sudah terinstall dalam PC/laptop yang anda gunakan. Jika sudah terinstall, pastikan anda menggunakan JDK versi terbaru untuk menghindari permasalahan kompatibilitas pada saat pembuatan program nantinya (pada saat tulisan ini dibuat, versi JDK terbaru adalah Java SE 15). JDK bisa di-download di halaman Java SE Downloads. Tutorial untuk konfigurasi JDK sendiri bisa dilihat pada tulisan sebelumnya.

JavaFX SDK

JavaFX didistribusikan dalam bentuk berkas .zip dan bisa di-download dari website resminya https://openjfx.io. Di halaman yang sama, anda direkomendasikan untuk men-download dokumentasi dari javafx untuk mempermudah mencari informasi untuk penggunaan library jika dibutuhkan nantinya.

JavaFX Download Page

Direktori Project

Pada tahap ini kita akan membuat direktori project untuk program yang akan dikerjakan. Project ini sendiri kita beri nama FXHelloWorld. Adapun susunan direktori yang akan digunakan adalah sebagai berikut :

FXHelloWorld
+-- src
+-- lib

Ekstrak file .zip dari javafx yang sudah didownload sebelumnya kedalam folder lib. Adapun folder src akan digunakan untuk menampung kode program java yang akan diketikkan nantinya

Struktur dan Pengkodean

Untuk tahap selanjutnya, kita akan mulai mengetikkan source code dari program. Program ini akan bersifat modular, yang artinya kita harus menyebutkan nama modul dari program (lihat tulisan sebelumnya), serta menyebutkan modul eksternal apa saja yang akan digunakan.

Nama modul dari program ini adalah fxhelloworld. Program ini akan menggunakan modul eksternal yaitu javafx.graphics dan javafx.controls (modul ini bisa ditemukan pada direktori javafx sdk). Ketikkan kode program berikut kemudian simpan dengan nama module-info.java pada folder src

module fxhelloworld {
    requires javafx.graphics;
    requires javafx.controls;
}

Berikutnya kita ketikkan class utama dari program. JavaFX menentukan class Application (lihat dokumentasi) sebagai entry-point dari program. Dalam hal ini, class utama dari program harus menjadi sub-class dari Application, yang jika dituliskan dalam kode program adalah sebagai berikut :

package latihan;

import javafx.application.Application;

class Main extends Application {
    public static void main(String[] args) {
        // kode berikutnya
    }
}

Buat folder baru dengan nama latihan pada folder src, kemudian simpan kode program diatas dengan nama Main.java pada folder tersebut. Sampai tahap ini, struktur direktori project adalah sebagai berikut :

FXHelloWorld
+-- src
    +-- latihan
        +-- Main.java
    +-- module-info.java
+-- lib
    +-- javafx-sdk-xxx
        +-- bin
        +-- legal
        +-- lib

Dalam metode main(String[] args), kita memanggil metode launch() yang akan memulai runtime JavaFX serta mengeksekusi serangkaian metode init(), start() dan stop() secara berurutan. Dalam ketiga metode tersebut, kita bisa mendefinisikan apa yang akan terjadi sepanjang siklus eksekusi program. Untuk saat ini kita cukup berfokus pada metode start().

Metode start() menggunakan 1 argumen parameter dengan tipe Stage yaitu jendela utama dari aplikasi JavaFX.

package latihan;

import javafx.application.Application;
import javafx.stage.Stage;

class Main extends  Application {

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

    public void start(Stage primaryStage) {
        // kode berikutnya
    }

}

Berikutnya kita bisa lanjut ke antarmuka aplikasi. Stage menyediakan beragam metode untuk mengkonfigurasikan jendela aplikasi, seperti menentukan ukuran, judul, posisi dan lain sebagainya. Seterusnya kita bisa tambahkan Scene yang berisi komponen grafis kedalam jendela tersebut.

Perhatikan contoh kode berikut :

public void start(Stage primaryStage) {
    Label lblNama = new Label("Masukkan Nama Anda : ");
    TextField tfNama = new TextField();
    Button tombol = new Button("Click Disini");

    VBox root = new VBox(10, lblNama, tfNama, tombol);
    root.setPadding(new Insets(10));

    Scene scene = new Scene(root, 400, 400);

    primaryStage.setScene(scene);
    primaryStage.setTitle("Latihan JavaFX");
    primaryStage.setMinWidth(400);
    primaryStage.setMinHeight(400);
    primaryStage.centerOnScreen();
    primaryStage.show();
}

Jendela aplikasi ini berisi 3 komponen yaitu Label, TextField, dan Button. Ketiga komponen diletakkan dalam panel VBox yang menyusun komponen-komponen tersebut secara vertikal. Objek Scene merupakan bagian inti dari jendela aplikasi yang akan di-render pada saat aplikasi dijalankan. Dalam konstruksi objek Scene, kita tentukan panel komponen sebagai root dengan ukuran 400x400 pixel.

Selebihnya adalah konfigurasi jendela aplikasi, yang terdiri atas judul, ukuran minimum, posisi jendela di tengah layar dan menampilkan jendela tersebut.

Kode selengkapnya adalah sebagai berikut :

package latihan;

import javafx.application.Application;
import javafx.scene.control.Label;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.geometry.Insets;

public class Main extends Application {

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

    public void start(Stage primaryStage) {
        Label lblNama = new Label("Masukkan Nama Anda : ");
        TextField tfNama = new TextField();
        Button tombol = new Button("Click Disini");

        VBox root = new VBox(10, lblNama, tfNama, tombol);
        root.setPadding(new Insets(10));

        Scene scene = new Scene(root, 400, 400);

        primaryStage.setScene(scene);
        primaryStage.setTitle("Latihan JavaFX");
        primaryStage.setMinWidth(400);
        primaryStage.setMinHeight(400);
        primaryStage.centerOnScreen();
        primaryStage.show();
    }

}

Kompilasi

Adapun perintah kompilasi untuk program ini adalah :

javac -d build --module-path lib\javafx-sdk-11.0.2\lib --add-modules javafx.graphcis,javafx.controls src\*.java

Karena perintah kompilasi cukup panjang, ini akan menyulitkan jika harus melakukan kompilasi secara berulang-ulang. Untuk mempermudah ketikkan perintah berikut kemudian simpan dengan nama compile.bat

@echo off
RD /S /Q build
DIR /S /B /A-D src > sources.list
javac -d build ^
    --module-path lib\javafx-sdk-11.0.2\lib ^
    --add-modules javafx.graphics,javafx.controls ^
    @sources.list
DEL sources.list

Penjelasan :

Perintah javac akan meng-compile semua file .java yang tersimpan dalam folder src dan menyimpan hasilnya dalam folder build (opsi -d build)
Opsi --module-path adalah direktori tempat modul javafx tersimpan.
Opsi --add-modules adalah modul-modul yang digunakan dalam program

Eksekusi

Jika proses kompilasi diatas telah berhasil, kita bisa lanjut ke tahap terakhir yaitu eksekusi program. Perintah untuk menjalankan program adalah :

java --class-path build --module-path lib\javafx-sdk-11.0.2\lib --add-modules javafx.graphics,javafx.controls latihan.Main

Ketikkan perintah dibawah ini kemudian simpan dengan nama run.bat

@echo off
java ^
    --class-path build ^
    --module-path lib\javafx-sdk-11.0.2\lib ^
    --add-modules javafx.graphics,javafx.controls ^
    latihan.Main

Jika perintah diatas berhasil, anda akan melihat jendela program seperti berikut :

fxhelloworld