Binding Komponen di Java Swing

Pembaca yang budiman, sudah lama sekali rupanya saya tidak meng-update blog ini. Mohon maaf jika para pembaca sering kembali ke blog ini, namun tidak menemukan suatu tulisan yang baru di blog ini. Well, sedikit cerita saja, saya saat ini sudah pindah kerja ke sebuah perusahaan yang bergerak di bidang konsultan IT, dan saat ini juga tengah mengerjakan proyek milik negara (project pemerintah RI). Project ini menggunakan Java Swing sebagai interfacenya, haduh, saya yang kurang mengerti betul dengan Java Swing ini akhirnya dipertemukan juga :P. 

Sebagai pengingat akan lebih baik jika saya share apa yang saya dapatkan terhadap pekerjaan baru saya ini. Salah satunya ada Binding komponen di Java Swing. Binding dalam Java Swing adalah suatu cara kemudahan dalam men-develop aplikasi Java Swing yang dilakukan dengan menggunakan IDE Netbeans. Untuk percobaan kali ini kita akan melakukan praktek binding di Java Swing. Langsung aja yah? siapkan sebuah project dalam netbeans, kemudian buat package yang ke level terbawahnya terdiri dari 3 package, misal 3 level terbawah tersebut terdiri dari package: 

1. org.mojo.tutorial.swing.model
2. org.mojo.tutorial.swing.data
3. org.mojo.tutorial.swing.gui

Atau seperti gambar berikut ini:
 

Kemudian buatlah sebuah class pada package model seperti dibawah ini:

public class Users {

    private Long id;
    private String sureName;
    private String nickName;
    private Integer age;
    private String sex;
    private String phoneNumber;
    private String address;
    
    //constructor dibawahnya
    //getter setter dibawahnya
    //toString dibawahnya
}

Kemudian buatlah sebuah class yang merupakan data dummy berdasarkan model Users tersebut dalam package data seperti contoh berikut ini:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package org.mojo.tutorial.swing.data;

import java.util.ArrayList;
import java.util.List;
import org.mojo.tutorial.swing.model.Users;

/**
 *
 * @author Josescalia
 */
public class UsersData {

    Users u1,u2,u3,u4;
    
    private void init(){
        u1 = new Users();
        u1.setId((long) 1);
        u1.setNickName("Syarif");
        u1.setSureName("Ahmad Syarif");
        u1.setAge(28);
        u1.setAddress("Surabaya");
        u1.setSex("male");
        u1.setPhoneNumber("0815468912");

        u2 = new Users();
        u2.setId((long) 2);
        u2.setNickName("Dian");
        u2.setSureName("Dian Sari Puspita");
        u2.setAge(20);
        u2.setAddress("Semarang");
        u2.setSex("female");
        u2.setPhoneNumber("0813657125");

        u3 = new Users();
        u3.setId((long) 3);
        u3.setNickName("Atika");
        u3.setSureName("Purwatika Lestari");
        u3.setAge(23);
        u3.setAddress("Medan");
        u3.setSex("female");
        u3.setPhoneNumber("0813987909");
        u4 = new Users();
        u4.setId((long) 4);
        u4.setNickName("Dodi");
        u4.setSureName("Dodi Sukma");
        u4.setAge(34);
        u4.setAddress("Palangkaraya");
        u4.setSex("male");
        u4.setPhoneNumber("08179809759");
    }

    public UsersData() {
        init();
    }
        
    public List<Users> getUserList(){
        List<Users> result = new ArrayList<Users>();
        result.add(u1);
        result.add(u2);
        result.add(u3);
        result.add(u4);
        return result;
    }
}

Langkah selanjutnya adalah buatlah atau design sebuah JPanelForm pada package gui seperti gambar berikut ini:

Beri nama masing-masing komponen tersebut sesuai dengan keinginan anda, dalam hal ini JTable saya beri nama sebagai tblUsers. kemudian ketik beberapa code seperti dibawah ini:

//import beberapa library standard, auto generate dilakukan oleh netbeans disini 


public class FormExampleJTable extends javax.swing.JFrame {

    private UsersData data = new UsersData();
    private List<Users> usersList = new ArrayList<Users>();
    /**
     * Creates new form FormExampleJTable
     */
    public FormExampleJTable() {
        initialize();
        initComponents();
    }

    private void initialize() {
        usersList = data.getUserList();
    }
    
    public List<Users> getUsersList() {
        return usersList;
    }

    public void setUsersList(List<Users> usersList) {
        this.usersList = usersList;
    }


   //ada beberapa kode yang digenerate oleh netbeans disini 
}

Perhatian : Kode yang saya tuliskan diatas adalah kode-kode utamanya saja, selebihnya merupakan kode-kode yang di-generate secara otomatis oleh netbeans itu sendiri. Ok, sekarang mari kita bahas kode-kode tersebut sebelum kita mengikuti tahap selanjutnya.
Pada baris awal ada deklarasi variabel data yang memiliki tipe data object UsersData, dan variabel usersList yang memiliki tipe data berupa object List.  Kemudian pada constructor Form terlihat ada pemanggilan sebuah method yaitu initialize(); sementara method initComponent(); adalah method yang di generate oleh netbeans secara default. Kemudian juga terlihat ada method getter dan setter untuk variabel userList. Dan pada method initialize(); inilah inti dari percobaan kita, coba perhatikan baris-baris pada method initialize(); tersebut, disana terlihat kita memanggil data.getUserList yang hasil dari pemanggilan method tersebut ditampung dalam variabel userList:

    private void initialize() {
        usersList = data.getUserList();
    }

Sampai disini sebetulnya koding kita telah selesai dan tahap berikutnya adalah melakukan binding ke komponen-komponen pada Form yang telah kita buat. Untuk selanjutnya kita masuk pada pembahasan kita yang paling utama yaitu binding komponen.
Untuk binding pertama kita akan melakukannya di JTable yang sudah kita letakkan dalam form, caranya adalah dengan meng-klik kanan komponen JTable tersebut kemudian pilih properties. Pada jendela properties pilih tab binding kemudian klik tombol kecil pada baris element, ketika muncul jendela bind, pilih Binding Source-nya adalah Form, dan Binding Expression-nya adalah variabel userList seperti gambar berikut:

Jika variabel userList tidak muncul, itu disebabkan karena kita tidak membuat getter dan setter variabel tersebut.
Setelah itu silahkan jalankan Form tersebut dan anda bisa lihat bahwa data yang kita buat dari class UsersData masuk ke dalam JTable tersebut. Jika kita ingin merubah setting-an tabel tersebut, kita bisa melakukannya dengan cara meng-klik kanan JTable tersebut dan pilih Table Content, kemudian pilih tab Columns pada window yang muncul. Di sana kita bisa merubah setting-an header, ukuran tiap-tiap field JTable dan yang lainnya.
Kemudian sekarang kita akan mencoba mem-binding komponen JTextField yang ada pada form tersebut. Langkah-langkahnya sama persis dengan mem-binding JTable, hanya saja binding source yang kita gunakan bukan lagi Form, melainkan JTable itu sendiri, sementara Binding Expression-nya adalah selectedElement_IGNORE_ADJUSTING.[nama property dari class user]. Yang harus diperhatikan disini adalah nama property dari class user. Maksudnya adalah jika kita ingin mem-binding sebuah JTextField untuk menampung data sureName dari class Users tadi, maka Binding Expression-nya adalah selectedElement_IGNORE_ADJUSTING.sureName. Seperti gambar berikut ini :

Lakukanlah semua binding JTextField yang ada pada Form, kemudian jalankan Form tersebut. dan klik salah satu row dalam tabel tersebut, maka masing-masing JTextField akan memuat data sesuai dengan baris yang kita klik pada tabel tersebut.
Demikianlah percobaan kita kali ini. source berikut ini adalah source lengkap project diatas yang bisa anda coba dan kembangkan sendiri.

Terima kasih dan semoga bermanfaat.


Menteng, 14 Oktober 2012

Josescalia