Layout management issues with Miglayout

Question

I’m having trouble managing the layout of a Jframe that is a test.

How are you:

How I wish it were:

import java.awt.Color;
import java.awt.GridLayout;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

import net.miginfocom.swing.MigLayout;

public class TesteMigImagem {

    public TesteMigImagem() {
        JFrame frame = new JFrame();
        frame.setLayout(new GridLayout(1,1));

        JPanel panel = new JPanel(new MigLayout());
        JPanel imagem = new JPanel();
        imagem.setBackground(Color.red);


        panel.add(new JLabel("Codigo"));
        panel.add(new JTextField(), "width 100%, wrap");
        panel.add(new JLabel("Nome"));
        panel.add(new JTextField(),"split, grow x");
        panel.add(imagem, "width :100:, height :100:, spany 2, wrap");
        panel.add(new JLabel("Endreço"));
        panel.add(new JTextField(), "grow x, split");

        panel.add(new JLabel("Numero"));
        panel.add(new JTextField(), "grow x");

        frame.add(panel);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300, 300);
        frame.setVisible(true);
    }

    public static void main(String args[]) {
        new TesteMigImagem();
    }
}

Answer 1

I cannot validate this solution now, but according to the example of the section Merging and Splitting Cells of Guide to the Miglayout (page 2), to make a "col span", change the line:

panel.add(imagem, "width :100:, height :100:, spany 2, wrap");

To:

panel.add(imagem, "width :100:, height :100:, span 1 2, wrap");

This should tell Miglayout to "do span" in a column and two rows. The command spany there is no.

Anyway, as I said, I have no way to test this and perhaps a few more adjustments will be necessary, but this is the way.

---

Updating

I bought a little time and made some changes that bring the layout closer to the desired, but still need to adjust the widths:

public class MigLayoutTest {
 public MigLayoutTest() {
     JFrame frame = new JFrame();
     frame.setLayout(new GridLayout(1,1));
  JPanel panel = new JPanel( new MigLayout() );
     JPanel imagem = new JPanel();
     imagem.setBackground(Color.red);

     panel.add(new JLabel("Codigo"));
  panel.add( new JTextField() , "width 100%, span 4, wrap" );
     panel.add(new JLabel("Nome"));
  panel.add( new JTextField() , "grow x, width :100:, span 3" );
  panel.add( imagem , "width :100:, height :100:, span 1 2, wrap" );
  panel.add( new JLabel( "Endreço" ) );
  panel.add( new JTextField() , "grow x, width :100: " );
  panel.add( new JLabel( "Numero" ) );
  panel.add( new JTextField() , "grow x, width :100:" );
     frame.add(panel);
     frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
     frame.setSize(300, 300);
     frame.setVisible(true);
 }
 public static void main(String args[]) {
     new MigLayoutTest();
 }
}

The secret is to understand that Miglayout works like a table. In the first row I define 5 "imaginary columns" when adding the label and a field with span 4.

Then, just add the other components thinking about how they will look in this table.