Gridbag Layout for POS

Question

I want to build a simple interface for a Point of sale using gridbag layout.

I was hoping to achieve a layout which re-sizes buttons in proportion to the frame which works but I cant make a button take up more than one space. The Enter button on the nums pad should be larger and take up the remainder of the space vertically. Please help. Below is my code.

public class Tillview2 {

private JButton b0;
private JButton b1;
private JButton b2;
private JButton b3;
private JButton b4;
private JButton b5;
private JButton b6;
private JButton b7;
private JButton b8;
private JButton b9;
private JButton b00;
private JButton bdot;
private JButton bclear;
private JButton bbacksp;
private JButton bent;


public void init() {

    JFrame mainFrame = new JFrame("Point Of Sale - Till");

    GridBagLayout gridbag = new GridBagLayout();
    GridBagConstraints c = new GridBagConstraints();

    mainFrame.setLayout(gridbag);

    c.fill = GridBagConstraints.BOTH;
    c.weightx = 1.0;
    c.weighty = 1.0;


    JPanel itemListPanel = new JPanel();
    JPanel categoryPanel = new JPanel();
    JPanel numbersPanel = new JPanel();
    JPanel hotkeyPanel = new JPanel();

    c.fill = GridBagConstraints.BOTH; 
    gridbag.setConstraints(itemListPanel, c);
    mainFrame.add(itemListPanel);
    JButton itemList = new JButton("Item List");  ///    <-------TEMP
    itemListPanel.add(itemList);
    c.gridwidth = GridBagConstraints.REMAINDER;
    gridbag.setConstraints(categoryPanel, c);
    mainFrame.add(categoryPanel);
    JButton categorys = new JButton("Categorys");  ///    <------TEMP
    categoryPanel.add(categorys);
    c.gridwidth = GridBagConstraints.BOTH;
    gridbag.setConstraints(numbersPanel, c);
    mainFrame.add(numbersPanel);
    gridbag.setConstraints(hotkeyPanel, c);
    mainFrame.add(hotkeyPanel);
    JButton hotkey = new JButton("Hoy keys");  ///    <------  TEMP
    hotkeyPanel.add(hotkey);

Create the numbersPanel

    b0 = new JButton("0");
    b1 = new JButton("1");
    b2 = new JButton("2");
    b3 = new JButton("3");
    b4 = new JButton("4");
    b5 = new JButton("5");
    b6 = new JButton("6");
    b7 = new JButton("7");
    b8 = new JButton("8");
    b9 = new JButton("9");
    b00 = new JButton("00");
    bdot = new JButton(".");
    bclear = new JButton("C");
    bbacksp = new JButton("Bsp");
    bent = new JButton("Ent");


    GridBagLayout gbNums = new GridBagLayout();
    GridBagConstraints cNums = new GridBagConstraints();

    cNums.fill = GridBagConstraints.BOTH;

    numbersPanel.setLayout(gbNums);
    cNums.weightx = 1.0;
    cNums.weighty = 1.0;

    cNums.fill = GridBagConstraints.BOTH;
    gbNums.setConstraints(b7, cNums);
    numbersPanel.add(b7);
    gbNums.setConstraints(b8, cNums);
    numbersPanel.add(b8);
    gbNums.setConstraints(b9, cNums);
    numbersPanel.add(b9);
    cNums.gridwidth = GridBagConstraints.REMAINDER;
    gbNums.setConstraints(bbacksp, cNums);
    numbersPanel.add(bbacksp);

    cNums.gridwidth = GridBagConstraints.BOTH;
    gbNums.setConstraints(b4, cNums);
    numbersPanel.add(b4);
    gbNums.setConstraints(b5, cNums);
    numbersPanel.add(b5);
    gbNums.setConstraints(b6, cNums);
    numbersPanel.add(b6);
    cNums.gridwidth = GridBagConstraints.REMAINDER;
    gbNums.setConstraints(bclear, cNums);
    numbersPanel.add(bclear);

    cNums.gridwidth = GridBagConstraints.BOTH;
    gbNums.setConstraints(b1, cNums);
    numbersPanel.add(b1);
    gbNums.setConstraints(b2, cNums);
    numbersPanel.add(b2);
    gbNums.setConstraints(b3, cNums);
    numbersPanel.add(b3);

    cNums.gridwidth = GridBagConstraints.REMAINDER;
    cNums.gridheight = 2;
    gbNums.setConstraints(bent, cNums);
    numbersPanel.add(bent);


    cNums.gridwidth = GridBagConstraints.BOTH; 
    gbNums.setConstraints(b0, cNums);
    numbersPanel.add(b0);
    gbNums.setConstraints(bdot, cNums);
    numbersPanel.add(bdot);
    //cNums.gridwidth = GridBagConstraints.RELATIVE;
    gbNums.setConstraints(b00, cNums);
    numbersPanel.add(b00);


    mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    mainFrame.setSize(600, 400);
    mainFrame.setVisible(true);
}

public static void main(String args[]) {

    Tillview2 ex1 = new Tillview2();
    ex1.init();
}
}

score 0 · Accepted Answer · answered Aug 08 '15 at 21:13

0

Set the gridwidth if you have an absolute number of columns for the Enter button to take up or use the weightx constraint to take up a relative amount of space in the row.

How to use GridBagLayout

answered Aug 08 '15 at 21:13

airowe

794
2
9
29

Thanks for fast response. – Colm O S Aug 08 '15 at 21:38
@ColmOS Please mark as correct answer if it solved your problem. – airowe Aug 08 '15 at 21:43
Sorry got distracted on phone call there. I want the enter button to take up two spaces vertically, so used cNums.gridheight = 2 but makes no difference. weighty with gridbagconstraints.RELATIVE makes the bottom row smaller in height. Maybe my approach to having resizable buttons is wrong? – Colm O S Aug 08 '15 at 23:08
@ColmOS Read the part of the documentation about explicitly setting the gridx, gridy, gridwidth and gridheight values for each component. GidBagConstraintsRELATIVE can be unpredictable. – airowe Aug 09 '15 at 13:52
@ColmOS I'd also suggest using the WindowBuilder to design your class until you're comfortable editing it in code. – airowe Aug 09 '15 at 13:53
1

I have been busy with other projects and will come back to this again during the summer. For these other projects I worked with gridbaglayout and I finally feel comfortable with this layout manager. Thanks for your help anyway – Colm O S Mar 11 '16 at 13:00

Gridbag Layout for POS

1 Answers1