about layouts in simple calculator

Question

hi there i am trying to make a calculator with coding sizes,layouts etc. by myself (trying to not use NetBeans and it is not a homework). but i am facing with a problem about empty spaces. i have a TextArea and Buttons but as you can see below i cant handle this space problem. here is my code,

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.GridLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JSeparator;
import javax.swing.JTextArea;

public class calculator extends JFrame {

    public calculator(){

        initComponents();

    }

    private void initComponents(){

        JPanel panelScreen = new JPanel(new GridLayout(0,1));

        JTextArea screen = new JTextArea();
        panelScreen.add(screen);

        JFrame frame = new JFrame("CALCULATOR");
        frame.setDefaultCloseOperation(EXIT_ON_CLOSE);

        JPanel panelButtons = new JPanel(new GridLayout(3,3));

        JButton oneButton = new JButton("1");
        panelButtons.add(oneButton);

        JButton twoButton = new JButton("2");
        panelButtons.add(twoButton);

        JButton threeButton = new JButton("3");
        panelButtons.add(threeButton);

        JButton fourButton = new JButton("4");
        panelButtons.add(fourButton);

        JButton fiveButton = new JButton("5");
        panelButtons.add(fiveButton);

        JButton sixButton = new JButton("6");
        panelButtons.add(sixButton);

        JButton sevenButton = new JButton("7");
        panelButtons.add(sevenButton);

        JButton eightButton = new JButton("8");
        panelButtons.add(eightButton);

        JButton nineButton = new JButton("9");
        panelButtons.add(nineButton);

        frame.getContentPane().add(panelScreen, BorderLayout.NORTH);
        //frame.getContentPane().add(new JSeparator(), BorderLayout.CENTER);
        frame.getContentPane().add(panelButtons, BorderLayout.SOUTH);
        frame.setBounds(50, 50, 500, 500);
        frame.setResizable(false);
        //frame.pack();
        frame.setVisible(true);


    }


    public static void main(String[] args) {

        new calculator();

    }

}

and this the picture of programme;

enter image description here

i appreciate if you can help me. anyway thanks :)

You might look at how it is done in this [calculator code](http://stackoverflow.com/questions/7441625/how-to-find-a-button-source-in-awt-calculator-homework/7441804#7441804). It is probably not exactly what is needed for your use, but may give you some ideas. — Andrew Thompson, Oct 19 '11 at 16:06
BTW where is '0'? Are you one of these people who consider 0 not to be a number? My 2nd youngest sister is right there with you (conceptually). — Andrew Thompson, Oct 19 '11 at 16:27
haha man i am just trying to handle with borders layouts .etc than of course i will add other things :D. but thanks for remind :D — quartaela, Oct 19 '11 at 16:32

score 5 · Answer 1 · edited Oct 19 '11 at 16:48

A few suggestions:

Don't set the JFrame's size, and in fact don't set any sizes.
Call pack to all the components to set their own sizes.
If you want the buttons bigger, consider changing the size of their fonts.

e.g.,

Calc2 GUI

import java.awt.BorderLayout;
import java.awt.Font;
import java.awt.GridLayout;

import javax.swing.*;

public class Calc2 {
   public static final String[][] BUTTON_TEXTS = {
      {"7", "8", "9", "+"},
      {"4", "5", "6", "-"},
      {"1", "2", "3", "*"},
      {"0", ".", "/", "="}
   };
   public static final Font BTN_FONT = new Font(Font.SANS_SERIF, Font.BOLD, 24);

   private static void createAndShowGui() {
      JTextField field = new JTextField(10);
      field.setFont(BTN_FONT.deriveFont(Font.PLAIN));
      JPanel btnPanel = new JPanel(new GridLayout(BUTTON_TEXTS.length,
            BUTTON_TEXTS[0].length));

      for (int i = 0; i < BUTTON_TEXTS.length; i++) {
         for (int j = 0; j < BUTTON_TEXTS[i].length; j++) {
            JButton btn = new JButton(BUTTON_TEXTS[i][j]);
            btn.setFont(BTN_FONT);
            btnPanel.add(btn);
         }
      }

      JPanel mainPanel = new JPanel(new BorderLayout());
      mainPanel.add(field, BorderLayout.PAGE_START);
      mainPanel.add(btnPanel, BorderLayout.CENTER);


      JFrame frame = new JFrame("Calc2");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.getContentPane().add(mainPanel);
      frame.pack();
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
   }

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

but if i dont resize the JFrame than it has very little size. and i want bigger buttons with text area_? — quartaela, Oct 19 '11 at 15:58
Again, set the font, but don't set the size else you'll see the problem you're seeing above, and you'll have incompatible GUI when run on other OS's or this OS with a different screen resolution. See edit above. — Hovercraft Full Of Eels, Oct 19 '11 at 16:02

mre · Answer 2 · 2011-10-19T16:04:48.543

4

Read Laying Out Components Within a Container
Implement appropriate layout(s)

EDIT -

Quick solution - replace the JFrame layout manager with BoxLayout (i.e. setLayout(new BoxLayout(this, BoxLayout.PAGE_AXIS))).

edited Oct 19 '11 at 16:04

answered Oct 19 '11 at 15:55

mre

43,520
33
120
170

well actually i just finished that tutorial 5 minutes ago :D. and then i started to make this calculator. – quartaela Oct 19 '11 at 16:01
@quartaela: this is the way to go, 1+ – Hovercraft Full Of Eels Oct 19 '11 at 16:04
well i am trying but i am getting some errors. by the way, i will read boxlayout tutorial again. :) thanks anyway – quartaela Oct 19 '11 at 16:29

score 4 · Answer 3 · answered Oct 19 '11 at 16:03

4

You might like to study this example that follows the suggestions of @HFOE and @mre. Note that "size" appears nowhere in the code.

answered Oct 19 '11 at 16:03

trashgod

203,806
29
246
1,045

score 4 · Accepted Answer · edited Oct 19 '11 at 16:44

Calculator GUI

import java.awt.*;

import javax.swing.*;
import javax.swing.border.EmptyBorder;

// no need to extend frame!
//public class Calculator extends JFrame {
public class Calculator {

    public Calculator(){    
        initComponents();    
    }

    private void initComponents(){
        // I find it easier to create a panel and SET it as the content pane
        JPanel gui = new JPanel(new BorderLayout(5,5));
        // add some padding to the main GUI
        gui.setBorder(new EmptyBorder(4,4,4,4));

        // not needed if only a single compoinent is to be added!
        //JPanel panelScreen = new JPanel(new GridLayout(0,1));

        // add some constraints to make the output field bigger.
        // if it is intended to be single line, a JTextField should be used.
        JTextArea screen = new JTextArea(2,25);
        gui.add(screen, BorderLayout.NORTH);
        //panelScreen.add(screen);

        JFrame frame = new JFrame("CALCULATOR");
        frame.setContentPane(gui);

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // add padding around the buttons
        JPanel panelButtons = new JPanel(new GridLayout(3,3,4,4));

        JButton oneButton = new JButton("1");
        panelButtons.add(oneButton);

        JButton twoButton = new JButton("2");
        panelButtons.add(twoButton);

        JButton threeButton = new JButton("3");
        panelButtons.add(threeButton);

        JButton fourButton = new JButton("4");
        panelButtons.add(fourButton);

        JButton fiveButton = new JButton("5");
        panelButtons.add(fiveButton);

        JButton sixButton = new JButton("6");
        panelButtons.add(sixButton);

        JButton sevenButton = new JButton("7");
        panelButtons.add(sevenButton);

        JButton eightButton = new JButton("8");
        panelButtons.add(eightButton);

        JButton nineButton = new JButton("9");
        panelButtons.add(nineButton);

        //frame.getContentPane().add(new JSeparator(), BorderLayout.CENTER);

        // Add the buttons to the CENTER and they will
        // fill whatever space they are provided.
        gui.add(panelButtons, BorderLayout.CENTER);
        //frame.setBounds(50, 50, 500, 500);
        //frame.setResizable(false);
        frame.pack();
        frame.setVisible(true); 
    }    

    public static void main(String[] args) {    
       java.awt.EventQueue.invokeLater(new Runnable() {

         @Override
         public void run() {
            new Calculator();
         }
       });    
    }    
}

Note that `BorderLayout` is a *layout* for **component positioning** of components contained inside it, while `EmptyBorder` is a *border* that **encloses the component** (the panel). Does that clear up any confusion for you, or did I misinterpret your question? — Andrew Thompson, Oct 19 '11 at 16:52

about layouts in simple calculator

4 Answers4

Linked