Skip to main content

Java Swing | Text AutoCompletion dengan JIDE Common Layer AutoCompletion

Kali ini saya ingin berbagi mengenai cara membuat autocomplete pada JTextField dan JComboBox  dengan library yang bernama JIDE Common Layer. JIDE Common Layer merupakan sebuah product open source dari Jidesoft (sebuah perusahaan komersil yang menyediakan komponen custom Java Swing). Namun pada post kali ini saya hanya akan membahas komponen AutoCompletion yang disediakan pada library JIDE Common Layer.

Sebelumnya kita harus menambahkan dependency JIDE Common Layer pada project yang kita buat.
Karena saya menggunakan Maven dan JIDE Common Layer sudah tersedia pada maven repository, silahkan tambahkan dependency berikut pada pom.xml

<dependency>
            <groupId>com.jidesoft</groupId>
            <artifactId>jide-oss</artifactId>
            <version>3.5.0</version>
</dependency>

Untuk mencoba AutoCompletion, saya membuat sebuah form dengan JInternalFrame dan menambahkan sebuah JTextField serta sebuah JComboBox.


Karena komponen AutoCompletion membutuhkan data berupa java.util.List, maka saya harus menampung data pada class List (pada post ini saya menggunakan class ArrayList).

    private List<String> listNama;
    private List<String> listKota;

    /**
     * Creates new form JideOSSAutoCompletionIFrame
     */
    public JideOSSAutoCompletionIFrame() {
        initData();
        initComponents();
        initAutoCompletion();
    }

    private void initData() {
        listNama = new ArrayList<String>(
                Arrays.asList("Eko Suhariyadi", "Hiro Kunimi", "Chiaki Shinichi", "Kudo Shinichi", "Haruka Koga", "Megumi Noda", "Ran Mouri"));

        listKota = new ArrayList<String>(
                Arrays.asList("Sidoarjo", "Surabaya", "Malang", "Madiun", "Jakarta"));
    }

    private void initAutoCompletion() {
        AutoCompletion txtNamaCompletion = new AutoCompletion(txtNama, listNama);
    }
    private javax.swing.JComboBox comboKota;
    private javax.swing.JTextField txtNama;

Pada potongan kode di atas, saya mendeklarasi 2 List untuk menampung data nama dan kota. Inisialisasi data saya buat pada method initData. Cara menggunakan JIDE AutoCompletion pada JTextField sangatlah mudah, seperti yang terlihat pada method initAutoCompletion, kita tinggal menginstantiasi class AutoCompletion dengan parameter berupa JTextField dan List data pada konstruktornya.

Lalu bagaimana dengan JComboBox ?
Berbeda dengan JTextField, untuk bisa menggunakan AutoCompletion kita harus menginstantiasi JComboBox dengan konstruktor milik JIDE Common Layer, bukan dengan konstruktor JComboBox.
Kita juga harus menyertakan List data pada konstruktornya.

comboKota = new AutoCompletionComboBox(listKota.toArray());

Namun karena saya menggunakan fitur drag and drop pada Netbeans, maka saya tidak bisa mengedit secara langsung potongan kode pada method initComponents yang digenerate secara otomatis oleh Netbeans.
Namun kita bisa mengeditnya melalui Tab Properties dengan cara sebagai berikut:
  1. Klik comboKota pada Form Designer Netbeans, lalu buka Tab Properties.
    Akses action bar Code, dan cari properti Custom Creation Code, lalu klik edit


  2. Masukkan potongan kode di atas pada dialog editor yang tersedia, lalu klik OK

Maka apabila kita periksa kembali potongan kode instantiasi comboKota akan berubah dari

comboKota = new JComboBox();

menjadi

comboKota = new AutoCompletionComboBox(listKota.toArray());

Jalankan program dan buka form JIDE OSS AutoCompletion, lalu coba mengetik pada text field nama dan combobox kota. Pada komponen tersebut akan ditampilkan data pada List yang sesuai dengan nilai yang kita ketikkan. Sangat mudah bukan, dan kita tidak perlu melakukan reinvent the wheel karena JIDE Common Layer sudah menyediakannya untuk kita, gratis lagi :).


Source code bisa diakses via akun github saya di https://github.com/ekosuhariyadi/belajar-javaswing.
Semoga membantu :).

Comments

Popular posts from this blog

Java | Menambahkan Dialog Konfirmasi Sebelum Keluar dari Aplikasi

Kali ini saya ingin berbagi cara sederhana untuk menampilkan dialog konfirmasi sebelum keluar dari aplikasi. Dengan syarat aplikasi yang kita buat harus menggunakan JFrame sebagai frame utama. Langkah-langkah yang harus kita lakukan adalah sebagai berikut: 1. Ganti property default close operation dari JFrame menjadi DO_NOTHING_ON_CLOSE, value ini dimaksudkan agar ketika button close dari JFrame diklik tidak akan terjadi apa-apa. Sebaliknya jika valuenya adalah EXIT_ON_CLOSE, maka ketika button close dari JFrame diklik maka program akan tertutup. setDefaultCloseOperation(DO_NOTHING_ON_CLOSE); 2. Yang kedua adalah kita harus menambahkan WindowListener pada JFrame. Interface WindowListener memiliki beberapa method terkait event terhadap window (yakni JFrame), namun yang harus kita override hanyalah method windowClosing, method ini akan dipanggil ketika button close diklik.   Sebagai informasi, apabila kita menambahkan WindowListener secara langsung maka semua method dari i

PostgreSQL | Membuat Nomor Urut dengan Window Function ROW_NUMBER()

Pengguna Oracle Database mungkin sudah sangat familiar dengan clausa ROWNUM. Bagi yang belum tahu apa itu ROWNUM,  ROWNUM  adalah  pseudo column  (kolom bayangan) yang berisi nomor urut dari hasil eksekusi query. Sayangnya fitur ini belum tersedia pada PostgreSQL . Namun ada kabar gembira bagi kita pengguna  PostgreSQL , dimana sejak versi 8.4, PostgreSQL telah menyediakan 1 window function  yang mengakomodasi masalah ROWNUM, yakni ROW_NUMBER() . Sesuai dengan dokumentasi yang disediakan, cara menggunakan fungsi ini adalah dengan menggabungkannya dengan clausa OVER  yang didalamnya berisi clausa ORDER BY . Supaya lebih jelas dan lebih mudah dipahami, lebih baik langsung kita praktekkan saja. Saya membuat sebuah table dengan struktur sebagai berikut CREATE TABLE name ( code CHAR(1) ); yang kemudian saya isi kolom code dengan alfabet mulai dari a s/d z  dan angka 0 (nol). Sebelumnya kita lakukan query ke table name tanpa clausa ORDER BY : SELECT code FROM name; Outputny

PostgreSQL | Ekspresi Kondisional CASE Pada Query

Salah satu fitur yang saya sukai dari PostgreSQL adalah dapat digunakannya ekspresi kondisional pada query. PostgreSQL menyediakan ekpresi CASE yang memiliki fungsi yang sama dengan statemen IF/ELSE pada bahasa pemrograman. Berikut adalah bentuk dari ekspresi CASE pada PostgreSQL CASE WHEN condition THEN result      [WHEN ...]      [ELSE result] END Untuk melihat bagaimana cara menggunakan ekspresi CASE, saya memiliki sebuah tabel number dengan sebuah kolom nomor yang memuat data bertipe integer. SELECT nomor FROM number ORDER BY nomor;  nomor -------      1      3     32     37     38     97 (6 rows) Sekarang mari kita gunakan ekspresi CASE untuk menentukan apakah nomor tersebut merupakan bilangan ganjil atau genap. SELECT nomor, (CASE WHEN nomor % 2 = 0 THEN 'Bilangan Genap' ELSE 'Bilangan Ganjil' END) AS status FROM number ORDER BY nomor; dan hasilnya adalah sebagai berikut:  nomor |     status     -------+-----------------      1 | Bilangan