Membuat Tabel Swing Dengan Jumlah Kolom Dinamis Di simple-jpa


Pada simple-jpa, saya dapat mendefinisikan sebuah JTable dengan menggunakan glazedTable() yang didalamnya mengandung satu atau lebih glazedColumn(). Masing-masing glazedColumn() ini mewakili kolom yang akan ditampilkan pada tabel. Bagaimana seandainya bila jumlah kolom di tabel bisa berubah atau dinamis? Sebagai contoh, pada tabel untuk menampilkan jumlah stok tersedia di masing-masing gudang, saya perlu memiliki sebuah kolom jumlah untuk masing-masing gudang. Masalahnya adalah pengguna bisa menambah atau mengurangi jumlah gudang yang ada.

Salah satu kelebihan Swing builder dari Groovy dibandingkan dengan definisi dalam bentuk XML atau sejenisnya adalah Swing builder dapat diprogram! Saya dapat menyisipkan kode program pada builder. Hal ini tidak dapat dilakukan pada deklarasi UI dalam bentuk XML atau sejenisnya. Sebagai contoh, saya dapat mendeklarasikan sebuah JTable dengan menggunakan kode program seperti berikut ini di view:

glazedTable(...) {
  (1..20).each { x ->
    glazedColumn(name: "$x", expression: { x })    
  }
}

Program di atas memakai looping (dapat juga diganti dengan syntax for biasa) untuk membuat 20 kolom. Bila dijalankan, tabel akan terlihat seperti pada gambar berikut ini:

Tabel dengan 20 kolom yang dibuat secara dinamis

Tabel dengan 20 kolom yang dibuat secara dinamis

Dengan memberikan kode program pada builder yang menghasilkan tabel, saya dapat menghasilkan kolom secara dinamis. Kembali ke contoh tabel yang berisi jumlah stok per gudang, agar lebih jelas, anggap saja saya memiliki 3 domain class berupa Gudang, StokProduk, dan Produk. Isinya terlihat seperti berikut ini:

@DomainClass @Entity @Canonical
class Gudang {

   @NotEmpty @Size(min=2, max=50)
   String nama

}

@Embeddable
class StokProduk {

   @NotNull @ManyToOne
   Gudang gudang

   @NotNull
   Integer jumlah

}

@DomainClass @Entity @Canonical
class Produk {

   @NotEmpty @Size(min=2, max=50)
   String nama

   @ElementCollection(fetch=FetchType.EAGER)
   List<StokProduk> stok = []

}

Saya bisa membuat deklarasi tabel menjadi seperti berikut ini:

glazedTable(id: 'table', list: model.produkList) {
  glazedColumn(name: 'Nama', property: 'nama')
  controller.findAllGudang().each { Gudang g ->
    glazedColumn(name: "Qty ${g.nama}", expression: { it.stokUntuk(g)?.jumlah?: 0 }, columnClass: Integer)
  }
}

Contoh tampilan pada program di atas akan terlihat seperti:

Kolom qty gudang yang dibuat secara dinamis

Kolom qty gudang yang dibuat secara dinamis

Pada saat tabel akan ditampilkan, kode program yang memanggil controller.findAllGudang() akan dipanggil untuk membaca daftar gudang dari database. Dengan demikian, jumlah kolom jumlah stok yang dihasilkan akan tergantung pada jumlah gudang di database.

Bagaimana bila seandainya jumlah gudang menjadi banyak sekali suatu hari nanti? Tabel akan tetap muncul, tetapi kolom akan menjadi sangat sempit seperti yang terlihat pada gambar berikut ini:

Tampilan tabel bila tidak muat

Tampilan tabel bila tidak muat

Ini akan membuat tabel sulit dibaca. Karena saya tidak tahu secara persis jumlah kolom yang akan ditampilkan, akan lebih baik bila saya menampilkan scrollbar secara horizontal. Pada Swing, agar scrollbar horizontal ditampilkan di JTable, saya perlu mematikan modus auto resize dengan memberikan autoResizeMode: JTable.AUTO_RESIZE_OFF. Selain itu, karena auto resize tidak lagi bekerja, akan lebih baik bila saya menambahkan pengaturan width. Sebagai contoh, saya mengubah deklarasi tabel saya menjadi seperti berikut ini:

glazedTable(id: 'table', list: model.produkList, autoResizeMode: JTable.AUTO_RESIZE_OFF) {
  glazedColumn(name: 'Nama', property: 'nama', width: [100,200])
  controller.findAllGudang().each { Gudang g ->
    glazedColumn(name: "Qty ${g.nama}", expression: { it.stokUntuk(g)?.jumlah?: 0 },
      columnClass: Integer, width: [80, 100])
  }
}

Sekarang, scrollbar horizontal akan muncul bila ukuran tabel tidak muat, seperti yang terlihat pada gambar berikut ini:

Memunculkan scrollbar horizontal pada tabel

Memunculkan scrollbar horizontal pada tabel

Penggunaan nilai pada width dalam bentuk seperti [100,200] mungkin awalnya agak membingungkan. Nilai 100 akan diberikan sebagai argumen untuk setMinWidth() dan nilai 200 akan diberikan sebagai argumen untuk setPreferredWith(). Jangan lupa bahwa glazedColumn() adalah sebuah TableColumn yang memiliki property seperti minWidth, preferredWidth dan maxWidth. Bila ingin sebuah kolom memiliki ukuran yang statis dan tidak bisa di-resize, maka gunakan angka sebagai nilai pada width seperti width: 200.

Perihal Solid Snake
I'm nothing...

2 Responses to Membuat Tabel Swing Dengan Jumlah Kolom Dinamis Di simple-jpa

  1. Festy Winda Sari mengatakan:

    maaf mas, saya mau tanya. apakah judul kolom yang dinamis ini bisa dibuat juga di C# (C sharp)? mohon bantuannya, krn saya sedang membuat program di C sharp dengan requirement seperti ini.
    terima kasih sebelumnya

    • Solid Snake mengatakan:

      Pada WPF di C# (.NET), deklarasi kolom secara dinamis seperti pada artikel ini tidak bisa dilakukan. Hal ini karena WPF memakai XML yang tidak bisa menyertakan kode program. Alasan ini juga yang membuat beberapa pengguna Maven yang berbasis XML beralih ke Gradle yang memakai closure Groovy seperti yang saya lakukan di atas (contohnya pada Eclipse ADT yang digantikan oleh Android Studio).

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: