Question

Using layouts for me results in so much frustration that I end up using an absolute layout and then scaling the components manually.

Let’s say I have a TextArea, and I want it to take 2/3rds of the screen.
What I would really like is having a GridLayout with 3 rows, and forcing the TextArea to take TWO of those rows at once.

So for example:

• Row 1 (Occupied by first textArea)
• Row 2 (Occupied by the same text area)
• Row 3 (Occupied by buttons)

Here’s a picture using Gridbag layout (modified from the java tutorial). I would like the area in green to be taken up by a single component.

This is just a way of expressing myself, I am positively sure that there are other ways (or layouts) for doing this. However note that I would also like to do this with other specific scales, such as 9/10.

That would save so much time. Thanks!

Answer 1

In general you should not be playing with absolute percentages, expecially on individual compoents. You should let a component display at its preferred size. So your example really doesn’t make any sense. When you have a form with a text area and buttons. Then changes in size should affect the text area and not the buttons. Then you add a scrollpane to the text area so the scroll bar will appear or disappear as required.

However if for some reason you do need to use absolute percentages at a panel level you can use code like the following:

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class GridBagSSCCE extends JPanel
{
    JPanel red;
    JPanel green;

    public GridBagSSCCE()
    {
        setLayout( new GridBagLayout() );
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.fill = GridBagConstraints.VERTICAL;

        red = new JPanel();
        red.setBackground( Color.RED );
        red.setPreferredSize( new Dimension(300, 10) );
        gbc.weighty = 0.1;
        add(red, gbc);

        green = new JPanel();
        green.setBackground( Color.GREEN );
        green.setPreferredSize( new Dimension(300, 90) );
        gbc.gridy = 1;
        gbc.weighty = 0.9;
        add(green, gbc);

        JPanel buttons = new JPanel();
        buttons.add( new JButton("Ok") );
        buttons.add( new JButton("Cancel") );
        buttons.setAlignmentX(JPanel.RIGHT_ALIGNMENT);
        gbc.gridy = 2;
        gbc.weighty = 0.0;
        gbc.anchor = GridBagConstraints.LINE_END;
        add(buttons, gbc);

        addComponentListener( new ComponentAdapter()
        {
            public void componentResized(ComponentEvent e)
            {
                System.out.println(red.getSize() + " : " + green.getSize());
            }
        });
    }

    private static void createAndShowUI()
    {
        JFrame frame = new JFrame("GridBagSSCCE");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add( new GridBagSSCCE() );
        frame.pack();
        frame.setLocationRelativeTo( null );
        frame.setVisible( true );
    }

    public static void main(String[] args)
    {
        EventQueue.invokeLater(new Runnable()
        {
            public void run()
            {
                createAndShowUI();
            }
        });
    }
}

The key in the above code is to start with a preferred size at your desired (10/90) ratio and to also set the weighty of the components in the same ratio.

If you want you can also check out the Relative Layout which was written specifically for this purpose.

Edit:

A GridBagLayout does not display the components in percentages. Just because you have two rows does not mean each row is 50%. The height of each row is dependent on the height of each component added in each row.

First you decide the preferred amount of data to be displayed in the text area. For two rows your would use something like:

JTextArea textArea = new JTextArea(2, 40);
JScrollPane scrollPane = new JScrollPane( textArea );

Then you create a panel with buttons.

It may turn out that a text area with 2 rows is approximately the same size a panel with buttons because the panel adds a vertical gap above and below the component and the button has a relatively large border, but that is just a coincidence. But you should not force the text area to be more than half. Just let the layout manager and the pack() method do their jobs.

Now you need to decide what happens when the frame increases in size as this will determine the layout manager of the parent container. In this case I would probably use a BorderLayout so I would then use code like:

frame.add(scrollPane, BorderLayout.CENTER);
frame.add(buttonPanel, BorderLayout.SOUTH);
frame.pack();

You don’t care if the text area is half the frame or not. The pack method determines the relative sizes of each component based on their preferred sizes. If the frame increases the text area gets more space.