Custom Layout Swing Application

Question

My Swing Application contains a JFrame with multiple JPanels inside it. I need to arrange those JPanels in such Layout:

==============================================
|                MenuBar Panel
|=============================================
|             |Header Panel
| JTree Panel |===============================
| having Jtree|Description Panel
|             |===============================
|             |TabbedPane Panel having two JPanels 
|             |named Edit and Results
|             |
|             |
|             |
|             |
|             |

Depending on the selection of JTree node, a different Edit Panel will be printed in TabbedPane. Edit Panel has to be CardLayout because its displaying only one Card at a time. But my question is how do I achieve this layout provided that my application is FullScreen which LayoutManager should I use? If I use GridLayout or BorderLayout, how do I switch between JPanels on Jtree valueChanged()?

Please visit [How to Use Various Layout Managers](http://docs.oracle.com/javase/tutorial/uiswing/layout/layoutlist.html) Try `GridBagLayout` — Braj, Aug 14 '14 at 11:09
Here's a very similar [example](http://stackoverflow.com/a/5630271/261156). — Catalina Island, Aug 14 '14 at 11:14
Use a series of compound layouts, each fulfilling the requirements of the individual area it's responsible for and built these up into the final UI — MadProgrammer, Aug 14 '14 at 11:17
*"how do I switch between JPanels on Jtree valueChanged()?"* Is your `JTree` some kind of tree menu that should switch the "cards" in your CardLayout panel? — dic19, Aug 14 '14 at 12:33

score 1 · Accepted Answer · answered Aug 14 '14 at 14:15

For layouting I can recommend you MigLayout (http://miglayout.com).

It is easier to read and faster to write than the other layout managers.

To achieve your specific layout you could do sth like this:

JPanel panel = new JPanel(new MigLayout());
panel.add(menuBarPanel, "wrap");
panel.add(jTreePanel, "dock west");
panel.add(headerPanel, "wrap");
panel.add(descriptionPanel, "wrap");
panel.add(tabbedPane, "wrap");

This should do the trick for the layout. The rest was answered by dic19!

score 1 · Answer 2 · answered Aug 14 '14 at 16:52

I have created an example with MigLayout. The CardLayout manager is not necessary.

package com.zetcode;

import java.awt.BorderLayout;
import java.awt.EventQueue;
import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JPanel;
import javax.swing.JSplitPane;
import javax.swing.JTabbedPane;
import javax.swing.JTree;
import javax.swing.event.TreeSelectionEvent;
import javax.swing.event.TreeSelectionListener;
import javax.swing.tree.TreePath;
import javax.swing.tree.TreeSelectionModel;
import net.miginfocom.swing.MigLayout;

public class DynamicEditPanel extends JFrame {

    private JPanel editPanel;

    public DynamicEditPanel() {

        initUI();

        setTitle("Dynamic Edit panel");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
    }

    private void initUI() {

        createMenuBar();

        JTree tree = new JTree();
        TreeSelectionModel smod = tree.getSelectionModel();
        smod.setSelectionMode(TreeSelectionModel.SINGLE_TREE_SELECTION);
        smod.addTreeSelectionListener(new MySelectionListener());

        JPanel pnl = new JPanel(new MigLayout("wrap"));

        JSplitPane splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT,
                tree, pnl);

        JTabbedPane tabbedPane = new JTabbedPane(JTabbedPane.TOP);

        editPanel = getPanel("Edit");

        tabbedPane.add("Edit", editPanel);
        tabbedPane.add("Results", getPanel("Results"));

        pnl.add(getPanel("Header"), "w 250, h 100, pushx, growx");
        pnl.add(getPanel("Description"), "w 250, h 100, growx");
        pnl.add(tabbedPane, "grow, pushy");

        add(splitPane);

        pack();
    }

    private void createMenuBar() {

        JMenuBar menubar = new JMenuBar();
        JMenu file = new JMenu("File");
        JMenu edit = new JMenu("Edit");
        menubar.add(file);
        menubar.add(edit);

        setJMenuBar(menubar);        
    }

    private JPanel getPanel(String text) {

        JPanel pnl = new JPanel(new BorderLayout());
        JLabel label = new JLabel(text, JLabel.CENTER);
        pnl.add(label);
        pnl.setBorder(BorderFactory.createEtchedBorder());

        return pnl;
    }

    private class MySelectionListener
            implements TreeSelectionListener {

        @Override
        public void valueChanged(TreeSelectionEvent e) {
            TreeSelectionModel model
                    = (TreeSelectionModel) e.getSource();
            TreePath path = model.getSelectionPath();
            if (path != null) {
                Object item = path.getLastPathComponent();
                editPanel.removeAll();
                editPanel.add(new JLabel(item.toString(), JLabel.CENTER));
                editPanel.doLayout();
                editPanel.repaint();
            }
        }
    }

    public static void main(String[] args) {

        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                DynamicEditPanel ex = new DynamicEditPanel();
                ex.setVisible(true);
            }
        });
    }
}

Clicking on a tree node will create a new label in the Edit panel. The old components are removed with the removeAll() method.

I also implemented a split pane because I assume that this is the expected desing.

Dynamic Edit panel

Custom Layout Swing Application

2 Answers2