GridBagLayout Question: Irregular Spacing

[Don Gardner]

I am working on a GUI that uses GridBagLayout, and I am having some difficulties getting things laid out the way I want them. The GUI consists of six JTextFields, six JLabels, and two JButtons
I want the two buttons to be half the width of the GUI, and the rest of the GUI laid out as appropriate for the widths of the fields and labels. Unfortunately, one of the JLabels is wider than half the area, and it seems to be defining the grid cell width (the edge of the buttons line up with the edge of the is label). I've tried adding extra cells in the grid, but that doesn't solve the problem.
Attached is a copy of the code that does my GUI layout. The GUI has a few other problems, but they are along the same lines. If anyone can give me a suggestion as to how to fix this problem, I should be able to get the rest of it to work.
Thanks for the help,
Don

import java.awt.* ;
import java.awt.event.* ;
import javax.swing.* ;
public class GridBagTest extends JFrame
{
    private Container container ;
    private GridBagLayout gbLayout ;
    private GridBagConstraints gbConstraints ;
    
    private JTextField filenameField , 
                       heightField , 
                       widthField , 
                       startFrameField , 
                       endFrameField ,
                       timeBetweenFramesField ;
    private JButton chooseFileButton , 
                    runButton ;
    
    private int startFrame = 0 ; // initial frame of animation
    private int endFrame = 0 ; // final frame of animation
    private int height = 256 ; // height of image
    private int width = 256; // width of image
        
    private float timeBetweenFrames = 0.001f ;
        
    public GridBagTest()
    {
        super( "GridBagTest" ) ;
        
        JLabel filenameLabel = new JLabel( "Filename:" ) ,
               heightLabel = new JLabel( "Height:" ) ,
               widthLabel = new JLabel( "  Width:" ) ,
               startFrameLabel = new JLabel( "Start Frame:" ) ,
               endFrameLabel = new JLabel( "End Frame:" ) ,
               timeBetweenFramesLabel = new JLabel( "Time Between Frames:" ) ;
        
        container = getContentPane() ;
        gbLayout = new GridBagLayout() ;
        container.setLayout( gbLayout ) ;
        
        gbConstraints = new GridBagConstraints() ; 
        
        filenameField = new JTextField( "images.dat" ) ;
        
        heightField = new JTextField( String.valueOf( height ) , 4 ) ;
        heightField.setHorizontalAlignment( JTextField.RIGHT ) ;
        widthField = new JTextField( String.valueOf( width ) , 4 ) ;
        widthField.setHorizontalAlignment( JTextField.RIGHT ) ;
        
        startFrameField = new JTextField( String.valueOf( startFrame ) , 5 ) ;
        startFrameField.setHorizontalAlignment( JTextField.RIGHT ) ;
        endFrameField = new JTextField( String.valueOf( endFrame ) , 5 ) ;
        endFrameField.setHorizontalAlignment( JTextField.RIGHT ) ;
        timeBetweenFramesField = new JTextField( String.valueOf( timeBetweenFrames ) , 8 ) ;
        timeBetweenFramesField.setHorizontalAlignment( JTextField.RIGHT ) ;
        filenameLabel.setLabelFor( filenameField ) ;
        heightLabel.setLabelFor( heightField ) ;
        widthLabel.setLabelFor( widthField ) ;
        startFrameLabel.setLabelFor( startFrameField ) ;
        endFrameLabel.setLabelFor( endFrameField ) ;
        timeBetweenFramesLabel.setLabelFor( endFrameField ) ;
        
        chooseFileButton = new JButton( "Choose File" ) ;
        
        runButton = new JButton( "Run" ) ; 
        gbConstraints.anchor = GridBagConstraints.EAST ; 
        gbConstraints.insets = new Insets( 0 , 3 , 0 , 3 ) ; 
        
        addComponent( heightField , 1 , 3 , 2 , 1 ) ;
        addComponent( widthField , 1 , 8 , 2 , 1 ) ;
        addComponent( startFrameField , 2 , 4 , 6 , 1 ) ;
        addComponent( endFrameField , 3 , 4 , 6 , 1 ) ;
        addComponent( timeBetweenFramesField , 4 , 6 , 4 , 1 ) ;
        
        gbConstraints.weightx = 1 ;
        gbConstraints.weighty = 1 ;
        gbConstraints.anchor = GridBagConstraints.CENTER ; 
        gbConstraints.fill = GridBagConstraints.HORIZONTAL ;
        
        addComponent( filenameLabel , 0 , 0 , 2 , 1 ) ;
        addComponent( filenameField , 0 , 2 , 8 , 1 ) ;
        addComponent( heightLabel , 1 , 0 , 3 , 1 ) ;
        addComponent( widthLabel , 1 , 5 , 3 , 1 ) ;
        addComponent( startFrameLabel , 2 , 0 , 5 , 1 ) ;
        addComponent( endFrameLabel , 3 , 0 , 5, 1 ) ;
        addComponent( timeBetweenFramesLabel , 4 , 0 , 6, 1 ) ;
        addComponent( chooseFileButton , 5 , 0 , 5 , 1 ) ;
        addComponent( runButton , 5 , 5 , 5 , 1 ) ;
        
        pack() ;
        show() ;
    }
    
    private void addComponent( Component c , int row , int column , int width , int height )
    {
        // set gridx and gridy
        gbConstraints.gridx = column ;
        gbConstraints.gridy = row ;
        
        // set gridheight and gridwidth
        gbConstraints.gridwidth = width ;
        gbConstraints.gridheight = height ;
        
        gbLayout.setConstraints( c , gbConstraints ) ; // set contraints
        
        container.add( c ) ; // add component
    }    
    public static void main( String args[] )
    {       
        GridBagTest app = new GridBagTest() ;
        
        app.addWindowListener(
            new WindowAdapter()
            {
                public void windowClosing( WindowEvent e )
                {
                    System.exit( 0 ) ;
                }
            }   
        );
    }
}

[Chantal Ackermann]

hi,
you did a really good job with the two buttons. They are of quite the same size, even if the window is resized.
If you want them really independent of the GridBagLayout you should place them in their own panel and use another layout that will provide you some mean to make them equally sized. That might be BoxLayout or GridLayout.
What I just thought was: Why don't you place the "Choose File" Button behind the textfield displaying the file, reducing the button text to ("Choose" or "Browse" or even "..."). That is quite a common view in guis. you could separate the row containing the file choosing stuff from the rest of the text fields and place the run button equally separated in the lower right corner. Just a suggestion!!

[Don Gardner]

Thanks for the complement! I've worked hard on it, but it just not quite the way I want it.
If you look at it, you will notice that the leading edge of heightField and filenameField line up, and the trailing edge of heightField and chooseFileButton line up. As a result, widthLabel is too narrow (I would like it to be the same width as heightLabel), and chooseFileButton is too wide (just a little bit).
I've thought about putting each line in it's own panel, but I would rather not do that unless there is no other way. My gut feeling is that GridBagLayout should be capable of doing what I want it to do, but that I don't have my GridBagConstraints set correctly, or something else. I wouldn't think that moving to a different layout scheme would help becuase GridBagLayout is the most powerful layout scheme (so I've heard), so I would think the other scheme would be more limited.
I originally had the chooseFileButton onthe same line as the filenameField, but I moved it because I thought it was too crowded, and I wanted to collect the buttons together. I think I might do as you suggested and replace "Choose File" with "...", and put it all on the same line again. That way I will be able to add some other button on the bottom.
Thanks again for the complement, and thanks for the advice,
Don

[Chantal Ackermann]

I see what you mean. Actually, I suspect that GridBagLayout isn't meant to handle the things this way. What you want to do is, make the components equally sized, indepent of their actual sizes. GridLayout works that way, but using this again, cells can't span more than one row/column but all cells are of the same width/height.
GridBagLayout provides a more "content-oriented" layout. you just say which components shall align and where things can expand and where not in case the frame gets resized. you don't want to specify any exact sizes: GridBagLayout should handle that if it's configured in the right way.
What I found very usefull is: with GridBagLayout you can create forms very dynamically without bothering much with the single components. You can add rows and columns just by incrementing the gridx and gridy value.
Maybe you are interested in how I would code it:

public class GridBagTest extends JFrame
{
/**
 *  Constructor for the GridBagTest object
 */
public GridBagTest()
{
super( "GridBagTest" );
final Container container = getContentPane();
container.setLayout( new GridBagLayout() );
GridBagConstraints c = new GridBagConstraints();
c.gridx = 0;
c.gridy = 0;
c.fill = c.BOTH;
c.anchor = c.NORTHWEST;
c.insets = new Insets(5,5,5,5);
container.add( new JLabel( "Filename:" ), c);
c.gridx = 1;
c.weightx = 1;
c.gridwidth = 2;
final JTextField filenameField = new JTextField( "images.dat" );
container.add(filenameField, c);
c.gridx = 3;
c.weightx = 0;
c.gridwidth = 1;
container.add(new JButton("..."), c);
c.gridx = 0;
c.gridy++;
c.weighty = 1;
container.add(new JPanel(), c);
c.gridx = 0;
c.gridy++;
c.weighty = 0;
c.gridwidth = 2;
c.fill = c.HORIZONTAL;
container.add( new JLabel( "Height:" ), c);
c.gridx = 2;
final JTextField heightField = new JTextField( String.valueOf( height ), 4 );
heightField.setHorizontalAlignment( JTextField.RIGHT );
container.add(heightField, c);
c.gridx = 0;
c.gridy++;
container.add(new JLabel( "Width:" ), c);
c.gridx = 2;
final JTextField widthField = new JTextField( String.valueOf( width ), 4 );
widthField.setHorizontalAlignment( JTextField.RIGHT );
container.add(widthField, c);
c.gridx = 0;
c.gridy++;
container.add(new JLabel( "Start Frame:" ), c);
c.gridx = 2;
final JTextField startFrameField = new JTextField( String.valueOf( startFrame ), 5 );
startFrameField.setHorizontalAlignment( JTextField.RIGHT );
container.add(startFrameField, c);
c.gridx = 0;
c.gridy++;
container.add(new JLabel( "End Frame:" ), c);
c.gridx = 2;
final JTextField endFrameField = new JTextField( String.valueOf( endFrame ), 5 );
endFrameField.setHorizontalAlignment( JTextField.RIGHT );
container.add(endFrameField, c);
c.gridx = 0;
c.gridy++;
container.add(new JLabel( "Time Between Frames:" ), c);
c.gridx = 2;
final JTextField timeBetweenFramesField = new JTextField( String.valueOf( timeBetweenFrames ), 8 );
timeBetweenFramesField.setHorizontalAlignment( JTextField.RIGHT );
container.add(timeBetweenFramesField, c);
c.gridx = 0;
c.gridy++;
c.weighty = 1;
container.add(new JPanel(), c);
c.gridx = 0;
c.gridy++;
c.gridwidth = 4;
c.fill = c.NONE;
c.anchor = c.SOUTHEAST;
c.weightx = 1;
c.weighty = 1;
final JButton runButton = new JButton( "Run" );
container.add(runButton, c);
pack();
setVisible(true);
}

/**
 *  Description of the Method
 *
 * @param  args  Description of Parameter
 */
public static void main( String args[] )
{
GridBagTest app = new GridBagTest();
app.addWindowListener(
new WindowAdapter()
{
public void windowClosing( WindowEvent e )
{
System.exit( 0 );
}
}
 );
}
private int startFrame = 0;
// initial frame of animation
private int endFrame = 0;
// final frame of animation
private int height = 256;
// height of image
private int width = 256;
// width of image
private float timeBetweenFrames = 0.001f;
}

I like the way you set the components in your layout but I think it did cost you much work and if you decide to add more buttons or worse - more textfield and labels with different sizes you might get even more work to adapt the layout.
Even if the textfields are way to big for the values they are meant to display (and that can be changed if the labels get weightx = 1), I prefer to have them all aligned without bothering about the individual size of each of them.
but, that are just ideas - I'm still searching for the ultimate layout.
cheers!

[Don Gardner]

Thanks for the code! I'm always interested in how different people attack the same problem.
You are right, creating and modifying the GUI the way I have done it can be time consuming, and my time would probably be better spent on other parts of the program, but laying out GUIs is fun.
I think the difference between your GUI layout and what I am trying to achieve is mainly philosophical. Both GUIs would work, and neither is difficult for the user to understand. However, I am also trying to satisfy aesthetic (and educational) needs as well as the functional needs. If the GUI was more complicated or I thought I would need to change it often, I might write it differently. As it is, I enjoy the distraction from the rest of the program.
Thanks again,
Don

[Don Gardner]

Well, I resorted to two panels, one with a GridBagLayout and one with a GridLayout. It looks pretty good, except that the GridLayout buttons and textfields are taller , and it looks kinda goofy that all of the GridLayout stuff is the same size. Pick pick pick. I'm never satisfied.
Well, if you are interested here is what I have now.

import java.awt.* ;
import java.awt.event.* ;
import javax.swing.* ;
public class GridBagTest extends JFrame
{
    private Container container ;
    private GridBagLayout gbLayout ;
    private GridBagConstraints gbConstraints ;
    
    private JTextField filenameField , 
                       heightField , 
                       widthField , 
                       startFrameField ,
                       currentFrameField ,  
                       endFrameField ,
                       timeBetweenFramesField ;
    
    private JPanel initializationPanel = new JPanel() ;
    
    private int startFrame = 0 ; // initial frame of animation
    private int currentFrame = 0 ; // current frame in animation
    private int endFrame = 0 ; // final frame of animation
    private int height = 256 ; // height of image
    private int width = 256; // width of image
        
    private float timeBetweenFrames = 0.001f ;
        
    public GridBagTest()
    {
        super( "GridBagTest" ) ;
        
        JPanel controlPanel = new JPanel() ;
        
        JButton chooseFileButton ,
                reverseButton , 
                runButton ,
                forwardButton ;
                        
        JLabel filenameLabel = new JLabel( "Filename:" ) ,
               heightLabel = new JLabel( "Height:" ) ,
               widthLabel = new JLabel( "  Width:" ) ,
               startFrameLabel = new JLabel( "Start" ) ,
               currentFrameLabel = new JLabel( "Current" ) ,
               endFrameLabel = new JLabel( "End" ) ,
               timeBetweenFramesLabel = new JLabel( "Time Between Frames:" ) ;
        
        container = getContentPane() ;
        container.setLayout( new BorderLayout( ) ) ;
        container.add( initializationPanel , BorderLayout.NORTH ) ;
        container.add( controlPanel , BorderLayout.SOUTH ) ;
        
        // Initialization Panel
        gbLayout = new GridBagLayout() ;
        initializationPanel.setLayout( gbLayout ) ;
        
        gbConstraints = new GridBagConstraints() ;
        
        filenameField = new JTextField( "images.dat" ) ;
        filenameLabel.setLabelFor( filenameField ) ;
        
        chooseFileButton = new JButton( "..." ) ;
        chooseFileButton.setMargin( new Insets( 0 , 0 , 0 , 0 ) ) ;
        
        heightField = new JTextField( String.valueOf( height ) , 3 ) ;
        heightField.setHorizontalAlignment( JTextField.RIGHT ) ;
        heightLabel.setLabelFor( heightField ) ;
        widthField = new JTextField( String.valueOf( width ) , 3 ) ;
        widthField.setHorizontalAlignment( JTextField.RIGHT ) ;
        widthLabel.setLabelFor( widthField ) ;
        
        timeBetweenFramesField = new JTextField( String.valueOf( timeBetweenFrames ) , 6 ) ;
        timeBetweenFramesField.setHorizontalAlignment( JTextField.RIGHT ) ;
        timeBetweenFramesLabel.setLabelFor( endFrameField ) ;
        
        
        gbConstraints.anchor = GridBagConstraints.EAST ; 
        gbConstraints.insets = new Insets( 0 , 1 , 0 , 1 ) ; 
        
        addComponent( heightField , 1 , 4 , 2 , 1 ) ;
        addComponent( widthField , 1 , 10 , 2 , 1 ) ;
        addComponent( timeBetweenFramesField , 2 , 8 , 4 , 1 ) ;
        addComponent( chooseFileButton , 0 , 11 , 1 , 1 ) ;
               
        gbConstraints.anchor = GridBagConstraints.CENTER ; 
        gbConstraints.fill = GridBagConstraints.HORIZONTAL ;
        
        addComponent( filenameLabel , 0 , 0 , 1 , 1 ) ;
        
        gbConstraints.weightx = 1 ;
        gbConstraints.weighty = 1 ;
        
        addComponent( filenameField , 0 , 1 , 11 , 1 ) ;
        addComponent( heightLabel , 1 , 0 , 4 , 1 ) ;
        addComponent( widthLabel , 1 , 6 , 4 , 1 ) ;
        addComponent( timeBetweenFramesLabel , 2 , 0 , 8, 1 ) ;
        
        // Control Panel
        controlPanel.setLayout( new GridLayout( 3 , 3 ) ) ;
        controlPanel.setBackground( Color.LIGHT_GRAY ) ;
        controlPanel.setBorder( BorderFactory.createEtchedBorder() ) ;
        
        startFrameField = new JTextField( String.valueOf( startFrame ) , 5 ) ;
        startFrameField.setHorizontalAlignment( JTextField.RIGHT ) ;
        
        startFrameLabel.setLabelFor( startFrameField ) ;
        startFrameLabel.setHorizontalAlignment( SwingConstants.CENTER ) ;
        currentFrameField = new JTextField( String.valueOf( currentFrame ) , 5 ) ;
        currentFrameField.setHorizontalAlignment( JTextField.RIGHT ) ;
        currentFrameLabel.setLabelFor( currentFrameField ) ;
        currentFrameLabel.setHorizontalAlignment( SwingConstants.CENTER ) ;
        endFrameField = new JTextField( String.valueOf( endFrame ) , 5 ) ;
        endFrameField.setHorizontalAlignment( JTextField.RIGHT ) ;
        
        endFrameLabel.setLabelFor( endFrameField ) ;
        endFrameLabel.setHorizontalAlignment( SwingConstants.CENTER ) ;
        reverseButton = new JButton( "REV" ) ;
        
        runButton = new JButton( "Run" ) ; 
                
        forwardButton = new JButton( "FWD" ) ;
        
        controlPanel.add( startFrameLabel ) ;
        controlPanel.add( currentFrameLabel ) ;
        controlPanel.add( endFrameLabel ) ;
        controlPanel.add( startFrameField ) ;
        controlPanel.add( currentFrameField ) ;
        controlPanel.add( endFrameField ) ;
        controlPanel.add( reverseButton ) ;
        controlPanel.add( runButton ) ;
        controlPanel.add( forwardButton ) ;
        
        pack() ;
        show() ;
    }
    
    private void addComponent( Component c , int row , int column , int width , int height )
    {
        // set gridx and gridy
        gbConstraints.gridx = column ;
        gbConstraints.gridy = row ;
        
        // set gridheight and gridwidth
        gbConstraints.gridwidth = width ;
        gbConstraints.gridheight = height ;
        
        gbLayout.setConstraints( c , gbConstraints ) ; // set contraints
        
        initializationPanel.add( c ) ; // add component
    }    
    public static void main( String args[] )
    {       
        GridBagTest app = new GridBagTest() ;
        
        app.addWindowListener(
            new WindowAdapter()
            {
                public void windowClosing( WindowEvent e )
                {
                    System.exit( 0 ) ;
                }
            }   
        );
    }
}

[Chantal Ackermann]

hello Don,
sorry that I didn't answer earlier.
On the one hand, I find the interface - hm, better? The GridLayout part looks very clean and neat. But you're right, it looks different to the GridBagLayout part.
On the other hand, I guess, the buttons in the last row don't have anything to do with the textfields in the row above this last one, do they? but it looks that way.
That is why I am a fan of spaces to group logical units in a gui. I prefer bigger frames with relatively less content.
cheers
Chantal

[Don Gardner]

Originally posted by Chantal Ackermann:

On the other hand, I guess, the buttons in the last row don't have anything to do with the textfields in the row above this last one, do they? but it looks that way.

Actually, the text fields do have something to do with the buttons on the bottom. The text fields show the max and min frame position, and the current frame field shows the current frame. If you push play, the current fram field would increment as the frames are shown. If you push REV or FWD, the current frame would decrement or increment. If you paused, and typed a number in the current frame, the animation would jump to that frame.
Now maybe the current frame text field is the only one that really belongs in the control panel, but I thought it would be useful to have the bounds right there.
Does that not makes sense?
Thanks for the feedback,
Don

[Chantal Ackermann]

what I meant with whether the buttons have something to do with the textfields was: has each textfield something to do with the corresponding button underneath. as you explain it, all three of the fields have the same relation to all three of the buttons. but it does rather look like each button would have a special relation to the field above it.
hm. was that clear?
c