How do I need to implement GridBagLayout

Question

How would I add gridbag layout to my code in order for output box to span the length of gui within the border parameters provided in the following code? I have two other classes that go along with this work fine. When the GUI populates it all works except the output text box doesn't span the length of gui so that the text in text box is cut off and I want to fix this, but I don't know how to do it as I never used gridbaglayout.

Below is the image showing how the GUI is supposed to look:

The code in question is given below:

    public ATMGui() {
        checkingAcc = new Account(1000);
        savingAcc = new Account(2000);
        currentSelect = new Account(0);
        atmFrame = new JFrame("Automated Teller Machine");
        output = new JTextField();
        panel = new JPanel();

I believe that the problem may be because I didn't completely declare the size of the output box so it only spans one grid so-to-speak whereas I want it to span both. Can someone help me decide whether I declare the grid differently in the code above or if it goes below? Also, I've read about GridBagLayout and other methods but my problem is that I'm not sure how/where to implement it here.

        atmWithdraw = new JButton("Withdraw");
        atmDeposit = new JButton("Deposit");
        transfer = new JButton("Transfer to");
        balance = new JButton("Balance");
        atmWithdraw.addActionListener(this);

        panel.setLayout(new GridLayout(4, 2));
        panel.setBorder(BorderFactory.createEmptyBorder(15, 15, 0, 15));
        panel.add(atmWithdraw, 0);
        panel.add(atmDeposit, 1);
        panel.add(transfer, 2);
        panel.add(balance, 3);
        panel.add(checking, 4);
        panel.add(savings, 5);
        panel.add(output, BorderLayout.LINE_END);
        atmFrame.add(panel);

        atmFrame.setSize(300, 175);
        atmFrame.setVisible(true);

Answer 1

i have never used gridbaglayout

Start by reading the section from the Swing tutorial on How to Use GridBagLayout for working examples.

The working example shows how to have a button span the entire width of the frame. You need to play with the "grid width" constraint. The tutorial explain how all the constraints are used.

The other option is to nest layout managers. So maybe you use the standard BorderLayout of the frame. Then you create a panel and add some components to the panel using your GridBagLayout and then add the panel to the CENTER. Then you can add your "output box" to the BorderLayout.PAGE_END. By default the component will fill the horizontal space.

The point is read the tutorials and learn the basics of each layout manager. Then use the appropriate combination of layout managers to get the job done.

Answer 2

My advice is not to use GridBagLayout but rather something a bit easier to use (but just as powerful) like TableLayout (http://www.oracle.com/technetwork/java/tablelayout-141489.html). To use include download the library and include in classpath or use the following maven include: -

<dependency>
    <groupId>info.clearthought</groupId>
    <artifactId>table-layout</artifactId>
    <version>4.3.0</version>
</dependency>

(See https://github.com/nerro/table-layout for more details)

Once included, then you can define your table layout as a simple 2 dimensional array of numbers e.g.

import info.clearthought.layout.TableLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JRadioButton;
import javax.swing.JTextField;

public class Test {

    public static void main(String [] args) {

        // Create JPanel using TableLayout as layout manager

        double PREF = TableLayout.PREFERRED;
        double BORDER = 10;
        double size[][] = { { BORDER, 0.50, 10, 0.50, 10 }, { 10, PREF, 10, PREF, 10, PREF, 10, PREF, 10 } };

        JPanel panel = new JPanel(new TableLayout(size));

        panel.add(new JButton("Withdraw"), "1,1");
        panel.add(new JButton("Deposit"), "3,1");
        panel.add(new JButton("Transfer to"), "1,3");
        panel.add(new JButton("Balance"), "3,3");

        panel.add(new JRadioButton("Checking"), "1,5");
        panel.add(new JRadioButton("Savings"), "3,5");

        panel.add(new JTextField(), "1,7,3,7");

        // Add to JFrame and Display

        JFrame frame = new JFrame("ATM Machine");
        frame.setSize(300, 200);
        frame.setContentPane(panel);
        frame.setVisible(true);
    }
}

The previous code produces the following: -

NOTE that the layout is defined as follows: -

double size[][] = { { WIDTH1, WIDTH2, ...  }, { HEIGHT1, HEIGHT2, ...  } };`

The 2 column widths are specified as 50% or 0.50. All real numbers in the range [0.0..1.0) represents percentages e.g. see the BORDER variable. The constant FILL is allocated 100% of the scalable space and PREFERRED fills to the preferred size of the component. This allows the window to resize nicely.

To add then to this frame it's miles easier than GridBagLayout i.e. simply the cell X/Y positions e.g.

panel.add(new JButton("Withdraw"), "1,1");
panel.add(new JButton("Deposit"), "3,1");

We can span several columns as follows: -

panel.add(new JTextField(), "1,7,3,7");

This spans the JTextField from column 1 to column 3 in row 7.

For more advanced uses see: -

http://www.clearthought.info/sun/products/jfc/tsc/articles/tablelayout/Simple.html