TextField size and vertical align

Question

I use MigLayout on a DialogBox.

Every panel uses MigLayout.

There is a panel for the show row. There is a panel for every column (delivery type, choose element, Sortie). There is a panel for the output file row. There is a panel for button.

Maybe there is a better way to do it wihout too much panels?

My code

//set global layout
this.setLayout( new MigLayout( "wrap 3, debug" ) );

this.add( getSearchPanel(), "span 3, wrap" );

// middle section
this.add( getLivraison(), "width 33%" );
this.add( getChoixElement(), "width 33%" );
this.add( getProfile(), "width 33%" );

JLabel lblFichierSortie = new JLabel( "Output file" );
JTextField txtFichierSortie = new JTextField();
this.add( lblFichierSortie, "span 2, right" );
this.add( txtFichierSortie, "width 33%, wrap" );

this.add( getButton(), "span 3, right" );

private JPanel getSearchPanel() {
    JPanel searchPanel = new JPanel( new MigLayout() );

    JLabel lblEmission = new JLabel( "Show" );
    JTextField txtEmission = new JTextField( 10 );
    JTextField txtEM = new JTextField( 5 );

    searchPanel.add( lblEmission, "width 2%" );
    searchPanel.add( txtEmission, "split 2,right,width 60%, growx" );
    searchPanel.add( txtEM, "width 38%, growx" );

    return searchPanel;
}

private JPanel getLivraison() {
    JPanel livraisonPanel = new JPanel( new MigLayout() );
    JLabel lblComponent1 = new JLabel( "Delivery type" );
    JCheckBox chkFluxElementaire = new JCheckBox( "Flux" );
    JCheckBox chkTranscoding = new JCheckBox( "Transcoding" );

    livraisonPanel.add( lblComponent1, "wrap" );
    livraisonPanel.add( chkFluxElementaire, "wrap" );
    livraisonPanel.add( chkTranscoding, "wrap" );

    return livraisonPanel;
}

private JPanel getChoixElement() {
    JPanel component2 = new JPanel( new MigLayout() );
    JLabel lblChoix = new JLabel( "Choose element" );
    JLabel lblVideo = new JLabel( "Vidéo" );


    JLabel lblAudio = new JLabel( "Audio" );
    JLabel lblAudio2 = new JLabel( "Audio 2" );
    JLabel lblSubTitle = new JLabel( "ST" );
    JLabel lblMontage = new JLabel( "Montage" );

    //todo put combobox below every label
    component2.add( lblChoix, "wrap" );
    component2.add( lblVideo,"wrap" );
    component2.add( lblAudio,"wrap" );
    component2.add( lblAudio2, "wrap" );
    component2.add( lblSubTitle, "wrap" );
    component2.add( lblMontage, "wrap" );

    return component2;
}

private JPanel getProfile() {
    JPanel component3 = new JPanel( new MigLayout() );
    JLabel lblSortie = new JLabel( "Sortie" );
    component3.add( lblSortie, "wrap" );

    JLabel lblProfil = new JLabel( "Profil" );
    component3.add( lblProfil, "wrap" );

    JComboBox cbxProfil = new JComboBox();
    component3.add( cbxProfil, "wrap" );

    return component3;
}

private JPanel getButton() {
    JPanel buttonPanel = new JPanel( new MigLayout( "fillx,insets 0" ) );

    JButton okButton = new JButton( "Ok" );
    okButton.setMnemonic( 'O' );
    buttonPanel.add( okButton, "split,right,width 100!" );

    // Cancel button
    JButton cancelButton = new JButton( "Cancel" );
    cancelButton.setMnemonic( 'C' );

    buttonPanel.add( cancelButton, "width 100!" );
    return buttonPanel;
}

My textfield has no size until I move my windows, i don't understand why. Also why are'nt the components of every column starting at the top of the panels?

Answer 1

Try this for the "top alignment problem" :

// set global layout
this.setLayout(new MigLayout("wrap 3, debug", null, "[top]"));

and for "the texfield size problem" :

this.add(getSearchPanel(), "span 3, wrap, grow");

If you want to have the same result without an inner JPanel, you can do :

final JLabel lblEmission = new JLabel("Show");
final JTextField txtEmission = new JTextField(10);
final JTextField txtEM = new JTextField(5);

this.add(lblEmission, "width 2%, span 3, split 3");
this.add(txtEmission, "right,width 60%, growx");
this.add(txtEM, "width 38%, growx");

However, this is not my favorite solution. With an inner panel the code is much more simple and reusable. I think when you will add some listeners for user interaction on the component s and controllers for the interactions with the model, this code will be over-complicated. When this will occurs, you may want to extract the SearchPanel into a reusable top-level class with a single responsability. Without a simple inner panel, it will be much more difficult to extract this class.

This is why when i design swing gui, i prefer to use first the BorderLayout and then the MigLayout (for more complex panel).