Martinus Ady H. BloG

Human Knowledge Belongs To The World

Membuat Menu Accordion Di Java Swing

| Comments

Akhir-nya kesampaian juga menulis tentang Menu Accordion Di Java Swing ini :) Soalnya dulu bingung menu yang saya buat ini namanya apaan :malu: , 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 : AccordionInOOoImpress
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 : AccordionInPlazmaERP
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 : AccordionInl2fprod
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 :( : UglySwitchInl2fprod
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_prj_awal
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 : TampilanInspectorAccordionPanel
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 : MenggantiPropertiBoxLayout
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 :

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 : TampilanDefaultJToggleButton
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 : ModifikasiPropertiMTaskButton
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 : PenambahanKomponen
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: ModifikasiPropertiScrollPane
Modifikasi Properti JScrollPane

Dan hasil dari pengeditan properti JScrollPane diatas adalah seperti pada gambar dibawah ini : HasilPengeditanPropertiScrollPane
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 :

DesignList1
Design List 1

DesignList2
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 : AddButtonGroup
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 :

    /** 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 :

    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 :D 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 : DesignMainForm
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 :

GTKLAF1
Tampilan Dengan LAF GTK

GTKLAF2
Tampilan Dengan LAF GTK

SwingLAF1
Tampilan Dengan Metal LAF

SwingLAF2
Tampilan Dengan Metal LAF

Bagaimana teman-teman susah ? Hm… dengan sedetail penjelasan diatas masih susah ?? Klo iya, silahkan tanya saja, sebelum bertanya dilarang :D 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 - SubVersion Mudah Dengan RabbitVCS

Beri Komentar Lewat Facebook:

Beri Komentar Lewat Disqus: