MiGLayout will not expand JPanel down

Question

As I am sure some of you are aware, I am attempting to make an alernative tool to Tiled that is open source. I asked before what layout I should use and I was suggest the MiGLayout which I really do love, but don't understand that well at all. I also hope to learn something from this as well. What I would like is someone to explain to me what I did wrong, obviously, and what I need to do to correct this.

Let me first state what works perfect in my eyes, but may not really.

• JFrame
• Menu & Menu Items

Now let me state what I don't like and is not bending to my will.

• JToolBar (There are gaps I don't want, they are circled in red)
• Both JPanels (The width it prefect, but they are not filling to the height)

My question is what can I do to fix this and how can I make the miglayout adjust so that when the toolbar is moved it doesn't make the layout fall to pieces?

Here is my code:

package main;

import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyEvent;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JPanel;
import javax.swing.JToolBar;
import javax.swing.KeyStroke;

import net.miginfocom.swing.MigLayout;

public class GUI extends JFrame {

    // Window Vars //
    String title;
    int width;
    int height;

    // Mid Level componets //
    JMenuBar menuBar;
    JMenu file;
    JToolBar toolBar;
    JPanel map;
    JPanel sideBar;

    // Low Level componets //
    JMenuItem exit;

    JButton select;

    public GUI(String title, int width, int height) {
        this.title = title;
        this.width = width;
        this.height = height;
        this.makeInterface();
    }

    public void makeInterface() {
        // Setup JFrame
        this.setTitle(title);
        this.setSize(width, height);
        this.setLocationRelativeTo(null);
        this.setMinimumSize(new Dimension(700, 500));
        this.setVisible(true);

        this.setLayout(new MigLayout(
                "debug, fillx, gap unrel rel",  // Layout
                "[grow, fill][fill]",         // Column
                "[fill][fill]"));       // Row
        this.makeMenu();
        this.addToolBars();
        this.makePanels();
        this.setupActionListeners();
    }

    public void makeMenu() {
        this.menuBar = new JMenuBar();
        this.file = new JMenu("File");
        this.file.setMnemonic(KeyEvent.VK_F);
        this.menuBar.add(file);

        this.exit = new JMenuItem("Exit", KeyEvent.VK_E);
        this.exit.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_E, ActionEvent.ALT_MASK));
        this.file.add(exit);

        this.setJMenuBar(this.menuBar);
    }

    public void addToolBars() {
        this.toolBar = new JToolBar("Draggable");
        this.addToolBarButtons();
        this.add(toolBar, "span, height 20:35:50, wrap");
    }

    public void addToolBarButtons() {
        this.select = new JButton("Select");
        this.toolBar.add(select);
    }

    public void makePanels() {
        this.map = new JPanel();
        this.sideBar = new JPanel();

        this.add(map, "width 400:600:, flowy, growy");
        this.add(sideBar, "width 250:300:350, flowy, growy");
    }

    public void setupActionListeners() {
        this.exit.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                System.exit(0);
            }
        });
    }
}

Answer 1

Needed to set the sidebar and map area in the area by using the docking feature.

For example I did as follows:

this.setLayout(new MigLayout(
    "fill",  // Layout
    "",         // Column
    ""));       // Row
this.add(map, "width 400:600:, dock center, growy");
this.add(sideBar, "width 250:300:350, dock east, growy");

This got rid of gaps and expanded everything as needed.