Akhir-nya kesampaian juga menulis tentang Menu Accordion Di Java Swing ini Soalnya dulu bingung menu yang saya buat ini namanya apaan , nah buat teman-teman ada yang belum tahu apa itu Menu Accordion mungkin bisa coba baca-baca artikel Mengenal Menu Accordion dahulu Nah jika sudah tahu tentang apa itu Menu Accordion sekarang mari kita lihat contoh beberapa aplikasi dan library yang menggunakan atau menyertakan Menu Accordion

Contoh Aplikasi Yang Menggunakan Menu Accordion

OpenOffice.org Impress
OpenOffice.org Impress menyertakan model menu dengan tipe Accordion yang dapat kita lihat seperti gambar dibawah ini :

OOo Impress Accordion Menu In Action

Plazma ERP
Plazma ERP adalah sebuah aplikasi ERP yang dibangun dengan menggunakan Java dan SWT sebagai solusi GUI Toolkit-nya , menurut saya Plazma ERP mempunyai UI yang sangat elegan dan cantik ditambah lagi dengan Menu Accordion-nya yang tampak seperti gambar dibawah ini :

Plazma ERP Accordion Menu In Action

Library Java Swing Yang Mempunyai Komponen Menu Accordion

l2fprod-common
Sedangkan library di Java yang menyediakan solusi komponen Menu Accordion adalah l2fprod-common dengan komponen yang bernama JOutlookBar yang dapat dilihat seperti gambar dibawah ini :

JOutlookBar with Accordion Menu In Action

Hmm.. asyik bukan sudah terdapat komponen yang siap pakai di Java Swing untuk solusi menu Accordion tapi sayangnya ketika saya mencoba pindah dari satu menu ke menu yang lain, tampil seperti scrollbar pada komponen JOutlookBar milik l2fprod seperti gambar dibawah ini :

Tampilan ScrollBar di JOutlookBar

Hm… karena belum menemukan komponen yang sesuai dengan keinginan, maka akhirnya mari kita bikin sendiri komponen Menu Accordion yang terinspirasi dari beberapa Menu Accordion yang telah kita lihat diatas Nah untuk memulai latihan kali ini, ada beberapa bagian yang harus kita lewati yaitu :

1. Pembuatan Project
2. Pembuatan dan Pemasangan Event Menu Accordion
3. Pemasangan Menu Accordion Ke MainForm dan Hasil Akhir

Pembuatan Project

Sekarang buatlah 1 buah project java sederhana dengan menggunakan NetBeans IDE kemudian tambahkanlah sebuah JFrame dan JPanel kemudian berilah nama MainForm untuk JFrame dan AccordionPanel untuk JPanel-nya seperti gambar dibawah ini :

Struktur Project Awal

Nah sampai tahapan ini, proses pembuatan project telah selesai dilakukan dan sekarang mari kita fokuskan bagaimana membuat sebuah Accordion Menu pada tahap selanjutnya

Pembuatan dan Pemasangan Event Menu Accordion

Sekarang bukalah file AccordionPanel sehingga muncul pada GUI Designer NetBeans IDE, jika sudah sekarang pasang BoxLayout pada AccordionPanel tersebut dengan cara klik kanan pada AccordionPanel kemudian pilih Set Layout > Box Layout. Setelah memasang Box Layout sebagai Layout utama yang digunakan oleh AccordionPanel, sekarang masuklah pada Box Layout Properties dengan cara memilih menu Window > Navigating > Inspector hingga tampilannya menjadi seperti gambar dibawah ini :

Tampilan Inspector AccordionPanel

Sekarang ekspand-lah komponen JPanel tersebut hingga muncul tulisan Box Layout, lakukan klik kanan pada Box Layout kemudian pilihlah properties. Pada Box Layout Properties dan gantilah Line Axis menjadi Y Axis seperti gambar dibawah ini :

Mengganti Properti BoxLayout

Tujuan mengganti Line Axis ke Y Axis pada Box Layout ini adalah agar komponen yang akan kita tambahkan ke dalam AccordionPanel ini akan turun ke bawah setiap ada penambahan komponen baru, bukan ke samping Proses layouting untuk dasar dari Menu Accordion telah selesai, sekarang buatlah 1 buah Java Class dengan nama MTaskButton yang meng-extends class JToggleButton yang isinya kurang lebih sebagai berikut :

43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

public class MTaskButton extends javax.swing.JToggleButton {
 
    private JComponent  parentComp;
    private boolean     resizeComponent = false;
 
    /** Buat agar panjang komponen ini sama panjangnya dengan parentComponen
     * jika ditambahkan pada Container dengan BoxLayout */
    @Override public int getWidth() {
        if (resizeComponent && parentComp != null) {
            super.setSize(parentComp.getWidth(), super.getHeight());
        }
 
        return super.getWidth();
    }
 
    public JComponent getParentComp() {
        return parentComp;
    }
 
    public void setParentComp(JComponent parentComp) {
        this.parentComp = parentComp;
    }
 
    public boolean isResizeComponent() {
        return resizeComponent;
    }
 
    public void setResizeComponent(boolean resizeComponent) {
        this.resizeComponent = resizeComponent;
    }
}

Tujuan membuat sebuah class baru yang meng-extends JToggleButton adalah sebagai berikut :
- Agar menu yang dibuat mempunyai efek Pressed ketika user memilih salah satu menu.
- Kita perlu meng-override method getWidth() agar Button yang kita pasang pada Container dengan BoxLayout mempunyai panjang yang sama dengan component parent-nya. Jika kita menggunakan JToggleButton biasa, maka jika kita tambahkan pada AccordionPanel hasilnya akan menjadi seperti gambar dibawah ini :

Tampilan Default JToggleButton Pada BoxLayout

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

Modifikasi Properties Pada MTaskButton

Setelah selesai melakukan proses modifikasi properties pada MTaskButton, sekarang tambahkanlah 1 buah JList dan 2 buah MTaskButton lagi dengan konfigurasi untuk MTaskButton sama seperti diatas. Dan hasil dari penambahan komponen yang baru saja dilakukan akan menghasilkan tampilan seperti gambar dibawah ini :

Hasil Penambahan JScrollPane dan 2 Buah MTaskButton

Hm.. hasilnya koq jadi jelek yah, ok sekarang masuklah pada menu Inspector kemudian carilah komponen JScrollPane kemudian klik kanan dan modifikasilah properti AlignmentX dari 0.5 ke 0.0 seperti gambar dibawah ini:

Modifikasi Properti JScrollPane

Dan hasil dari pengeditan properti JScrollPane diatas adalah seperti pada gambar dibawah ini :

Hasil Pengeditan Properti JScrollPane

Jika sudah, sekarang tambahkanlah 1 buah JList dan 1 buah JTree pada node Other Component di jendela Inspector dan design-lah menu AccordionPanel seperti gambar dibawah ini :

Design List 1

Design List 2

Note: Untuk konfigurasi list dan jtree sama dengan konfigurasi list sebelumnya

Tambahkanlah dahulu sebuah ButtonGroup untuk menampung 3 buah MTaskButton pada node Other Component di jendela Inspector seperti gambar dibawah ini :

Menambahkan ButtonGroup Pada MTaskButton

Setelah urusan dengan komponen selesai, sekarang buatlah sebuah method dahulu yang berfungsi untuk me-reset menu accordion kita dengan nama recreateLayout() seperti dibawah ini :

120
121
122
123
124
125
126

    /** Fungsi method ini hanyalah untuk menghapus seluruh komponen yang telah
     * ditambahkan kemudian memasang <code>BoxLayout</code> dengan Axis Y AXIS */
    private void recreateLayout() {
        this.removeAll();
        this.setBorder(javax.swing.BorderFactory.createEmptyBorder(0, 0, 0, 0));
        this.setLayout(new javax.swing.BoxLayout(this, javax.swing.BoxLayout.Y_AXIS));
    }

Inti dari Menu Accordion ini sebenarnya terdapat pada setiap action yang terjadi pada ketiga button MTaskButton, sedangkan action yang perlu ditambahkan pada mTaskButton1, mTaskButton2 dan mTaskButton3 ini adalah seperti berikut :

130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

    private void mTaskButton1ActionPerformed(java.awt.event.ActionEvent evt) {
        recreateLayout();
        add(mTaskButton1);
        add(jScrollPane1);
        add(mTaskButton2);
        add(mTaskButton3);
        revalidate();
    }
 
    private void mTaskButton2ActionPerformed(java.awt.event.ActionEvent evt) {
        recreateLayout();
        add(mTaskButton1);
        add(mTaskButton2);
        add(jScrollPane2);
        add(mTaskButton3);
        revalidate();
    }
 
    private void mTaskButton3ActionPerformed(java.awt.event.ActionEvent evt) {
        recreateLayout();
        add(mTaskButton1);
        add(mTaskButton2);
        add(mTaskButton3);
        add(jScrollPane3);
        revalidate();
    }

Hooohoho…. udah tahu trik-nya kan nah kalau sudah tahu sekarang jalankan dahulu proses Clean n Build baru kita pasang pada MainForm

Pemasangan Menu Accordion Ke MainForm dan Hasil Akhir

Untuk memasang Menu Accordion yang sudah jadi kedalam MainForm tidak susah koq, kita cuma perlu drag n drop file AccordionPanel kedalam MainForm dan taaada menu accordion sudah masuk kedalam MainForm Dan sekarang, coba design-lah MainForm menjadi seperti gambar dibawah ini :

Design MainForm

Dan jika sudah, sekarang coba jalankan dengan menekan tombol F6 jika tidak ada pesan error maka seharusnya akan tampil seperti gambar dibawah ini :

Tampilan Dengan LAF GTK	Tampilan Dengan LAF GTK
Tampilan Dengan Metal LAF	Tampilan Dengan Metal LAF

Bagaimana teman-teman susah ? Hm… dengan sedetail penjelasan diatas masih susah ?? Klo iya, silahkan tanya saja, sebelum bertanya dilarang Dan Mungkin langkah yang saya ambil ini kurang elegan, tapi hmm.. lumayan juga lah kalau menurut saya Kalau ada teman-teman yang tahu komponen yang bagus dan lebih sederhana, boleh donk di share

Link-link terkait :
- Deskripsi Menu Accordion (WIKI)
- Plazma ERP
- Komponen-komponen l2fprod
- Demo Menu Accordion in Java Swing
- Source Code Menu Accordion
- Milis NetBeans Indonesia
- More tutorial about Java Swing

Last Modified: Thursday, November 19th, 2009 @ 19:44