Membuat Menu Accordion dengan Java Swing

1359672059_eclipse
Selamat malam teman – teman 🙂 .Pada kesempatan posting kali ini akan saya bahas membuat menu accordion.Menu accordion biasanya digunakan di web untuk pilihan menu.Untuk membuat menu accordion cukup menggunakan komponen JCheckBox dan JButton Java.Mudah bukan? 🙂 .Pada tutorial kali ini saya menggunakan WindowBuilder Eclipse.
Ok langsung saja kita mulai.

Buat JFrame dengan menggunakan WindowBuilder
Selection_001
Kemudian untuk layoutnya,gunakan Absolute Layout.Drag and drop Absolute Layout ke dalam JFrame
Selection_001
Langkah selanjutnya masukkan JPanel ke dalam JFrame
cc2
Kemudian atur ukuran JPanel agar menjadi seperti berikut
Selection_002
Agar komponen JCheckBox dan JButton dapat masuk ke dalam JPanel.Masukkan Absolute Layout ke dalam JPanel.
Kalau sudah masukkan komponen JCheckBox ke dalam JPanel.
cc3
Langkah selanjutnya ganti nama variabel dan text JCheckBox di Properties menjadi seperti berikut ini
cc4
Tempatkan JButton dibawah JCheckBox
cc5

Selection_003

Kemudian buat tampilan seperti berikut ini
Selection_004

Agar JCheckBox memiliki border dan icon, klik Show advanced properties, untuk pengaturan lebih lanjut
cc6

Kemudian beri kedua border checklist agar berubah menjadi true.Pengaturan tersebut berfungsi untuk membuat border pada JCheckBox.
Selection_005

Untuk mengganti Icon,klik pada icon.Lalu masukkan icon sesuai dengan pilihan anda.
Selection_006
Lakukan hal yang sama pada JButton untuk memberikan image icon.
Hasilnya jadi seperti ini
Selection_007
Langkah selanjutnya adalah membuat codenya.Berikut ini codenya

import java.awt.EventQueue;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.border.MatteBorder;
import java.awt.Color;
import javax.swing.JCheckBox;
import javax.swing.JButton;
import javax.swing.ImageIcon;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;

@SuppressWarnings("serial")
public class MenuAccordion extends JFrame {

	private JPanel contentPane;
	private JCheckBox cbMenuUtama;
	private JButton btnPelanggan;
	private JButton btnBarang;
	private JCheckBox ccTransaksi;
	private JButton btnPesan;
	private JButton btnRetur;

	/**
	 * Create the frame.
	 */
	public MenuAccordion() 
	{
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setBounds(100, 100, 725, 519);
		contentPane = new JPanel();
		contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
		setContentPane(contentPane);
		contentPane.setLayout(null);
		
		JPanel panelUtama = new JPanel();
		panelUtama.setBorder(new MatteBorder(1, 1, 1, 1, (Color) new Color(0, 0, 0)));
		panelUtama.setBounds(0, 0, 179, 488);
		contentPane.add(panelUtama);
		panelUtama.setLayout(null);
		
		cbMenuUtama = new JCheckBox("Menu Utama");
		cbMenuUtama.addMouseListener(new MouseAdapter()
		{
			@Override
			public void mouseClicked(MouseEvent me) 
			{
				if(cbMenuUtama.isSelected())
				{
					btnPelanggan.setVisible(true);
					btnBarang.setVisible(true);
				}
				else
				{
					btnPelanggan.setVisible(false);
					btnBarang.setVisible(false);
				}
			}
		});
		cbMenuUtama.setIcon(new ImageIcon("/home/resa/Aplikasi Java/SwingComponents/src/Gambar/menuUtama.png"));
		cbMenuUtama.setBorderPaintedFlat(true);
		cbMenuUtama.setBorderPainted(true);
		cbMenuUtama.setBounds(8, 8, 159, 24);
		panelUtama.add(cbMenuUtama);
		
		btnPelanggan = new JButton("Pelanggan");
		btnPelanggan.setIcon(new ImageIcon("/home/resa/Aplikasi Java/SwingComponents/src/Gambar/menuPelanggan.png"));
		btnPelanggan.setBounds(8, 35, 159, 23);
		btnPelanggan.setVisible(false);
		panelUtama.add(btnPelanggan);
		
		btnBarang = new JButton("Barang");
		btnBarang.setIcon(new ImageIcon("/home/resa/Aplikasi Java/SwingComponents/src/Gambar/menuBarang.png"));
		btnBarang.setBounds(8, 59, 159, 23);
		btnBarang.setVisible(false);
		panelUtama.add(btnBarang);
		
		ccTransaksi = new JCheckBox("Transaksi");
		ccTransaksi.addMouseListener(new MouseAdapter() 
		{
			@Override
			public void mouseClicked(MouseEvent me)
			{
				if(ccTransaksi.isSelected())
				{
					btnPesan.setVisible(true);
					btnRetur.setVisible(true);
				}
				else
				{
					btnPesan.setVisible(false);
					btnRetur.setVisible(false);
				}
			}
		});
		ccTransaksi.setIcon(new ImageIcon("/home/resa/Aplikasi Java/SwingComponents/src/Gambar/menuTransaksi.png"));
		ccTransaksi.setBorderPaintedFlat(true);
		ccTransaksi.setBorderPainted(true);
		ccTransaksi.setBounds(8, 91, 159, 24);
		panelUtama.add(ccTransaksi);
		
		btnPesan = new JButton("Pemesanan");
		btnPesan.setIcon(new ImageIcon("/home/resa/Aplikasi Java/SwingComponents/src/Gambar/menuPemesanan.png"));
		btnPesan.setBounds(8, 117, 159, 23);
		btnPesan.setVisible(false);
		panelUtama.add(btnPesan);
		
		btnRetur = new JButton("Retur");
		btnRetur.setIcon(new ImageIcon("/home/resa/Aplikasi Java/SwingComponents/src/Gambar/menuRetur.png"));
		btnRetur.setBounds(8, 140, 159, 23);
		btnRetur.setVisible(false);
		panelUtama.add(btnRetur);
	} //Akhir Konstruktor
	
	/**
	 * Launch the application.
	 */
	public static void main(String[] ar)
	{
		EventQueue.invokeLater(new Runnable() 
		{
			public void run() 
			{
				try 
				{
					MenuAccordion frame = new MenuAccordion();
					frame.setVisible(true);
				} 
				catch (Exception e) 
				{
					e.printStackTrace();
				}
			}
		});
	}
}

Download Source Code
gist
Download : Menu Accordion Java Swing

Tampilan ketika Menu Utama di klik
Selection_009

Menu Transaksi di klik
Selection_010

Berikut ini video singkat demo menu accordion

Selamat mencoba dan Semoga bermanfaat 🙂