Membuat Menu Accordion di Swing Java

java

Menu Accordion merupakan salah satu bentuk tampilan UI yang digunakan untuk menampilkan berbagai data dalam bentuk yang menyerupai accordion. Menu ini setahu saya semakin populer setelah diperkenalkan sebagai plugin di JQuery.

accordion jquery
Menu Accordion Menggunakan JQuery

accordion primefaces
Menu Accordion Menggunakan PrimeFaces

Menu Accordion tidak hanya digunakan pada aplikasi yang berbasis web tetapi juga bisa diintegrasikan dengan aplikasi berbasis desktop tentunya dengan component library yang khusus digunakan untuk aplikasi dekstop. Di dunia .NET kita bisa banyak menemukan komponen-komponen siap pakai yang memiliki tampilan antar muka yang keren banget dan mudah diintegrasikan. Akan tetapi sayangnya komponen-komponen tersebut berbayar (crack edition pasti ada :D) dan hampir tidak ditemukan komponen-komponen sekeren itu di Java :(.

Jangan sedih karena dengan sedikit ilmu dan dengan bantuan berbagai sumber kita bisa membuat Menu Acoordion sendiri!. Ide ini saya ambil dari Saudara Martinus Ady, berterimakasihlah pada beliau.

Pada tutorial ini goal kita adalah membuat menu accordion pada Java Swing yang tampilan akhirnya kurang lebih seperti ini:
accordion sendiri

Langkah1#Membuat Projek dan Menambahkan Beberapa Kelas
Buatlah projek dengan nama Accordion dan tambahkan 1 JFrame dengan nama MainFrame, 1 buah JPanel dengan nama AccordionPanel serta 1 kelas dengan nama TaskButton. Jika benar membuatnya maka struktur projek kita adalah sebagai berikut:
struktur projek

Langkah2#Membuat Accordion
Sekarang kita akan bekerja pada kelas AccordionPanel. Buka kelas ini sehingga muncul dalam mode Design. Klik kanan kemudian pilih Set Layout > Box Layout. Jika dilihat pada Inspector (jika jendela inspector belum muncul maka dapat dimunculkan dengan cara Window > Navigating > Inspector) tampilannya adalah seperti ini:
inspector boxlayout

Klik kanan pada BoxLayout pada gambar diatas dan pilihlan Properties, ubah Axis : X Axis menjadi Axis : Y Axis seperti pada gambar:
Y Axis

Perubahan properties diatas tadi dimaksudkan supaya jika ada komponen-komponen lain yang ditambahkan didalam Accordion Panel maka komponen akan berjajar rapi vertikal kebawah tidak menyamping secara horizontal.

Sekarang fokus pada kelas TaskButton. Masukkan kode sebagai berikut

Kita perlu mengoverride method getWidth() supaya kelas TaskButton ini memiliki lebar yang sama dengan lebar komponen parent-nya, dalam kasus ini parent adalah kelas AccordionPanel.

Jika sudah, sekarang lakukan dahulu proses Clean & Build kemudian drag n drop-lah kelas TaskButton ke dalam AccordionPanel kemudian pada TaskButton properties, modifikasilah properti parentComp dan resizeComponent menjadi seperti gambar dibawah ini :
taskbutton properties

Setelah selesai melakukan proses modifikasi properties pada TaskButton, tambahkan 1 buah JList dan 2 buah TaskButton lagi dengan konfigurasi untuk TaskButton sama dengan cara diatas tadi. Dan hasilnya adalah seperti pada gambar dibawah ini:
accordion mencong

Tampak dari gambar diatas bahwa dengan ditambahkannya JList menjadikan tombol TaskButton menjadi mencong gak karuan. Untuk memperbaikinya kita kembali ke Inspector Window dan carilah jScrollPane
jscrollpane

Klik kanan pada JScrollPane tadi dan pilih Properties dan ubahlah alignmentX menjadi 0.0
alignment jscrollpane

Sekarang AccordionPanel menjadi rapi
accordion panel rapi

Selanjutnya adalah menambahkan 1 buah JList dan 1 buah JTree pada Other Component yang terdapat di Inspector Window, tambahkan juga JButtonGroup. Untuk lebih jelasnya lihat pada gambar berikut:
tambah jlist jbutton jgurpbutton

atur kedua JScrollPane yang terdapat pada JList dan JTree yang kita tambahkan seperti pada pengaturan JScroll diatasa yakni ubah alignmentX menjadi 0.0.

Next adalah menambahkan sebuah ButtonGroup untuk menampung 3 buah TaskButton pada node Other Component di jendela Inspector seperti gambar dibawah ini :
pilih 3 taskbutton
pilih buttongroup

Selanjutnya pada kelas AccordionPanel buat sebuah method untuk mereset menu accordion

Tambahkan method untuk aksi klik pada ke-3 TaskButton seperti berikut:

Dari ketiga method diatas maka sudah terlihat trik yang digunakan untuk membuat Menu Accordion :D, Clean and Build terlebih dahulu.

Langkah3#Menambahkan AccordionPanel kedalam FrameMain
Selanjutnya adalah menambahkan kelas AccordionPanel kedalam kelas FrameMain dengan cara drag dan drop kelas AccordionPanel ke FrameMain. Desain FrameMain sebagai berikut atau sesuka kamu.
final design

Jalankan aplikasi dan nikmati hasilnya :D. Berikut gambar aplikasi yang telah saya buat:
dengan looknfeeldengan looknfeel 2
Aplikasi dengan Look n Feel dari JTatto

tanpa look feeltanpa look feel 2
Aplikasi tanpa Look n Feel

Lumayan ribet sih menurut saya, tapi puas.. .Jika masih ada yang kebingungan saya persilahkan untuk diskusi melalui fitur komentar pada artikel ini.

Happy Coding 😀

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

Leave a Reply

Your email address will not be published. Required fields are marked *