Cara Membuat Action Click Untuk Mengubah Backround Pada JavaFX

Pembukaan

Melanjutkan tutorial Cara Membuat Interface Aplikasi Pada JavaFx yang sudah ada, maka kita akan melanjutkan ke tahap berikutnya. Kali ini kita akan membahas mengenai Controller dan Event pada JavaFX yaitu MouseClick. Kenpa harus mouse clicked saja? jawabannya dimana event yang paling sering digunakan adalah event ini.

Pada JavaFX ada yang namanya controller, sebenarnya ini adalah salah satu konsep MVC pada sebuah pemrograman. Dimana mengandalkan setiap file memiliki fungsinya masing-masing namun masih dapat berintegrasi atau terhubung satu dengan yang lain. Di JavaFX, controller biasanya digunakan untuk menyimpan fungsi-fungsi yang diberikan didalam file View atau kita sebut saja file FXML. Sebagai contoh controller menyimpan variabel, controller menyimpan event atau pun controller menyimpan method yang di buat sendiri.

Pembahasan

Pada tutorial Cara Membuat Action Click Untuk Mengubah Backround Pada JavaFX menerapkan event mouseclicked dengan eksekusi baris kode yang sederhana saja. Mouse Clicked ini diterapkan pada pembuatan menu sidebar pada program. Apa yang pertama kali dilakukan ? Yang sangat penting adalah pemberian id atau variabel pada masing-masing komponen. Di sini kita tidak perlu melakukan koding untuk pemberian id, cukup buka file FXML dengan Scene Builder kemudian ubah di dalamnya. Ketika file sudah di buka pada Scene Builder, pilih bagian Code di sidebar kanan, kemudian cari text Identity. Jika tidak menemukan, coba pilih dahulu komponen yang mau di beri action. Jika sudah ketemu silahkan beri id (fx:id) pada masing-masing komponen menu, sebagai contoh jika mengikuti tutorial kita akan membuat menu yang dapat di click.
Perhatikan, kita memiliki 5 menu masing-masing dari menu kita beri id dengan nama;

Gambar 1

1. menuHome
2. menuPegawai
3. menuHistorikal
4. menuUser
5. menuLogout

Setelah selesai dengan pemberian id tiap komponen label (menu), selanjutnya kita berikan action pada masing-masing komponen tersebut.Caranya mudah, anda hanya cukup scroll kebawah hingga menemukan On Mouse Clicked pada menu Code (dibasah fx:id). Selanjutanya beri nama masing-masing event atau action seperti berikut;

Gambar 2

1. menuHomeClicked
2. menuPegawaiClicked
3. menuHistoriClicked
4. menuUserClicked
5. menuLogoutClicked

Selanjutnya tahap diatas sudah selesai, dan kita akan ketahap pengkodingan untuk mengatur perintah apa saja yang akan dilakukan jika menu di click. Kembali dan close saja Scene Builder (JANGAN LUPA UNTUK DI SIMPAN), pada netbeans kita edit source pada file interface_home.fxml. Cara membuka source dari file tersebut dengan klik kanan pada interface_home.fxml > pilih Edit.

Gambar 3

Selanjutnya kita tambahkan atribut controller di dalam baris pertama syntax Container, sebagai contoh karena menggunakan AnchorPane maka tambahkan kode tersebut di dalamnya. Berikut adalah kode default jika tidak ada atribut controller;

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="547.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">

Dan tambahkan pada bagian akhir dari kode tepat sebelum tutup kurung siku (>) seperti dibawah ini.

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="547.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="controller.Interface_homeController">

Dimana controller.Interface_homeController terdiri dari package dan nama klass, controller merupakan nama package pada project sedangkan Interface_homeController adalah nama java class yang berguna untuk menyimpan seluruh code atau fungsi dari file interface_home.fxml. 

Gambar 4

Selanjutnya kita akan generate kode-kode yang ada pada file interface_fxml yang sebelumnya sudah di atur pada scene builder, yang mana yaitu id pada komponen dan action event pada komponen.

Caranya dengan klik kanan pada file interface_home.fxml kemudian pilih Make Controller, secara otomatis akan mengarahkan kebagian file Interface_homeController.java di package controller.

Gambar 5

Jika berhasil akan ada method berdasarkan On Mouse Clicked dan ada juga id yang berupa variabel komponen. Dalam kasus ini kita akan buat event aksi yang sederhana saja, dimana menu akan berubah warna backgroud jika menu di klik.

1. menuHomeClicked
   

       private void menuHomeClicked(MouseEvent event) {
           menuHome.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
           menuPegawai.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuHistorikal.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuUser.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
       }

2. menuPegawaiClicked
   

       private void menuPegawaiClicked(MouseEvent event) {
           menuHome.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuPegawai.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
           menuHistorikal.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuUser.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
       }

3. menuHistoriClicked
   

       private void menuHistoriClicked(MouseEvent event) {
           menuHome.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuPegawai.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuHistorikal.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
           menuUser.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
       }

4. menuUserClicked
   

       private void menuUserClicked(MouseEvent event) {
           menuHome.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuPegawai.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuHistorikal.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuUser.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
           menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
       }

5. menuLogoutClicked
   

       private void menuLogoutClicked(MouseEvent event) {
           menuHome.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuPegawai.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuHistorikal.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuUser.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
           menuLogout.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
       }

Jika sudah silahkan simpan perubahan, kode diatas tidak akan bisa berjalan karena pada main method kita masih menggunakan syntax default dan tidak ada perintah untuk memanggil file FXML. Maka buka dan edit terlebih dahulu class TutorialJavaFX.java didalam package tutorialjava, edit degan kode berikut;

package tutorialjavafx;

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author Java Source Code
 */
public class TutorialJavaFX extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("interface_home.fxml"));
        
        Scene scene = new Scene(root);
        
        stage.setScene(scene);
        stage.show();
    }

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

Barulah kita bisa coba jalankan kode program yang kita buat, perlu di ingat lakukan DEBUG terlebih dahulu, karena jika tidak kode program tidak akan bsia terbaca dan akan mengalami error java result 1. Perhatikan saja gambar dibawah ini yang merupakan hasil dari kode yang sudah dibuat.

Gambar 6

Penutupan

Masih banyak lagi perintah atau event yang bisa kita jalankan ketika komponen di klik, namun ini adalah salah satu contoh saja. Selanjutnya kita akan bahas lebih banyak lagi pada tutorial JavaFX ini.