MigLayout alignment

Question

I want try to use miglayout because it is more flexible. I try to add date and some button, but after i use wrap, the gap between the button is inventory and transaction become far but between transaction button and add item button is ok.

This is my code:

    top = new JPanel();
    top.setLayout(new MigLayout("","",""));
    center = new JPanel();
    bottom = new JPanel();
    right = new JPanel();
    left = new JPanel();

    inventory = new JButton("Inventory");
    transaction = new JButton("Transaction");
    addItem = new JButton("Add Item");

    date = new Date();
    dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
    dateTime = new JLabel(dateFormat.format(date));

    top.add(dateTime,"wrap");
    dateTime.setBorder(BorderFactory.createLineBorder(Color.red));
    top.add(inventory);
    inventory.setBorder(BorderFactory.createLineBorder(Color.red));
    top.add(transaction);
    transaction.setBorder(BorderFactory.createLineBorder(Color.red));
    top.add(addItem);
    addItem.setBorder(BorderFactory.createLineBorder(Color.red));
    add(top,BorderLayout.NORTH);

Display:

----------------------------------------------
2013/12/09 13.09.15
[Inventory] [Transaction] [Add Item]

Answer 1

Based on your code I've made a SSCCE to easily show your problem. Next time this task is up to you. Note: I've removed the custom borders and the other panels since these are irrelevant to the problem.

import java.awt.BorderLayout;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import net.miginfocom.swing.MigLayout;

public class Demo {    

    private void initGUI() {        
        JPanel top = new JPanel();
        top.setLayout(new MigLayout("","",""));

        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
        JLabel dateTime = new JLabel(dateFormat.format(new Date()));

        top.add(dateTime, "wrap");
        top.add(new JButton("Inventory"));
        top.add(new JButton("Transaction"));
        top.add(new JButton("Add Item"));

        JFrame frame = new JFrame("Demo");
        frame.add(top,BorderLayout.NORTH);        
        frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }

    public static void main(String[] args) {        
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                new Demo().initGUI();
            }
        });
    }
}

Currently your top panel looks like this:

There are several ways to achieve your goal, you just need to play around with constraints. For instance you can do as follows:

top.add(dateTime, "wrap");
top.add(new JButton("Inventory"), "split 3"); // split the column in 3 cells here
top.add(new JButton("Transaction"));
top.add(new JButton("Add Item"));

And you'll see something like this:

Or you can define 3 columns and span 3 cells in the first row, as follows:

JPanel top = new JPanel();
top.setLayout(new MigLayout("","[][][]")); // Use column constraints here
...
top.add(dateTime, "span 3, wrap"); // span 3 cells and then wrap
top.add(new JButton("Inventory"));
top.add(new JButton("Transaction"));
top.add(new JButton("Add Item"));

The outcome would be similar to the previous one.

For further information take a look to Quick Start guide