Martinus Ady H. BloG

Buat teman-teman yang sudah tahu teknik ini, mungkin tulisan ini bisa dikatakan ketinggalan jaman Sebenarnya apa sih maksud tulisan ini ? Tulisan ini cuma ingin menunjukkan pada teman-teman yang belum tahu bagaimana sih menggunakan Tabbed Pane milik NetBeans (TabbedContainer) pada Aplikasi Swing kita Kenapa saya bilang tulisan ini ketinggalan jaman ? Karena ternyata, sudah ada yang pernah melakukan hal serupa sejak tahun 2004 lalu ( NetBeans versi 4.0, detail artikel bisa dibaca disini ). Kenapa saya posting lagi disini, karena cari tutorialnya ternyata susah juga . Jadi harapan saya agar, semoga teman-teman yang belum tahu bisa dengan mudah mencoba dan tidak perlu berlama-lama bermain dengan paman Google Ok sudah siap?? Kalau iya, mari kita lanjutkan

Seperti teman-teman ketahui bersama, class JTabbedPane pada Swing mempunyai sedikit sekali fitur dan juga JTabbedPane hanya mempunyai 2 buah mode tampilan yaitu SCROLL_TAB_LAYOUT dan WRAP_TAB_LAYOUT yang bisa kita konfigurasi melalui metode setTabLayoutPolicy() (WRAP_TAB_LAYOUT merupakan konfigurasi standart dari JTabbedPane jadi tidak perlu dikonfigurasi lagi agar tampilan tab menjadi mode “wrapping”) Nah sekarang yang menjadi pertanyaan saya yaitu, apakah teman-teman pernah membuat sebuah aplikasi yang mempunyai jumlah tab yang banyak (anggap saja sampai 10 atau 20 tab lebih) dalam 1 form ? Bagaimanakah tampilan tab teman-teman ? Kemudian bagaimana navigasi antar tab ? Dengan menggunakan JTabedPane yang hanya membawa 2 buah mode tampilan akan terasa sangat kurang dan proses navigasi menjadi “susah”. Jika menggunakan tampilan WRAP_TAB_LAYOUT navigasi antar tab memang mudah, tapi dari tampilan akan terlihat sedikit “kurang pas dimata”. Sedangkan jika kita menggunakan tampilan SCROLL_TAB_LAYOUT, dari sisi tampilan bagus (tidak berubah) tapi dari sisi navigasi terasa sangat susah (Bayangkan jika kita ingin pindah secara cepat dari tab 20 ke tab 1, dengan menggunakan tampilan SCROLL_TAB_LAYOUT kita harus melakukan klik 1-1 dari tab 20 sampai tab 1 tampil. Hm.. bukan proses yang menyenangkan saya rasa ). Untuk menjelaskan ilustrasi saya diatas, mari kita sama-sama melihat screenshot tampilan JTabbedPane dalam 2 mode yaitu SCROLL_TAB_LAYOUT dan WRAP_TAB_LAYOUT dibawah ini :

Tampilan WRAP_TAB_LAYOUT (atas) dan SCROLL_TAB_LAYOUT (bawah)

Nah setelah melihat tampilan standart dari JTabbedPane diatas, sekarang mari kita bandingkan apa yang ditawarkan oleh TabbedContainer atau NetBeans TabbedPane Untuk masalah tampilan TabbedContainer membawa lebih banyak mode (tipe) yaitu TabbedContainer.TYPE_EDITOR, TabbedContainer.TYPE_TOOLBAR, TabbedContainer.TYPE_SLIDING dan TabbedContainer.TYPE_VIEW yang bisa kita lihat pada gambar dibawah ini :

Type Editor	Type ToolBar
Type Sliding	Type View

Waaw… lebih mantap bukan ? Selain dengan tampilan lebih banyak kita juga dapat bonus yaitu adanya tombol “close” yang secara otomatis terdapat pada setiap panel yang kita tambahkan ke dalam TabbedContainer

Ok-ok cukup sudah preview-nya Sekarang bagaimana agar aplikasi Swing kita bisa mempunyai tab seperti diatas ? Caranya sangat mudah yaitu, silahkan ambil library-library dibawah ini pada direktori $NETBEANS_HOME/platform/modules (dimana $NETBEANS_HOME adalah tempat dimana NetBeans di install) :

1. org-netbeans-swing-tabcontrol.jar
2. org-openide-awt.jar
3. org-openide-util-lookup.jar
4. org-openide-util.jar
5. org-openide-windows.jar

Setelah mengamankan ke 5 library diatas, sekarang buatlah sebuah project baru dengan nama TabbedContainer kemudian tambahkan library tersebut. Setelah menambahkan ke 5 library diatas pada project yang telah kita buat, sekarang tambahkanlah komponen TabbedContainer yang terdapat pada library org-netbeans-swing-tabcontrol.jar ke NetBeans Pallete dengan mengikuti tulisan Menambahkan Komponen Ke NetBeans Pallete hingga tampilan NetBeans Pallete kita menjadi seperti gambar dibawah ini :

Tampilan Komponen TabbedContainer Pada NetBeans Pallete

Jika sudah, sekarang buatlah 1 buah JFrame dan pasanglah komponen TabbedContainer yang baru ditambahkan tersebut ke dalam JFrame. Nah yang perlu diperhatikan disini adalah TabbedContainer ini menggunakan konsep DataModel seperti JTable dengan TableModelnya, jadi sebelum menampilkan tab kita harus mengkonfigurasi dahulu DataModel untuk TabbedContainer ini. Sedangkan model yang terdapat pada TabbedContainer ini ada 2 yaitu :

1. TabDataModel dan
2. DefaultTabDataModel

Karena saya bingung bagaimana cara menggunakan TabDataModel, maka pada tulisan ini kita akan menggunakan DefaultTabDataModel saja ya

Nah didalam DataModel (DefaultTabDataModel atau TabDataModel) ini, kita bisa menambahkan sebuah TabData yang dapat kita isi dengan komponen yang akan ditampilkan pada tab melalui constructor TabData(Object userObject, Icon i, String caption, String tooltip). Setelah TabData terisi dengan komponen yang ingin kita tampilkan, maka kita dapat menambahkan-nya kedalam DefaultTabDataModel melalui method addTab(int index, TabData tabData) seperti contoh dibawah ini :

        DefaultTabDataModel tabDataModel = new DefaultTabDataModel();
        tabDataModel.addTab(0, new TabData(new MyPanel(), null,  "First Tab", "First Tab"));

Proses inisialisasi model telah selesai sampai disini dan siap untuk digunakan, sekarang mari kita tambahkan model yang sudah berisi TabData beserta komponen kita kedalam TabbedContainer sekalian menentukan mode yang akan digunakan dengan cara seperti dibawah ini :

    ....
    TabbedContainer tabbedContainer1 = new TabbedContainer(tabDataModel, TabbedContainer.TYPE_EDITOR);
    ....

Diatas kita sudah mengetahui bagaimana cara menggunakan DefaultTabDataModel, TabData dan memasangnya kedalam TabbedContainer, sekarang bagaimana implementasi-nya pada project yang telah dibuat sebelumnya ? Sama seperti pada langkah yang sudah dijelaskan diatas, sekarang buatlah sebuah variabel global untuk DefaultTabDataModel dan inisialisasi-lah pada constructor JFrame tepat diatas method initComponent() dan tambahkanlah sebuah TabData seperti dibawah ini :

1
2
3
4
5
6
7
8
9
10
11
12
13

public class TabbedContainerFrame extends javax.swing.JFrame {
 
    private DefaultTabDataModel tabDataModel;
 
    /** Creates new form TabbedContainerFrame */
    public TabbedContainerFrame() {
        tabDataModel = new DefaultTabDataModel();
        tabDataModel.addTab(0, new TabData(new MyPanel(), null,
                "First Tab", "First Tab"));
        initComponents();
        setLocationRelativeTo(null);
    }
}

Jika sudah sekarang masuk-lah pada mode design kemudian klik kanan pada komponen TabbedContainer dan pilih Customize Code dan edit constructor TabbedContainer seperti gambar dibawah ini :

Tampilan Customize Code

Sekarang coba jalankanlah project-nya dengan menekan tombol F6 dan jika tidak ada error yang terjadi maka seharusnya kita akan melihat tampilan seperti gambar dibawah ini :

Sukses Menjalankan TabbedContainer

Hore sudah jadi Tapi eits… tunggu dulu ini belum selesai Sekarang bagaimana jika kita ingin menggunakan System Look And Feel dan tampilan-nya akan sebagus NetBeans ? Ok sekarang mari kita coba tambahkan kode untuk memasang System Look And Feel pada method Main hingga menjadi seperti dibawah ini :

    public static void main(String[] args) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException ex) {
                    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
                } catch (InstantiationException ex) {
                    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
                } catch (IllegalAccessException ex) {
                    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
                } catch (UnsupportedLookAndFeelException ex) {
                    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
                }
 
                new TabbedContainerFrame().setVisible(true);
            }
        });
    }

Dan hasilnya adalah seperti gambar dibawah ini :

Tampilan Look And Feel Yang Kacau

Tampilan TabbedContainer jadi kacau seperti ini terjadi ketika menggunakan Look And Feel GTK dan Nimbus, sedangkan pada Windows Look And Feel tampilan tidak mengalami perubahan yang signifikan alias baik-baik saja !!

Berdasarkan JavaDoc LookAndFeel NetBeans, seluruh proses “rendering” pada NetBeans dan NetBeans Platform terdapat pada package org.netbeans.swing.plaf. Dan jika ingin tampilan yang sesuai dengan Look And Feel yang berjalan, kita harus memanggil method org.netbeans.swing.plaf.Startup.run() pada saat startup. Sekarang carilah library org-netbeans-swing-plaf.jar pada direktori $NETBEANS_HOME/platform/modules dan tambahkanlah pada project, setelah itu sekarang modifikasilah method Main menjadi seperti dibawah ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    public static void main(String[] args) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException ex) {
                    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
                } catch (InstantiationException ex) {
                    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
                } catch (IllegalAccessException ex) {
                    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
                } catch (UnsupportedLookAndFeelException ex) {
                    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
                }
 
                Startup.run(null, 1, null);
                new TabbedContainerFrame().setVisible(true);
            }
        });
    }

Dan sekarang coba jalankan lagi projectnya dengan menekan tombol F6 dan bagaimana hasilnya ???

Penambahan kode pada baris 16 diatas jangan dilakukan jika menggunakan Windows LookAndFeel, penggunaan 1 baris kode diatas pada Windows Look And Feel akan menyebabkan tampilan tabcontrol menjadi kacau !!!

Fyuh.. akhirnya selesai juga tulisan-nya dan semoga bisa membantu teman-teman yang masih merasa penasaran bagaimana menggunakan TabbedContainer ini pada aplikasi Swingnya !! Sekedar catatan saja, penggunaan Startup.run() masih belum dicoba di Nimbus LAF hasilnya memuaskan atau tidak. Dan untuk penggunaan beda OS mungkin bisa di bedakan jika LookAndFeel yang dipakai adalah GTK maka panggil method Startup.run(), jika tidak maka abaikan

Semua bahan-bahan yang saya jadikan sebagai referensi dan hasil percobaan bisa teman-teman lihat pada link-link dibawah dan akhir kata selamat ber-eksperimen teman-teman dan mohon maaf klo ada yang salah dengan pembahasan-nya (jika ada salah, mari direvisi bersama-sama)

Happy Hacking Guys !!

Link-link terkait :

1. TabbedContainer API
2. TabData API
3. TabDataModel API
4. DefaultTabDataModel API
5. Package org.netbeans.swing.plaf Description
6. NetBeans Architecture Answers for Look & Feel Customization Library module
7. TabContainer better JTabbedPane (JavaLobby Forum)
8. Menambahkan Komponen Ke NetBeans Pallete
9. Cara Checkout Contoh Aplikasi Martin Personal Project
10. Source Code TabbedContainer Project
11. Project TabbedContainer.zip

Teman-teman ingin mengcopy artikel pada blog ini ? Jangan kuatir, teman-teman bebas koq mengcopy seluruh atau sebagian dari isi artikel yang di posting pada blog ini dengan tujuan dan maksud apapun. Tapi bantu saya ya teman-teman dengan memberikan back link ke blog ini dengan mencantumkan alamat http://martinusadyh.web.id/ pada setiap artikel yang teman-teman copy atau publish di blog teman-teman :)

Feed for this entry. Leave a response, or trackback from your own site.