Button placement and location not working

Question

I recently tried out an online tutorial of Swing and Java GUI's and I decided to replicate the tutorial code but add in a third button. I tried to add in a red one, and I successfully did (it doesn't do anything yet), but i'm having some coordinate issues. Whenever I try to run it, something like this comes up:

enter image description here

All I really need help with is with coordinates or the size of the frames. I really don't know where to go from here. I'm sure this is a relatively simple question but, thanks!

import javax.swing.*;
import java.awt.Color;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;

public class Test1 implements  ActionListener
{

// Definition of global values and items that are part of the GUI.
int blackScoreAmount = 0;
int greenScoreAmount = 0;
int redScoreAmount = 0;

JPanel titlePanel, scorePanel, buttonPanel;
JLabel blackLabel, greenLabel, redLabel, blackScore, greenScore, redScore;
JButton blackButton, greenButton, redButton, resetButton;

public JPanel createContentPane ()
{

    // We create a bottom JPanel to place everything on.
    JPanel totalGUI = new JPanel();
    totalGUI.setLayout(null);

    // Creation of a Panel to contain the title labels
    titlePanel = new JPanel();
    titlePanel.setLayout(null);
    titlePanel.setLocation(10, 0);
    titlePanel.setSize(180, 30);
    totalGUI.add(titlePanel);

    blackLabel = new JLabel("Black Team");
    blackLabel.setLocation(0, 0);
    blackLabel.setSize(120, 30);
    blackLabel.setHorizontalAlignment(0);
    blackLabel.setForeground(Color.black);
    titlePanel.add(blackLabel);

    greenLabel = new JLabel("Green Team");
    greenLabel.setLocation(130, 0);
    greenLabel.setSize(120, 30);
    greenLabel.setHorizontalAlignment(0);
    greenLabel.setForeground(Color.green);
    titlePanel.add(greenLabel);

    redLabel = new JLabel("Red Team");
    redLabel.setLocation(250, 0);
    redLabel.setSize(120, 30);
    redLabel.setHorizontalAlignment(0);
    redLabel.setForeground(Color.red);
    titlePanel.add(redLabel);

    // Creation of a Panel to contain the score labels.
    scorePanel = new JPanel();
    scorePanel.setLayout(null);
    scorePanel.setLocation(10, 40);
    scorePanel.setSize(180, 30);
    totalGUI.add(scorePanel);

    blackScore = new JLabel(""+blackScoreAmount);
    blackScore.setLocation(0, 0);
    blackScore.setSize(120, 30);
    blackScore.setHorizontalAlignment(0);
    scorePanel.add(blackScore);

    greenScore = new JLabel(""+greenScoreAmount);
    greenScore.setLocation(130, 0);
    greenScore.setSize(120, 30);
    greenScore.setHorizontalAlignment(0);
    scorePanel.add(greenScore);

    redScore = new JLabel(""+redScoreAmount);
    redScore.setLocation(250, 0);
    redScore.setSize(120, 30);
    redScore.setHorizontalAlignment(0);
    scorePanel.add(redScore);

    // Creation of a Panel to contain all the JButtons.
    buttonPanel = new JPanel();
    buttonPanel.setLayout(null);
    buttonPanel.setLocation(10, 80);
    buttonPanel.setSize(380, 80);
    totalGUI.add(buttonPanel);

    // We create a button and manipulate it using the syntax we have
    // used before. Now each button has an ActionListener which posts 
    // its action out when the button is pressed.
    blackButton = new JButton("Black Score");
    blackButton.setLocation(0, 0);
    blackButton.setSize(120, 30);
    blackButton.addActionListener(this);
    buttonPanel.add(blackButton);

    greenButton = new JButton("Green Score");
    greenButton.setLocation(130, 0);
    greenButton.setSize(120, 30);
    greenButton.addActionListener(this);
    buttonPanel.add(greenButton);

    redButton = new JButton("Red Score");
    redButton.setLocation(250, 0);
    redButton.setSize(120, 30);
    redButton.addActionListener(this);
    buttonPanel.add(redButton);

    resetButton = new JButton("Reset Score");
    resetButton.setLocation(0, 40);
    resetButton.setSize(250, 30);
    resetButton.addActionListener(this);
    buttonPanel.add(resetButton);

    totalGUI.setOpaque(true);
    return totalGUI;
}

// This is the new ActionPerformed Method.
// It catches any events with an ActionListener attached.
// Using an if statement, we can determine which button was pressed
// and change the appropriate values in our GUI.
public void actionPerformed(ActionEvent e) 
{
    if(e.getSource() == blackButton)
    {
        blackScoreAmount = blackScoreAmount + 1;
        blackScore.setText(""+blackScoreAmount);
    }
    else if(e.getSource() == greenButton)
    {
        greenScoreAmount = greenScoreAmount + 1;
        greenScore.setText(""+greenScoreAmount);
    }
    else if(e.getSource() == resetButton)
    {
        blackScoreAmount = 0;
        greenScoreAmount = 0;
        blackScore.setText(""+blackScoreAmount);
        greenScore.setText(""+greenScoreAmount);
    }
}

private static void createAndShowGUI() 
{

    JFrame.setDefaultLookAndFeelDecorated(true);
    JFrame frame = new JFrame("Black and Green");

    //Create and set up the content pane.
    Test1 demo = new Test1();
    frame.setContentPane(demo.createContentPane());

    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(280, 190);
    frame.setVisible(true);
}

public static void main(String[] args) 
{
    //Schedule a job for the event-dispatching thread:
    //creating and showing this application's GUI.
    SwingUtilities.invokeLater(new Runnable()
    {
        public void run() 
        {
            createAndShowGUI();
        }
    });
  }
}

Get rid of all the `.setLayout(null);` nonsense and use layout managers. — Andrew Thompson, Apr 19 '13 at 13:35
don't do manual sizing/locating of components, **ever**. Instead use a suitable LayoutManager — kleopatra, Apr 19 '13 at 13:35
running into problems when going into the wrong direction is a good incentive to learning :-) — kleopatra, Apr 19 '13 at 13:48

score 1 · Accepted Answer · answered Apr 19 '13 at 13:31

Your frame is 280x190:

frame.setSize(280, 190);

and you try to place a red button with an x origin of 250 and a width size of 120 -> 370. Just adjust the window frame size accordingly if you add new elements.

And for that kind of task it may be better (at least simpler) to use layouts.

Padrus · Answer 2 · 2013-04-19T14:00:54.037

0

The size of your window is "hardcoded" :

frame.setSize(280, 190);

and so are the size and positions of your buttons:

redButton.setLocation(250, 0);
redButton.setSize(120, 30);

Your putting a button with a Width of 120 at the position 250 of a frame that is 280 large so only 25% of you button can be visible.

You have to adapt the size of your frame and the position of your buttons to get it to be fully visible and pretty..

EDIT

Now, has suggested by many other repliers, if you want to improve your application, try getting rid of all the hard-coded values and use Layout Managers instead.

Here are some good explanations about them :

edited Apr 19 '13 at 14:00

answered Apr 19 '13 at 13:34

Padrus

2,013
1
24
37

2

technically correct, though not addressing the _real_ problem (which is to not use a LayoutManager) – kleopatra Apr 19 '13 at 13:36
I just tried to answer the question by keeping the code the way it was as much as possible. I know it is not the best way to go, but if the OP is following this kind of tutorials, he may not know what a LayoutManager is and he will probably learn it later. – Padrus Apr 19 '13 at 13:40
1

any tutorial that starts without LayoutManager should be thrown into the garbage can ;-) BTW, not my downvote - but you probably can get it reverted by adding a line suggesting to use a manager. – kleopatra Apr 19 '13 at 13:44
I totally agree with you ;) I'll do so, it will probably be more efficient that way instead of just throwing answers out of nowhere to novices. – Padrus Apr 19 '13 at 14:03

Button placement and location not working

2 Answers2