Layout managers to set this specific layout in java

Question

I have this layout that I need to program for an assignment and this is the first time I have used layout managers in the GUI so I'm having problems getting the layout to match. I need your help

I Have two tabs labeled Account creation and Account transfer (those are ok) what I need is to have the JLabel (Account ID) and the first text field in one line then the next JLabel (Amount) and text field in the line under the first. Under that needs to be the JButton Centered (Create an Account). Lastly the JTextArea (No account) needs to be in a column to the right in the empty space separate from the labels, text fields, and button.

Here is the code I have started with:

public CreatePanel(Vector accountList, TransferPanel transferPanel)
{
this.accountList = accountList;
this.transferPanel = transferPanel;

JLabel l1 = new JLabel("Account ID");
JTextField t1 = new JTextField();
JLabel l2 = new JLabel("Amount");
JTextField t2 = new JTextField();
JButton b1 = new JButton("Create an Account");
JTextArea a1 = new JTextArea("No Account");

JPanel panel1 = new JPanel();
panel1.setLayout(new GridLayout(2,3));
panel1.add(l1);
panel1.add(t1);
panel1.add(l2);
panel1.add(t2);
panel1.add(b1, BorderLayout.SOUTH);
b1.setVerticalAlignment(JLabel.CENTER);


JPanel panel2 = new JPanel();
panel2.add(a1);
a1.setSize(200, 300);

add(panel1);
add(panel2);
}

Answer 1

This is how I would approach it. Instead of adding the outer panel to a frame though, it would be added to a tab of the tabbed pane.

The above is an example of a nested or compound layout. The titled borders show the layouts used and the arguments (if any) used to construct them.

The size of the button is suggested by the content (the text). The sizes of the text fields and text area is suggested in the constructor (which itself has been included as the text value).

To get the TALL effect in the text fields, set an HUGE font but use less columns for the constructor.

See also

Another nested layout.

Answer 2

GridBagLayout is the most powerful Layout that you can use to easily implement grid-like displays. It's a layout with n rows and m columns where each cell is customizable independently of the others in several aspects. In this layout you have to attach a GridBagConstraints object to each panel.add(JComponent, Constraints) as constraints. In the tutorial it's clearly specified what is customizable. It might look a little harsh at the beginning but once you get the hang of it it's great. It's powerful and flexible and you don't have to worry about the uncustomizable restrictions you might encounter with other Layouts.

In your layout, the most inconvenient thing I see is having the "Account ID" label aligned by its center with the TextField AND with the empty space over both of them. It would be easier if the label was aligned with the bottom of the TextField. To solve this I'll assume that the Label and the TextField are inside a panel I constructed beforehand that aligns each other correctly (easily with BorderLayout or GridBagLayout... or anything really) and I'll just place the panels in the Layout.

Then I see this Layout as a GridBagLayout with 3 rows and 2 columns that looks like this:

This is an overview of how I'd put the constraints to specify each component in the layout.

Panel 1 (Account ID Label + TextField)

gridx = 0
gridy = 0
weighty = 0.5
weightx = 0.5
anchor = PAGE_END
fill = HORIZONTAL

Panel 2 (Amount Label + TextField)

gridx = 0
gridy = 1
weighty = 0.0
fill = HORIZONTAL

Button

gridx = 0
gridy = 2
anchor = PAGE_START
weighty = 0.5

TextArea

gridx = 1
gridy = 0
gridheight = 3
weightx = 0.5
fill = BOTH

There is a couple of details I overlooked but the core issues can be aproached with these constraints. The least obvious thing to learn about the GridBagLayout is how do weights work in complex cases, for example what happens when there are several different weightx values in the same column. Does it count the max? or the sum?...

For the sake of discussion, you could avoid having those panels using an extra initial row with an invisible component with weighty > 0 and then having 2 columns: one for the JLabels and the other one for the JTextFields, with the apropiate anchors; the button would have gridwith = 2... but that's totally unnecesary, go for the two auxiliar panels.