Perbesar Gambar dengan Binding Tanpa Thread

Hello guys,, gimana kabar?? Masih semangat ngodingnya??hehe. Kali ini saya akan membagikan cara membuat aplikasi perbesar dan perkecil gambar dengan memanfaatkan Bindingdi JavaFX. Mungkin agan2 sekalian masih asing dan bertanya-tanya apa itu Binding. Binding adalah kemampuan untuk mengaitkan sebuah property dengan property lain. Dengan demikian kita tidak perlu membuat event handler untuk mengubah nilai suatu property agar sinkron dengan property lainnya. Untuk lebih jelasnya nanti akan agan pahami setelah menjalankan aplikasinya.

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

1.      Buka Netbeans
2.       Buat project baru bernama “PerbesarGambar”
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 :

public class PerbesarGambar extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        BorderPane controlPane = new BorderPane();
        Slider slider = new Slider(1, 512, 256);
        Button zoomOut = new Button("-");
        zoomOut.setOnAction(e->slider.setValue(slider.getValue()-10));
        Button zoomIn = new Button("+");  
        zoomIn.setOnAction(e->slider.setValue(slider.getValue()+10));
        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.setTop(imageView);
        root.setBottom(controlPane);
        
        Scene scene = new Scene(root, 550, 550);
        
        primaryStage.setTitle("Perbesar Gambar Dengan Binding");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
}

5.       Coba jalankan, dan perbesar dan perkecil gambar dengan slider yang ada di bawah, atau klik tombol “-“ dan “+”.

Penjelasan :

Pertama-tama kita membuat sebuah objek BorderPane bernama controlPane yang digunakan untuk menampung tombol “-“ disebelah kiri, slider  zoom di tengah dan tombol “+” disebelah kanan. Kemudian membuat sebuah Slider dengan nilai minimal 1, nilai maksimal 512 dan value = 256 untuk meletakkan posisi value slider di tengah. Kemudian membuat 2 buah button zoomout dan zoomin. Zoomout diberi perintah untuk mengurangi value dari slider sebesar 10 dan zoomin diberi perintah untuk menambah value slider sebesar 10. Berikut ini adalah kodenya :

BorderPane controlPane = new BorderPane();

Slider slider = new Slider(1, 512, 256);

Button zoomOut = new Button("-");

zoomOut.setOnAction(e->slider.setValue(slider.getValue()-10));

Button zoomIn = new Button("+"); 

zoomIn.setOnAction(e->slider.setValue(slider.getValue()+10));

controlPane.setLeft(zoomOut);

controlPane.setCenter(slider);

controlPane.setRight(zoomIn);

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