0

Am creating a simple calculator GUI and I have been using netbeans IDE GUI builder. I have been trying to make sense of the GroupLayout code and unfortunately I just don't get it. I thought maybe by changing to GridBagLayout it would be more clear and I would be in a better position to understand the code.

Below is my code. Can anyone help change it to GridBagLayout?

public class CITCalculatorGUI extends javax.swing.JFrame {

/* Creates new frame CITCalculatorGUI */
public CITCalculatorGUI() {
    initComponents();
}

/* This method is called from within the constructor to
 * initialize the frame. 
 */

private void initComponents() {

    tempTextField = new javax.swing.JTextField();
    sevenButton = new javax.swing.JButton();
    eightButton = new javax.swing.JButton();
    nineButton = new javax.swing.JButton();
    fourButton = new javax.swing.JButton();
    fiveButton = new javax.swing.JButton();
    sixButton = new javax.swing.JButton();
    oneButton = new javax.swing.JButton();
    twoButton = new javax.swing.JButton();
    threeButton = new javax.swing.JButton();
    zeroButton = new javax.swing.JButton();
    positiveNegativeToggle = new javax.swing.JButton();
    decimalPoint = new javax.swing.JButton();
    base16A = new javax.swing.JButton();
    base16B = new javax.swing.JButton();
    base16C = new javax.swing.JButton();
    base16D = new javax.swing.JButton();
    base16E = new javax.swing.JButton();
    base16F = new javax.swing.JButton();
    plusButton = new javax.swing.JButton();
    minusButton = new javax.swing.JButton();
    divisionButton = new javax.swing.JButton();
    multiplication = new javax.swing.JButton();
    andButton = new javax.swing.JButton();
    orButton = new javax.swing.JButton();
    xorButton = new javax.swing.JButton();
    norButton = new javax.swing.JButton();
    equalsButton = new javax.swing.JButton();
    nandButton = new javax.swing.JButton();
    makLogo = new javax.swing.JLabel();

    setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
    setTitle("CIT Calculator");

    sevenButton.setBackground(new java.awt.Color(0, 0, 255));
    sevenButton.setForeground(new java.awt.Color(153, 153, 153));
    sevenButton.setText("7");

    eightButton.setBackground(new java.awt.Color(0, 0, 255));
    eightButton.setForeground(new java.awt.Color(153, 153, 153));
    eightButton.setText("8");

    nineButton.setBackground(new java.awt.Color(0, 0, 255));
    nineButton.setForeground(new java.awt.Color(153, 153, 153));
    nineButton.setText("9");

    fourButton.setBackground(new java.awt.Color(0, 0, 255));
    fourButton.setForeground(new java.awt.Color(153, 153, 153));
    fourButton.setText("4");

    fiveButton.setBackground(new java.awt.Color(0, 0, 255));
    fiveButton.setForeground(new java.awt.Color(153, 153, 153));
    fiveButton.setText("5");

    sixButton.setBackground(new java.awt.Color(0, 0, 255));
    sixButton.setForeground(new java.awt.Color(153, 153, 153));
    sixButton.setText("6");

    oneButton.setBackground(new java.awt.Color(0, 0, 255));
    oneButton.setForeground(new java.awt.Color(153, 153, 153));
    oneButton.setText("1");

    twoButton.setBackground(new java.awt.Color(0, 0, 255));
    twoButton.setForeground(new java.awt.Color(153, 153, 153));
    twoButton.setText("2");

    threeButton.setBackground(new java.awt.Color(0, 0, 255));
    threeButton.setForeground(new java.awt.Color(153, 153, 153));
    threeButton.setText("3");

    zeroButton.setBackground(new java.awt.Color(0, 0, 255));
    zeroButton.setForeground(new java.awt.Color(153, 153, 153));
    zeroButton.setText("0");

    positiveNegativeToggle.setBackground(new java.awt.Color(0, 0, 255));
    positiveNegativeToggle.setForeground(new java.awt.Color(153, 153, 153));
    positiveNegativeToggle.setText("+/-");

    decimalPoint.setBackground(new java.awt.Color(0, 0, 255));
    decimalPoint.setForeground(new java.awt.Color(153, 153, 153));
    decimalPoint.setText(".");

    base16A.setBackground(new java.awt.Color(0, 0, 255));
    base16A.setForeground(new java.awt.Color(153, 153, 153));
    base16A.setText("A");

    base16B.setBackground(new java.awt.Color(0, 0, 255));
    base16B.setForeground(new java.awt.Color(153, 153, 153));
    base16B.setText("B");

    base16C.setBackground(new java.awt.Color(0, 0, 255));
    base16C.setForeground(new java.awt.Color(153, 153, 153));
    base16C.setText("C");

    base16D.setBackground(new java.awt.Color(0, 0, 255));
    base16D.setForeground(new java.awt.Color(153, 153, 153));
    base16D.setText("D");

    base16E.setBackground(new java.awt.Color(0, 0, 255));
    base16E.setForeground(new java.awt.Color(153, 153, 153));
    base16E.setText("E");

    base16F.setBackground(new java.awt.Color(0, 0, 255));
    base16F.setForeground(new java.awt.Color(153, 153, 153));
    base16F.setText("F");

    plusButton.setBackground(new java.awt.Color(51, 255, 0));
    plusButton.setForeground(new java.awt.Color(153, 153, 153));
    plusButton.setText("+");

    minusButton.setBackground(new java.awt.Color(51, 255, 0));
    minusButton.setForeground(new java.awt.Color(153, 153, 153));
    minusButton.setText("-");

    divisionButton.setBackground(new java.awt.Color(51, 255, 0));
    divisionButton.setForeground(new java.awt.Color(153, 153, 153));
    divisionButton.setText("/");

    multiplication.setBackground(new java.awt.Color(51, 255, 0));
    multiplication.setForeground(new java.awt.Color(153, 153, 153));
    multiplication.setText("*");

    andButton.setBackground(new java.awt.Color(51, 255, 0));
    andButton.setForeground(new java.awt.Color(153, 153, 153));
    andButton.setText("AND");

    orButton.setBackground(new java.awt.Color(51, 255, 0));
    orButton.setForeground(new java.awt.Color(153, 153, 153));
    orButton.setText("OR");

    xorButton.setBackground(new java.awt.Color(51, 255, 0));
    xorButton.setForeground(new java.awt.Color(153, 153, 153));
    xorButton.setText("XOR");

    norButton.setBackground(new java.awt.Color(51, 255, 0));
    norButton.setForeground(new java.awt.Color(153, 153, 153));
    norButton.setText("NOR");

    equalsButton.setBackground(new java.awt.Color(51, 255, 0));
    equalsButton.setForeground(new java.awt.Color(153, 153, 153));
    equalsButton.setText("=");

    nandButton.setBackground(new java.awt.Color(51, 255, 0));
    nandButton.setForeground(new java.awt.Color(153, 153, 153));
    nandButton.setText("NAND");

    makLogo.setIcon(new javax.swing.ImageIcon("C:\\test\\mak-logo.jpg")); 

    javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
    getContentPane().setLayout(layout);//sets the layout manager
    layout.setHorizontalGroup(
        layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGroup(layout.createSequentialGroup()
            .addContainerGap()
            .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.TRAILING, false)
                    .addComponent(tempTextField, javax.swing.GroupLayout.Alignment.LEADING)
                    .addGroup(javax.swing.GroupLayout.Alignment.LEADING, layout.createSequentialGroup()
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                            .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.TRAILING, false)
                                .addComponent(base16D, javax.swing.GroupLayout.Alignment.LEADING, 0, 0, Short.MAX_VALUE)
                                .addComponent(base16A, javax.swing.GroupLayout.Alignment.LEADING, 0, 0, Short.MAX_VALUE)
                                .addComponent(zeroButton, javax.swing.GroupLayout.Alignment.LEADING, 0, 0, Short.MAX_VALUE)
                                .addComponent(oneButton, javax.swing.GroupLayout.Alignment.LEADING, 0, 0, Short.MAX_VALUE)
                                .addComponent(fourButton, javax.swing.GroupLayout.Alignment.LEADING, 0, 0, Short.MAX_VALUE))
                            .addComponent(sevenButton, javax.swing.GroupLayout.DEFAULT_SIZE, 57, Short.MAX_VALUE))
                        .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING, false)
                            .addComponent(base16E, 0, 0, Short.MAX_VALUE)
                            .addComponent(base16B, 0, 0, Short.MAX_VALUE)
                            .addComponent(positiveNegativeToggle, 0, 0, Short.MAX_VALUE)
                            .addComponent(twoButton, 0, 0, Short.MAX_VALUE)
                            .addComponent(fiveButton, 0, 0, Short.MAX_VALUE)
                            .addComponent(eightButton, javax.swing.GroupLayout.DEFAULT_SIZE, 58, Short.MAX_VALUE))
                        .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED)
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING, false)
                            .addComponent(base16F, 0, 0, Short.MAX_VALUE)
                            .addComponent(base16C, 0, 0, Short.MAX_VALUE)
                            .addComponent(decimalPoint, 0, 0, Short.MAX_VALUE)
                            .addComponent(threeButton, 0, 0, Short.MAX_VALUE)
                            .addComponent(sixButton, 0, 0, Short.MAX_VALUE)
                            .addComponent(nineButton, javax.swing.GroupLayout.DEFAULT_SIZE, 58, Short.MAX_VALUE))
                        .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.TRAILING)
                            .addGroup(layout.createSequentialGroup()
                                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING, false)
                                        .addComponent(multiplication, 0, 0, Short.MAX_VALUE)
                                        .addComponent(xorButton, javax.swing.GroupLayout.PREFERRED_SIZE, 66, javax.swing.GroupLayout.PREFERRED_SIZE))
                                    .addComponent(plusButton, javax.swing.GroupLayout.DEFAULT_SIZE, 58, Short.MAX_VALUE))
                                .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING, false)
                                    .addComponent(norButton, 0, 0, Short.MAX_VALUE)
                                    .addComponent(andButton, 0, 0, Short.MAX_VALUE)
                                    .addComponent(minusButton, javax.swing.GroupLayout.DEFAULT_SIZE, 54, Short.MAX_VALUE)))
                            .addComponent(nandButton))
                        .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING, false)
                            .addComponent(equalsButton, 0, 0, Short.MAX_VALUE)
                            .addComponent(orButton, 0, 0, Short.MAX_VALUE)
                            .addComponent(divisionButton, javax.swing.GroupLayout.DEFAULT_SIZE, 57, Short.MAX_VALUE))))
                .addComponent(makLogo))
            .addContainerGap(23, Short.MAX_VALUE))
    );

    layout.linkSize(javax.swing.SwingConstants.HORIZONTAL, new java.awt.Component[] {base16A, base16B, base16C, base16D, base16E, base16F, decimalPoint, eightButton, fiveButton, fourButton, nineButton, oneButton, positiveNegativeToggle, sevenButton, sixButton, threeButton, twoButton, zeroButton});

    layout.linkSize(javax.swing.SwingConstants.HORIZONTAL, new java.awt.Component[] {andButton, divisionButton, equalsButton, minusButton, multiplication, nandButton, norButton, orButton, plusButton, xorButton});

    layout.setVerticalGroup(
        layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGroup(layout.createSequentialGroup()
            .addContainerGap()
            .addComponent(tempTextField, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
            .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
            .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                .addGroup(layout.createSequentialGroup()
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                        .addComponent(eightButton)
                        .addComponent(sevenButton))
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                        .addComponent(fourButton)
                        .addComponent(fiveButton))
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                        .addComponent(oneButton)
                        .addComponent(twoButton))
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                        .addComponent(zeroButton)
                        .addComponent(positiveNegativeToggle))
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                        .addComponent(base16A)
                        .addComponent(base16B)))
                .addGroup(layout.createSequentialGroup()
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                        .addComponent(nineButton)
                        .addComponent(minusButton)
                        .addComponent(divisionButton)
                        .addComponent(plusButton))
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                        .addComponent(sixButton)
                        .addComponent(multiplication)
                        .addComponent(andButton)
                        .addComponent(orButton))
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                        .addComponent(threeButton)
                        .addComponent(xorButton)
                        .addComponent(norButton)
                        .addComponent(equalsButton))
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                        .addComponent(decimalPoint)
                        .addComponent(nandButton))
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addComponent(base16C)))
            .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
            .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                .addComponent(base16D)
                .addComponent(base16E)
                .addComponent(base16F))
            .addGap(28, 28, 28)
            .addComponent(makLogo)
            .addContainerGap(28, Short.MAX_VALUE))
    );

    pack();//pack method ensures the frame is at its preferred size
}


public static void main(String args[]) {
    java.awt.EventQueue.invokeLater(new Runnable() {
        public void run() {
            new CITCalculatorGUI().setVisible(true);
        }
    });
}// this code ensures thread safety.

// Variables declaration
private javax.swing.JButton andButton;
private javax.swing.JButton base16A;
private javax.swing.JButton base16B;
private javax.swing.JButton base16C;
private javax.swing.JButton base16D;
private javax.swing.JButton base16E;
private javax.swing.JButton base16F;
private javax.swing.JButton decimalPoint;
private javax.swing.JButton divisionButton;
private javax.swing.JButton eightButton;
private javax.swing.JButton equalsButton;
private javax.swing.JButton fiveButton;
private javax.swing.JButton fourButton;
private javax.swing.JLabel makLogo;
private javax.swing.JButton minusButton;
private javax.swing.JButton multiplication;
private javax.swing.JButton nandButton;
private javax.swing.JButton nineButton;
private javax.swing.JButton norButton;
private javax.swing.JButton oneButton;
private javax.swing.JButton orButton;
private javax.swing.JButton plusButton;
private javax.swing.JButton positiveNegativeToggle;
private javax.swing.JButton sevenButton;
private javax.swing.JButton sixButton;
private javax.swing.JTextField tempTextField;
private javax.swing.JButton threeButton;
private javax.swing.JButton twoButton;
private javax.swing.JButton xorButton;
private javax.swing.JButton zeroButton;
// End of variables declaration

}
mKorbel
  • 109,525
  • 20
  • 134
  • 319
Wasswa Samuel
  • 2,139
  • 3
  • 30
  • 54
  • 1
    @Wassma: "I thought maybe by changing to `GridBagLayout` it would be more clear" ?!? What made you think that changing to GBL would achieve that? It seems counter to all my experience with GBL. Even people that advocate GBL commonly use helper methods to define the layout constraints of components. – Andrew Thompson May 02 '11 at 05:30
  • which layout manager do you recommend – Wasswa Samuel May 02 '11 at 05:49
  • See my comment on nested layout**s** (with the emphasis on the **s**). – Andrew Thompson May 02 '11 at 05:57
  • Your question would make more sense if you also posted a screenshot (or mockup) of what you want to achieve. There are dozens of LayoutManagers and you would choose one or the other (or a set of nexted layouts, although I generally don't recommend it) based on your requirements. – jfpoilpret May 02 '11 at 07:27
  • Hehe, this question perfectly illustrates why one would want to avoid GUI builders ;-) – jfpoilpret May 02 '11 at 08:06
  • @Andrew +1 for the comment on GBL compelxity. Not only do I think it won't dramatically reduce code complexity, but it may also be more difficult to obtain the same layout. – jfpoilpret May 02 '11 at 08:19
  • The layout for this sample code seems incorrect: why do you have a larger gap between the second and the third columns? Shouldn't it be between the 3rd and 4th columns instead? – jfpoilpret May 02 '11 at 08:20

2 Answers2

1

Take a look here: Calculator in java swing. It uses GridLayout in panel and might help you.

Harry Joy
  • 58,650
  • 30
  • 162
  • 207
  • 1
    +1 That code also demonstrates the concept of nesting layouts inside each other (the `GridLayouts` are positioned within a `BorderLayout`). Here is another [demo of a nested layout](http://stackoverflow.com/questions/5621338/about-swing-and-jtable/5630271#5630271). – Andrew Thompson May 02 '11 at 05:22
0

Here is a snippet that does almost the same layout as GroupLayout, but with only 10 lines of code:

DesignGridLayout layout = new DesignGridLayout(getContentPane());
layout.row().grid().add(tempTextField);
layout.row().grid().add(sevenButton, eightButton, nineButton).grid().add(plusButton, minusButton, divisionButton);
layout.row().grid().add(fourButton, fiveButton, sixButton).grid().add(multiplication, andButton, orButton);
layout.row().grid().add(oneButton, twoButton, threeButton).grid().add(xorButton, norButton, equalsButton);
layout.row().grid().add(zeroButton, positiveNegativeToggle, decimalPoint).grid().empty().add(nandButton).empty();
layout.row().grid(1).add(base16A, base16B, base16C);
layout.row().grid(1).add(base16D, base16E, base16F);
layout.emptyRow();
layout.row().left().add(makLogo);

It uses DesignGridLayout to make the layout easy to code and maintain. The only visual difference with your GroupLayout-based sample is that when you enlarge the frame, all buttons get larger (which is not necessarily bad according to my own taste).

Note that it has taken me about 5-10 minutes to write the 10 lines above.

Edit: added 2 additional lines of code to add the logo at the bottom.

jfpoilpret
  • 10,449
  • 2
  • 28
  • 32
  • 1
    I just see that I forgot the logo (I couldn't see it in the original panel because I don't have the image file for it). Not sure where it is supposed to be laid out (last row, but is it centered?) – jfpoilpret May 02 '11 at 08:52
  • 1
    @Wassma: For creating an [SSCCE](http://pscode.org/sscce.html) involving images, I recommend either hot-linking to an image available on the internet (e.g. any of the images at my [media page](http://pscode.org/media/#image)), or generating an image in the source, as seen in the [2nd example here](http://stackoverflow.com/questions/5853879/java-swing-obtain-image-of-jframe/5853992#5853992) (the red/orange gradient). Of course, this question can also be described using a drawing or ASCII art. – Andrew Thompson May 02 '11 at 09:21