Perbesar Gambar dengan Binding dan Thread

Hello guys,, melanjutkan artikel sebelumnya, kali ini saya akan membagikan cara membuat aplikasi perbesar dan perkecil gambar dengan memanfaatkan Binding dan thread di JavaFX. Mungkin agan sudah mencoba dan menemukan kekurangan pada aplikasi sebelumnya. Yap, benar, coba buka kembali aplikasi perbesar gambar sebelumnya, kemudian coba tekan tombol “-“ atau “+” dan tahan, lihat tidak ada yang terjadi kan? Maka dari itu sekarang kita akan membuatnya menjadi dapat melakukan zoom out atau zoom in saat tombol ditekan lama. Mungkin agan2 sekalian masih asing dan bertanya-tanya apa itu Thread. Thread adalah .Untuk lebih jelasnya nanti akan agan pahami setelah menjalankan aplikasinya.

Baiklah, langsung kita mulai saja, ikuti langkah di bawah ini :

1.       Buka Netbeans
2.       Buat project baru bernama “PerbesarGambarBindingAndThread”
3.       Setelah itu unduh gambar yang dengan resolusi 512x512 kalo bisa,,
4.       Hapus perintah yang ada dalam method start dan ganti dengan yang baru dibawah ini
5.       Coba jalankan, dan perbesar dan perkecil gambar dengan slider yang ada di bawah, atau klik tombol “-“ dan “+”.

public class PerbesarGambar extends Application {
    Task zoomWorker;
    boolean mousePressed;
    Slider slider = new Slider(1, 512, 256);
    
    @Override
    public void start(Stage primaryStage) {
        BorderPane controlPane = new BorderPane();
        Button zoomOut = new Button("-");
        zoomOut.setOnMousePressed(e->{
            if(slider.getValue()> 1){
                mousePressed = true;
                zoomWorker = createWorkerZoomOut(mousePressed);
                new Thread(zoomWorker).start();
            }
        });
        zoomOut.setOnMouseReleased(e->{
            zoomWorker.cancel(true);
            mousePressed = false;
        });
        Button zoomIn = new Button("+");  
        zoomIn.setOnMousePressed(e->{
            if(slider.getValue() < 512){
                mousePressed = true;
                zoomWorker = createWorkerZoomIn(mousePressed);
                new Thread(zoomWorker).start();
            }
        });
        zoomIn.setOnMouseReleased(e->{
            zoomWorker.cancel(true);
            mousePressed = false;
                });
        controlPane.setLeft(zoomOut);
        controlPane.setCenter(slider);
        controlPane.setRight(zoomIn);
       
        Image gambar = new Image(getClass().getResourceAsStream("stadium.png"));
        ImageView imageView = new ImageView(gambar);        
        imageView.fitWidthProperty().bind(slider.valueProperty());
        imageView.fitHeightProperty().bind(slider.valueProperty());
        
        BorderPane root = new BorderPane();
        root.setCenter(imageView);
        root.setBottom(controlPane);
        
        Scene scene = new Scene(root, 550, 550);
        
        primaryStage.setTitle("Perbesar Gambar Dengan Binding");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    private Task createWorkerZoomOut(final boolean pressed) {
        return new Task() {
            @Override
            protected Object call() throws Exception {
                while(pressed) {       
                    slider.setValue(slider.getValue()-10);
                    Thread.sleep(100);
                    System.out.println("zoomOut");

                }
                return true;
            }
        };
    }
    
    private Task createWorkerZoomIn(final boolean pressed) {
        return new Task() {
            @Override
            protected Object call() throws Exception {
                while(pressed) {       
                    slider.setValue(slider.getValue()+10);
                    Thread.sleep(100);
                    System.out.println("zoomIn");

                }
                return true;
            }
        };
    }

Penjelasan :

Pertama-tama deklarasikan objek dari kelas javafx.concurrent.Task bernama zoomWorker, zoomWorker ini digunakan untuk melakukan proses zoom ketika tombol zoomout atau zoomin ditekan lama. Boolean mousePressed digunakan untuk menampung kondisi apakah tombol ditekan atau tidak. Di sini Slider dideklarasikan di luar dari method start agar dapat diakses di semua fungsi yang dimiliki kelas.

Task zoomWorker;

Kemudian kita membuat sebuah objek BorderPane bernama controlPane yang digunakan untuk menampung tombol “-“ disebelah kiri, slider  zoom di tengah dan tombol “+” disebelah kanan. Kemudian membuat 2 buah button zoomout dan zoomin. Sekarang tombol zoomout dan zoomin diberi perintah pada setOnMousePressed dan setOnMouseReleased. Pada saat tombol zoomOut ditekan jika slider > 1 maka Boolean mouse pressed diset menjadi true dan Task zoomWorker tadi diinisialisaasi dan dijalankan beserta perintah- yang ada didalamnya sampai tombol zoomOut selesai diklik, begitu juga sesbaliknya.di. Berikut ini adalah kodenya :

BorderPane controlPane = new BorderPane();
Button zoomOut = new Button("-");
zoomOut.setOnMousePressed(e->{

if(slider.getValue()> 1){
mousePressed = true;
zoomWorker = createWorkerZoomOut(mousePressed);
new Thread(zoomWorker).start();
}

});
zoomOut.setOnMouseReleased(e->{

zoomWorker.cancel(true);
mousePressed = false;

});
Button zoomIn = new Button("+");
zoomIn.setOnMousePressed(e->{

if(slider.getValue() < 512){
mousePressed = true;
zoomWorker = createWorkerZoomIn(mousePressed);
new Thread(zoomWorker).start();
}

});
zoomIn.setOnMouseReleased(e->{

zoomWorker.cancel(true);
mousePressed = false;

});

Pada method createWorkerZoomOut() ini terdapat perintah yang digunakan untuk mengurang value dari slider sehingga memperkecil gambar. Begitu juga sebaliknya pada method createWorkerZoomIn().

Kemudian buat sebuah objek Image dan meletakkannya ke dalam ImageView karena Image bukanlah Node sehingga tidak bisa ditambahkan pada container. Nah kemudian kita membuat binding dimana fitWidthProperty dan fitHeightProperty dari ImageView di bindingkan dengan value dari slider agar ketika value dari slider berubah maka fitWidhProperty dan fitWeightProperty juga ikut berubah. Berikut kodenya :

Image gambar = new Image(getClass().getResourceAsStream("stadium.png"));
ImageView imageView = new ImageView(gambar);
imageView.fitWidthProperty().bind(slider.valueProperty());
imageView.fitHeightProperty().bind(slider.valueProperty());

Sekarang tinggal menambahkannya ke root dan mengubah title aplikasinya dengan kode di bawah ini

BorderPane root = new BorderPane();
root.setTop(imageView);
root.setBottom(controlPane); 
Scene scene = new Scene(root, 550, 550);
primaryStage.setTitle("Perbesar Gambar Dengan Binding");
primaryStage.setScene(scene);
primaryStage.show();

Bagaimana?? Mudah bukan?? Binding merupakan keunngulan dari JavaFX, mempersingkat kita dalam melakukan pengodingan. Sekian artikel dari saya dan sampai ketemu di artikel saya selanjutnya