Thursday, April 30, 2009

Membuat MenuBar Ala Windows Vista - Vista Style MenuBar


Sejak dirilisnya Windows Vista, terdapat banyak perubahan tampilan pada aplikasi yang berjalan padanya, berbeda dengan pada Sistem Operasi sebelumnya. Misalnya pada MS Office 2007, Paint dan sebagainya berubah dari segi tampilan menubarnya. Jika biasanya menubar berbentuk drop-dwon atau diklik kemudian muncul menu di bawahnya, akan tetapi untuk vista style, menubar berbentuk tab.

Tampilan model begini pun diikuti berbagai aplikasi yang lain dan sudah menjadi trend. Misalnya MindManager, NetOP dan Nitro PDF kesemuanya mengikuti gaya menubar yang sama.

Untuk membuat tampilan seperti itu pada aplikasi Java cukup mudah. Anda dapat menggunakan kelas javax.swing.JTabbedPane yang diletakkan dengan layout java.awt.BorderLayout.NORTH.

Untuk membuatnya, ikuti langkah berikut:
  1. Buat objek dari kelas javax.swing.JTabbedPane sebagai pengganti dari kelas javax.swing.JMenuBar
  2. Buat objek dari kelas javax.swing.JButton sebagai pengganti dari kelas javax.swing.JMenuItem
  3. Masukkan semua sub menu pada kelas javax.swing.JPanel
  4. Masukkan setiap objek dari kelas javax.swing.JPanel ke kelas javax.swing.JTabbedPane
  5. Tempelkan objek dari kelas javax.swing.JTabbedPane ke Frame utama dengan layout java.awt.BorderLayout.NOTH
  6. Selesai
Kode selengkapnya adalah sebagai berikut:


package umar.faisol.vistastyle;

import javax.swing.JFrame;
import javax.swing.WindowConstants;
import javax.swing.JButton;
import javax.swing.JPanel;
import javax.swing.ImageIcon;
import javax.swing.JTabbedPane;
import javax.swing.BorderFactory;

import java.awt.BorderLayout;
import java.awt.FlowLayout;
import java.awt.Color;

public class MainForm extends JFrame
{
    public MainForm()
    {
        super("Vista Style");
        setSize(400, 350);
        setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
        
        getContentPane().setLayout(new BorderLayout());
        getContentPane().add(menuVista(), BorderLayout.NORTH);
        getContentPane().add(tampilan(), BorderLayout.CENTER);
    }
    
    private JTabbedPane menuVista()
    {
        JTabbedPane tabbedPane = new JTabbedPane();
        
        tabbedPane.addTab("File", menuFile());
        tabbedPane.addTab("Edit", menuEdit());
        
        return (tabbedPane);
    }
    
    private JPanel menuFile()
    {
        JPanel panel = new JPanel(new FlowLayout(FlowLayout.LEFT));
        
        ImageIcon baru = new ImageIcon("../gambar/baru.png");
        ImageIcon simpan = new ImageIcon("../gambar/simpan.png");
        ImageIcon keluar = new ImageIcon("../gambar/keluar.png");
        
        panel.add(new JButton("Baru", baru));
        panel.add(new JButton("Simpan", simpan));
        panel.add(new JButton("Keluar", keluar));
        
        return (panel);
    }
    
    private JPanel menuEdit()
    {
        JPanel panel = new JPanel(new FlowLayout(FlowLayout.LEFT));
        
        ImageIcon cari = new ImageIcon("../gambar/cari.png");
        ImageIcon atur = new ImageIcon("../gambar/atur.png");
        
        panel.add(new JButton("Cari", cari));
        panel.add(new JButton("Atur", atur));
        
        return (panel);
    }
    
    private JPanel tampilan()
    {
        JPanel panel = new JPanel();
        panel.setBorder(BorderFactory.createTitledBorder(BorderFactory.createLineBorder(Color.BLUE), "Tampilan Utama"));
        
        return (panel);
    }
}


Jika dijalankan, tampilannya adalah sebagai berikut:


Cukup mudah bukan???
Source code lengkap dapat didownload di sini.