Bekerja dengan Menu, Popup Menu dan Toolbar

Menu, Popup menu dan Toolbar digunakan untuk melakukan navigasi dalam aplikasi. dengan ketiga komponen itu navigasi dalam aplikasi menjadi lebih fleksibel dan mudah digunakan oleh user. Menu dan Toolbar pada umumnya diletakkan di bagian atas dari aplikasi agar mudah ditemukan oleh user. Sedangkan Popup Menu bisa muncul di mana saja sesuai dengan konteks aplikasi.

JMenuBar adalah class yang digunakan untuk menampung JMenu. JMenu dapat menampung satu atau lebih JMenuItem. JMenuItem merupakan bagian terluar dari struktur menu yang tidak bisa mempunyai child. JSeparatordigunakan untuk memisahkan antara satu menu item dan menu item yang lain. Jika didalam menu terdapat sub menu, gunakan JMenu untuk menampung sub menu tersebut. Selain JMenuItem, JMenu juga dapat menerima class JCheckBoxMenuItem dan JRadioButtonMenuItem.

JPopupMenu mempunyai banyak kesamaan dibandingkan dengan JMenuBar. Perbedaan utamanya adalah : JMenuBar hanya bisa berada di atas sebuah jendela JFrame. Sedangkan JPopupMenu bisa muncul di mana saja sesuai dengan konteks dari aplikasi.

Perbedaan lainnya terletak di dalam penggunaan umum keduanya. JMenuBar berisikan menu/instruksi yang bersifat umum dan berlaku untuk semua keadaan dalam aplikasi. Sedangkan JPopupMenu akan mempunyai menu/instruksi yang berbeda-beda berdasarkan dari konteks aplikasi. Oleh karena itu JPopupMenu terkadang disebut juga sebagai konteks menu.

Toolbar memberikan cara yang lebih praktis dibandingkan menu, bahkan bisa dikatakan bahwa toolbar adalah cara cepat untuk mengakses menu. Oleh karena itu, setiap item dalam toolbarbiasanya juga tersedia dalam menu. Pada umumnya toolbar diwakili hanya dengan gambar/icon yang melambangkan perintah dari toolbarnya. Di internet banyak tersedia toolbar icon gratis yang dapat kita gunakan.

Berbeda dengan JMenuBar dan JPopupMenu yang hanya bisa menerima menu item, JToolBar dapat menampung JButton atau control lainya. Seperti contohnya : JCheckBox, JRadioButton, JtoggleButton dan lainya. Normalnya, JToolBar akan diisi dengan JButton yang dihilangkan text-nya dan diganti dengan icon. Kita juga perlu merubah dekorasi JButton agar tampilannya terlihat cantik dan menarik.

 

         Contoh program dengan Menu, Popup Menu dan Toolbar 

Untuk membuat program seperti di atas, ada beberapa tahap yang perlu dilakukan. Tahap pertama adalah membuat Menu, yang kedua adalah membuat Popup Menu dan yang ketiga adalah
membuat Toolbar.

Membuat Menu
Bekerja dengan Menu dalam Java melibatkan enam komponen swing, antara lain :

1. JMenuBar : Class yang menampung semua menu, hanya bisa menampung JMenu sebagai child.

2. JMenu : Class yang mempunyai child menu item. Biasanya JMenu ini yang jadi child langsung dengan JMenuBar

3. JMenuItem : Ujung dari menu, disinilah object Action diletakkan, sehingga ketika kita memilih JMenuItem ada action  tertentu yang dijalankan aplikasi.

4. JCheckBoxMenuItem : Ujung dari menu, namun bentuknya lebih mirip JCheckBox.

5. JRadioButtonMenuItem : Ujung dari menu, namun bentuknya lebih mirip JButton.

6. JSeparator : pemisah antar JMenuItem atau antar JMenu

Setiap komponen menu mempunyai fungsi dan kegunaan masingmasing. Jika kita perhatikan, menu dalam aplikasi umumnya mempunyai shortcut untuk mengakses menu tanpa menggunakan bantuan mouse. Misalnya menu File biasanya dapat diakses menggunakan tombol ALT + F, menu Format dapat diakses dengan ALT + O. Fasilitas shortcut menu ini disebut sebagai Keyboard Mnemonic. File mempunyai mnemonic F, Format mempunyai mnemonic o, dan seterusnya. Pada umumnya tampilan mnemonic dari sebuah menu diwakili dengan huruf yang bergaris bawah.

Matisse mempunyai fasilitas yang sangat OK untuk bekerja dengan Menu, fasilitas drag-and-dropnya membantu banyak pekerjaan membangun aplikasi barbasis GUI secara signifikan.

Dalam program diatas kita akan membuat struktur menu sebagai berikut:

 

               Struktur menu dari aplikasi 

Ikuti langkah-langkah berikut ini untuk membuat struktur menu seperti diatas:

1. Buat sebuah class JFrame dan beri nama ToolbarMenu.java
2. Menambahkan JMenuBar ke dalam JFrame. Pilih komponen Menu Bar dari Jendela Pallete kemudian klik JFrame di Jendela Design. Sebuah class JMenuBar akan ditambahkan di dalam JFrame. Ganti namanya menjadi menuBar.

3. Menambahkan JMenu ke dalam JMenuBar. Klik kanan JMenuBar yang baru saja kita buat di Jendela Inspector, kemudian pilih menu :

Add > JMenu

Ganti nama JMenu tersebut menjadi menuFile. Kemudian alihkan perhatian anda ke Jendela Properties

 

                  Jendela Properties dari class JMenu

Isi properti text dengan string “File”. Kemudian set isi properti mnemonic dengan string “f”, hal ini akan menyebabkan tampilanya menuFile menjadi File dan user dapat menekan tombol ALT + F untuk mengaktifkan menu menuFile.

4. Menambahkan JMenuItem. Langkah berikutnya adalah menambahkan JMenuItem ke dalam JMenu menuFile yang telah dibuat di langkah sebelumnya. caranya, klik kanan di JMenu menuFile di Jendela Inspector, kemudian pilih menu :

Add > JMenuItem

Tambahkan berturut-turut menuNew, menuOpen dan menuSave. Pilih JMenuItem dari Jendela Inspector, kemudian untuk masing-masing JMenuItem set text dan mnemonic yang sesuai dari Jendela Properties.

5. Menambahkan JSeparator. Dalam struktur menu yang bagus, menu yang mempunyai fungsi serupa diletakkan dalam urutan berderdekatan dan dipisahkan dengan separator (pemisah). Langkah menambahkan JSeparatortidak berbeda dengan langkah menambahkan JMenuItem, klik kanan di JMenu
menuFile kemudian pilih menu:

 Add > JSeparator

6. Menambahkan JMenu. Berikutnya kita akan menambahkan JMenu baru ke dalam JMenu menuFile. JMenu yang baru ini akan bertindak sebagai sub menu. Caranya juga sama : klik kanan di JMenu menuFile kemudian pilih menu :

Add > JMenu

Beri nama menuSetting, set text dan mnemonic yang sesuai pada Jendela Properties.

7. Menambahkan JCheckBoxMenuItem. Perilaku JCheckBoxMenuItem tidak berbeda jauh dengan JCheckBox biasa, bedanya hanyalah JCheckBoxMenuItem berada dalam struktur menu. Cara menambahkan JCheckBoxMenuItem sama dengan komponen lain : klik kanan JMenu menu Setting kemudian pilih menu :

Add > JCheckBoxMenuItem

Beri nama chkLineNumber, set text dan mnemonic yang sesuai pada Jendela Properties.

JCheckBoxMenuItem sedikit sepesial dibandingkan dengan JMenuItem, karena JCheckBoxMenuItem memiliki properties selected. Properties selected ini digunakan untuk menentukan apakah JCheckBoxMenuItem dalam keadaan terpilih atau tidak.

8. Menambahkan JRadioButtonMenuItem. Dalam contoh ini kita akan mempunyai dua buah JRadioButtonMenuItem, radioBinary dan radioText. Keduanya dibuat dengan langkah yang sama dengan komponen lain, klik kanan di JMenu menuSetting, kemudian pilih menu :

Add > JRadioButtonMenuItem

Set text dan mnemonic yang sesuai dari Jendela Properties.

9. Menambahkan ButtonGroup. Seperti halnya JRadioButton, JRadioButtonMenuItem juga memerlukan ButtonGroup agar hanya satu buah JRadioButtonMenuItem yang bisa dipilih. Cara menambahkan ButtonGroup sangat mudah, klik item ButtonGroup dari Jendela Pallete kemudian klik Jendela Design, maka otomatis ButtonGroup akan ditambahkan. Ganti namanya menjadi groupOpenMethod.

Dalam Jendela Inspector, ButtonGroup yang baru dibuat tadi akan berada dalam kategori Other Components, seperti terlihat dalam gambar di bawah ini :

ButtonGroup berada dalam kategori Other Components

10. Menambahkan JRadioButtonMenuItem ke dalam ButtonGroup. Pilih masing-masing JRadioButtonMenuItem dari Jendela Inspector, kemudian perahatikan Jendela Properties dari JRadioButtonMenuItem tersebut, pada bagian groupButton pilih item groupOpenMethod, seperti terlihat dalam gambar di bawah ini :

         Properties dari JRadioButtonMenuItem

11. Compile dan jalankan class ToolbarMenu.java. Klik kanan class ToolbarMenu dari Jendela Design kemudaian pilih menu Run File atau tekan tombol SHIFT + F6.

Bekerja dengan Menu menggunakan Matisse sangatlah menyenangkan dan produktif. Hal ini berbeda sekali jika harus mengetik satu demi satu kode untuk menyusun struktur menu seperti contoh program diatas.

Membuat Popup Menu menggunakan Matisse juga sama mudahnya. Hanya saja kita harus menentukan dimana dan dengancara apa popup menu itu muncul, apakah dengan penekanan tombol tertentu dari keyboard atau ketika tombol mouse ditekan. 

Membuat Popup Menu

Popup menu pada dasarnya tidak jauh berbeda dibandingkan dengan menu biasa, hanya saja popup menu dapat muncul di mana saja, tidak hanya di bagian atas JFrame seperti halnya JMenuBar. Selain itu kita harus menentukan kapan popup muncul, pada umumnya popup akan muncul ketika user melakukan klik kanan terhadap suatu komponen swing. Misalnya, ketika suatu table di klik kanan terdapat popup yang muncul, dan sebagainya.

Popup menu terutama digunakan sebagai “context sensitive menu”, dimana menu yang ditampilkan oleh popup menu tergantung konteks dari aplikasi, semisal : komponen apa yang dikenai aksi klik kanan, bagaimana keadaan data dalam komponen tersebut dan sebagainya.

Aplikasi yang memerlukan interaksi yang sangat intens dengan user sebaiknya menggunakan popup menu untuk memudahkan user mengakses action tertentu. Hal ini jauh lebih praktis dibanding user harus mengakses menu dalam JMenuBar di bagian atas JFrame.

Popup menu dalam contoh program diatas akan muncul ketika user melakukan klik kanan terhadap JFrame. menu yang ditampilkanya pun hanya ada tiga buah: cut, copy dan paste. Ikuti langkah-langkah beritkut ini untuk membuat Popup menu :

1. Buka class ToolbarMenu.java, yang telah dibuat dalam langkah sebelumnya, dalam Jendela Design.

2. Klik Jendela Pallete dan pilih JPopupMenu, kemudian klik Jendela Design. Secara otomatis JPopupMenu akan ditambahkan dalam class ToolbarMenu.java. JPopupMenu tidak terlihat dalam Jendela Design, namun anda bisa mengkasesnya melalui Jendela Inspector.

3. Menambahkan JMenuItem. Seperti halnya JMenuBar, JPopupMenu dapat memiliki child berupa JMenu, JMenuItem, JCheckBoxMenuItem, JRadioButtonMenuItem dan JSeparator. Menambahkan JMenuItem ke dalam JPopupMenu sangat sederhana, caranya : klik kanan pada JPopupMenu di Jendela Design, kemudian pilih menu :

Add > JMenuitem

Ganti nama objectnya menjadi menuCut, beralihlah ke Jendela Properties kemudian set text dan mnemonic yang sesuai. Lakukan langkah ini untuk JMenuItem yang lain, menuCopy dan menuPaste.

4. Memunculkan JPopupMenu. Ketika tombol kanan mouse di klik diatas JFrame, JPopupMenu akan tampil. Agar behavior tersebut berjalan, kita perlu menangani event mouseClick terhadap JFrame. Caranya :

a) Klik kanan JFrame di Jendela Design, kemudian pilih menu :

Events > Mouse > mouseClicked

b) Di dalam jendela source yang terbuka masukkan kode berikut ini :

private void formMouseClicked(
java.awt.event.MouseEvent evt) {
// TODO add your handling code here:
if(evt.getButton() == MouseEvent.BUTTON3){
popUpMenu.show(
(Component)evt.getSource(),
evt.getX(),evt.getY());
}
}

Kondisi if diatas digunakan apakah tombol yang diklik mouse adalah tombol sebelah kanan, jika nilai kembalian method getButton sama dengan nilai BUTTON3 maka benar tombol kanan yang ditekan.

Method show digunakan untuk memunculkan popup menu, parameter pertama diisi dengan Component dimana nantinya popup menu akan ditampilkan, sedangkan parameter kedua dan ketiga diisi dengan letak koordinat popup menu akan ditampilkan.

5. Simpan file ToolbarMenu.java, compile dan jalankan. Kemudian coba munculkan popup menu dengan mengklik kanan JFrame. Popup menu sangat berguna jika aplikasi yang kita kembangkan membutuhkan interaksi yang intensif dengan user. Popup menu menyediakan cara mudah untuk mengakses menu/action yang sesuai dengan konteks dari aplikasi.

Membuat Toolbar
Toolbar memberikan dimensi lain dalam mengakses menu dbandingkan menu ataupun popup menu. Pada umumnya Toolbar merupakan cara singkat untuk mengakses menu. Menu yang diwakili toolbar adalah menu yang bersifat umum dan tidak terikat pada konteks tertentu.

Kegunaan lain dari toolbar adalah mempercantik tampilan aplikasi,
karena toolbar biasanya adalah tombol yang didekorasi dengan icon yang menarik. Selain itu toolbar juga memberikan kesempatan kepada user untuk mengkustomisasi tampilan dari aplikasi. Karena layout toolbar sangat fleksibel, user bisa memindah-mindahkan letak toolbar di dalam aplikasi, di atas, dibawah atau disamping, atau bahkan mengambang (floating) diatas jendela yang sedang aktif.

Dalam contoh program diatas kita akan membuat sebuah JToolBar dengan dua buah JButton yang telah didekorasi dengan icon cantik. Icon yang digunakan banyak tersedia di internet, format file yang dipilih adalah .png, karena format file ini paling bagus dalam menangani transparasi komponen.

Sebelum mulai membuat JToolBar, kita perlu mempersiapkan terlebih dahulu icon yang akan digunakan sebagai dekorasi JButton. Ikuti langkah-langkah berikut ini :

1. Buatlah sebuah java package baru untuk menampung semua icon yang akan digunakan. caranya klik kanan di jendela Projects bagian nama project, pilih menu :

New > Java Package

Beri nama images untuk java package yang baru saja kita buka.

2. Memasukkan Icon ke dalam package. Untuk memasukkan image ke dalam package kita perlu tahu dimana project disimpan, misalkan project disimpan dalam folder :

c:\javaswing

Buka file explorer, kemudian navigasi ke folder

c:\javaswing\src\images

Copy semua icon yang diperlukan ke dalam folder diatas.

3. Build project. Langkah ini diperlukan untuk mengcompile semua file .java menjadi file .class. Selain itu proses ini juga akan mengkopi file selain file .java (termasuk file icon) ke dalam folder build\classes. Jika proses ini tidak dilaksanakan, maka ketika program dijalankan, file icon tidak akan ditemukan dan program menjadi error .

Setelah proses persiapan selesai, lakukan langkah-langkah berikut ini untuk membuat Toolbar :

1. Buka class ToolbarMenu.java yang sudah dibuat di langkah sebelumnya.

2. Buat sebuah object JToolBar, caranya : klik item JToolBar dari Jendela Pallete, kemudian klik JFrame di Jendela Design. Secara otomatis sebuah object JToolBar akan dimasukkan ke dalam JFrame. Ganti namanya menjadi toolBar.

3. Menambahkan JButton dalam JToolBar. Klik item JButton dalam Jendela Pallete kemudian klik komponen JToolBar yang baru saja kita buat tadi. JButton baru akan diletakkan diatas JToolBar, ganti nama JButton tersebut menjadi btnNew. Letakkan lagi satu buah JButton diatas JToolBar dan beri nama btnMaximize.

4. Mendekorasi Tampilan JButton. Agar tampilan JButton terlihat cantik, kita perlu mengeset beberapa nilai dari properti JButton, seperti terlihat pada gambar di bawah ini :

 

                 Jendela Properties JButton

a) Text, hapus nilai textnya.

b) Border, pilih bordernya menjadi empty border dan set nilai bordernya menjadi [5,5,5,5]. Tujuan pemberian empty border ini agar tombol berukuran lebih besar dibandingkan dengan icon yang akan digunakan nanti, dan setiap mouse melewati JButton, ada efek transisi yang cantik.

Untuk mengedit border dari JButton, Matisse menyediakan Jendela Border untuk memilih border yang kita inginkan untuk Jbutton. Border yang dipilih bisa single border, atau composite border yang terdiri dari beberapa border.

                                 Jendela Border Editor dari JButton

c) Opaque, uncheck nilai opaque. Bertujuan agar tombolnya berwarna transparan, sehingga mempunyai warna background yang sama dengan background JToolBar.

d) Icon, ganti iconya dengan icon yang telah disiapkan. Untuk memasukkan icon ke dalam JButton, tekan tombol di samping pilihan Icon di dalam Jendela Properties, kemudian akan muncul Dialog Icon Editor seperti di bawah ini :

                                              Jendela icon editor

Pilih radio button Classpath, kemudian tekan tombol Select File dan pilih salah satu icon yang telah disiapkan. Tekan OK. Lakukan langkah-langkah yang sama terhadap JButton yang lain.

5. Compile dan jalankan class ToolbarMenu untuk melihat hasilnya.