Life, Contribute!!

Beberapa waktu lalu ada memeber dari JUGI menanyakan cara membuat layout aplikasi Swing dengan tampilan mirip Windows explorer, dimana di sisi kiri ada menu dalam bentuk tree, kemudian di sisi kanan ada main panel dimana panel2 yang diwakili oleh menu disebelah kiri akan ditampilkan.

JFrame adalah top level Container jadi harus sedikit hati2 menggunakannya, nggak sebebas menggunakan JPanel, best practicenya adalah : bikin sebuah Class utama, misalkan namanya MainPanel.java, nah class ini extends JPanel, kemudian dalam MainPanel harus implement BorderLayout agar panel didalamnya nanti bisa memenuhi halaman, kemudian di dalam MainPanel hanya ada satu componen yaitu JSplitPane, di JSplitPane sebelah kiri ada JTree dan di sebelah kanan ada JPanel yang menggunakan CardLayout.

Dari sini udah ada beberapa component

JFrame
Didalamnya Cuma ada 1 componen yaitu MainPanel

LeftPanel extends JPanel implements TreeSelectionListener

• digunakan untuk mendengarkan event pemilihan Node-nya JTree => tree.addTreeSelectionListener(this)
  
• implements BorderLayout => setLayout(new BorderLayout())
  
• didalamnya hanya ada satu componen yaitu Jsplitpane
  

JSplitPane

JTree

ContentPanel extends JPanel

• Digunakan sebagai kontainer dari panel sebelah kanan, dimana semua panel2 yang diwakili oleh node dalam Jtree diletakkan, ketika sebuah node diklik, maka panel yang diwakili ditampilkan.
  
• Menggunakan CardLayout sebagai layoutmanagernya
  

Case Studi

Misalnya untuk membuat sebuah JTree yang terdiri dari 2 table, shaya bikinin contoh classnya. dibuat pake Netbeans 5.5, JDK 1.5.0_09, hand made, jadi kalo ga bisa dibuka pake Netbeans-Matisse ya maklum aje.. :D

/*

 * @Author IBima

 * Created on Dec 11, 2006

 *

 */

import java.awt.BorderLayout;

import java.awt.CardLayout;

import javax.swing.JFrame;

import javax.swing.JPanel;

import javax.swing.JScrollPane;

import javax.swing.JSplitPane;

import javax.swing.JTable;

import javax.swing.JTree;

import javax.swing.SwingUtilities;

import javax.swing.event.TreeSelectionEvent;

import javax.swing.event.TreeSelectionListener;

import javax.swing.table.AbstractTableModel;

import javax.swing.tree.DefaultMutableTreeNode;

import javax.swing.tree.DefaultTreeModel;

public class BasicPanel extends JPanel implements TreeSelectionListener{

    private JFrame frame;

    private JPanel rightPanel;

    private CardLayout cardLayout;

    private JTable table1,table2;

    private JScrollPane scrollPane1,scrollPane2;

    private JTree tree;

    private JSplitPane splitPane;

    public BasicPanel() {

        initComponent();

    }

    private void initComponent() {

        //inisialiasai JTree

        initTree();

        table1 = new JTable(new SimpleTableModel());

        table2 = new JTable(new SimpleTableModel2());

        scrollPane1 = new JScrollPane();

        scrollPane2 = new JScrollPane();

        cardLayout = new CardLayout();

        rightPanel = new JPanel(cardLayout);

        //memasukkan table1 & 2 ke scrollpanel yang bersesuaian

        scrollPane1.setViewportView(table1);

        scrollPane1.validate();

        scrollPane2.setViewportView(table2);

        scrollPane2.validate();

        //memasukkan scrollpane ke cardlayout

        rightPanel.add(scrollPane1,"Table1");

        rightPanel.add(scrollPane2,"Table2");

//        cardLayout.addLayoutComponent(scrollPane1, "Table1");

//        cardLayout.addLayoutComponent(scrollPane2, "Table2");

        //tampilannya JFrame byar keren heheheh

        JFrame.setDefaultLookAndFeelDecorated(true);

        //inisialisasi splitpane

        splitPane = new JSplitPane();

        splitPane.setDividerLocation(300);

        splitPane.setOneTouchExpandable(true);

        //memasukkan tree ke sebelah kiri splitpane

        splitPane.setLeftComponent(tree);

        //memasukkan rightpanel ke sebelah kanan splitpane

        splitPane.setRightComponent(rightPanel);

        this.setLayout(new BorderLayout());

        this.add(splitPane,BorderLayout.CENTER);

        //byar tampilan Framenya keren bow... :D

        JFrame.setDefaultLookAndFeelDecorated(true);

        frame = new JFrame("Basic Panel layout in Swing Application");

        //memasukkan panel ini ke JFrame

        frame.getContentPane().add(this);

        //byar pas nongol framenya di Maximized

        frame.setExtendedState(JFrame.MAXIMIZED_BOTH);

        frame.setSize(800, 600);

        frame.setVisible(true);

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //menampilkan table1 di sebelah kanan

        tree.setSelectionRow(1);

    }

    private void initTree() {

        DefaultMutableTreeNode root = new DefaultMutableTreeNode("Root");

        DefaultMutableTreeNode table1 = new DefaultMutableTreeNode("Table1");

        DefaultMutableTreeNode table2 = new DefaultMutableTreeNode("Table2");

        root.add(table1);

        root.add(table2);

        //memasukkan root dan anak2nya ke dalam JTree

        tree = new JTree(new DefaultTreeModel(root));

        //mendaftarkan panel ini (this) sebagai JTree listener 

        tree.addTreeSelectionListener(this);

        //untuk pertama select table1

    }

    /**

     * method implement dari interface TreeSelectionListener

     * method ini akan dipanggil jika ada node dari JTree yang diklik

     */

    public void valueChanged(TreeSelectionEvent e) {

        DefaultMutableTreeNode nodeSelected = (DefaultMutableTreeNode) tree.getLastSelectedPathComponent();

        String str = (String) nodeSelected.getUserObject();

        if(str.equals("Table1")) {

            cardLayout.show(rightPanel, "Table1");

        } else 

            cardLayout.show(rightPanel, "Table2");

    }

    public static void main(String[] args) {

        SwingUtilities.invokeLater(

                new Runnable() {

                    public void run() {

                        new BasicPanel();

                    }

                }

        );

    }

}

class SimpleTableModel extends AbstractTableModel{

    @Override

    public String getColumnName(int column) {

        // TODO Auto-generated method stub

        return "Kolom ke -" + column;

    }

    public int getColumnCount() {

        return 5;

    }

    public int getRowCount() {

        // TODO Auto-generated method stub

        return 5;

    }

    public Object getValueAt(int rowIndex, int columnIndex) {

        // TODO Auto-generated method stub

        return rowIndex*columnIndex;

    }

    @Override

    public boolean isCellEditable(int rowIndex, int columnIndex) {

        // TODO Auto-generated method stub

        return true;

    }

}

class SimpleTableModel2 extends AbstractTableModel{

    @Override

    public String getColumnName(int column) {

        // TODO Auto-generated method stub

        return "Kolom ke -" + column;

    }

    public int getColumnCount() {

        return 5;

    }

    public int getRowCount() {

        // TODO Auto-generated method stub

        return 5;

    }

    public Object getValueAt(int rowIndex, int columnIndex) {

        // TODO Auto-generated method stub

        return rowIndex*columnIndex + System.currentTimeMillis();

    }

    @Override

    public boolean isCellEditable(int rowIndex, int columnIndex) {

        // TODO Auto-generated method stub

        return true;

    }    

}

nantinya seperti ini tampilanya :

semoga membantu,

regards