Change dimensions of JTextField

Question

Hello fine people of StackOverflow. I have run into a problem that I can't seem to fix. Before I begin I should give a warning that although I'm not a beginner, I'm not incredibly advanced either, so please if you can word your answers appropriately that would be great.

I can't control the dimensions of the JTextFields and I've used every way I know. Here's the code:

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

import javax.swing.BorderFactory;
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JRadioButton;
import javax.swing.JTextField;

public class ShapeCalculatorView extends JFrame {

public static void main(String[] args) {

}

public ShapeCalculatorView() {
    init();
}

public void init() {
    setVisible(true);
    setTitle("Shape Calculator");
    setSize(500, 500);
    //
    GridLayout bodyLayout = new GridLayout(1, 2);
    GridLayout answerLayout = new GridLayout(2, 2);

    JPanel mainPanel = new JPanel();
    mainPanel.setLayout(new BorderLayout());
    mainPanel.setBorder(BorderFactory.createLineBorder(Color.red));
    //
    JPanel bodyPanel = new JPanel();
    bodyPanel.setLayout(bodyLayout);
    bodyPanel.setBorder(BorderFactory.createLineBorder(Color.blue));
    mainPanel.add(bodyPanel, BorderLayout.PAGE_START);

    JPanel resultPanel = new JPanel();
    resultPanel.setLayout(bodyLayout);
    mainPanel.add(resultPanel, BorderLayout.PAGE_END);

    JPanel buttonPanel = new JPanel();
    buttonPanel.setLayout(new BoxLayout(buttonPanel, BoxLayout.Y_AXIS));
    bodyPanel.add(buttonPanel);
    JRadioButton buttonOne = new JRadioButton("Button 1");
    JRadioButton buttonTwo = new JRadioButton("Button 2");
    JRadioButton buttonThree = new JRadioButton("Button 3");
    JRadioButton buttonFour = new JRadioButton("Button 4");
    JRadioButton buttonFive = new JRadioButton("Button 5");
    buttonPanel.add(buttonOne);
    buttonPanel.add(buttonTwo);
    buttonPanel.add(buttonThree);
    buttonPanel.add(buttonFour);
    buttonPanel.add(buttonFive);

    String textLength = "Length: ";
    String textWidth = "Width: ";

    JPanel inputPanel = new JPanel();
    inputPanel.setLayout(answerLayout);
    bodyPanel.add(inputPanel);
    JTextField fieldOne = new JTextField();
    JTextField fieldTwo = new JTextField();
    fieldOne.setPreferredSize(new Dimension(100, 2));
    inputPanel.add(new JLabel(textLength));
    inputPanel.add(fieldOne);
    inputPanel.add(new JLabel(textWidth));
    inputPanel.add(fieldTwo);

    JPanel calcPanel = new JPanel();
    resultPanel.add(calcPanel);
    JButton calcButton = new JButton("CALCULATE");
    calcPanel.add(calcButton);

    JPanel answerPanel = new JPanel();
    answerPanel.setLayout(answerLayout);
    resultPanel.add(answerPanel);
    answerPanel.add(new JLabel("Perimeter: "));
    answerPanel.add(new JLabel("Area: "));
    long perimeter = 5;
    long area;

    add(mainPanel);
    pack();
}

}
public class ShapeCalculatorApp {

public static void main(String[] args) {
    ShapeCalculatorView view = new ShapeCalculatorView();

}

}

If you were to run this you would see that everything is fine except that the text fields are pretty high, and I'd like them to be a bit smaller. I've already tried setPreferredSize and that didn't work, I suspect it could be because I am using a GridLayout and as such the two textfields use up all the space, so setPreferredSize won't work. I also thought that maybe I could set the amount of rows to 3, and then in the second row just put 2 empty JLabels, but that seems a bit of a primitive way of dealing with this. Is there an efficient way of doing this?

EDIT: If it matters, I am able to control the width of the textfields with setPreferredSize, just not the height.

Answer 1

Set your layout manager to null. Then you can use the .setSize property to set the size of your components / jTextfields.

this.setLayout(null);         //set this in your constructor

jTextField1.setSize(20, 200); // whatever you prefer

Answer 2

Although I don't like this answer, I felt I should put it here for anyone who stumbles into the same problem I had. A way to solve this is to change the amount of rows in the GridLayout and add empty JLabels where you see fit. Here it's a matter of preference and where you want the JTextFields and how small you want them. Piece of code that I actually edited:

GridLayout gridFiveTwo = new GridLayout(5, 2);

And then the part whee I put in the JLabels.

    JPanel inputPanel = new JPanel();
    inputPanel.setLayout(gridFiveTwo);
    bodyPanel.add(inputPanel);
    JTextField fieldOne = new JTextField();
    JTextField fieldTwo = new JTextField();
    inputPanel.add(new JLabel(textLength));
    inputPanel.add(fieldOne);
    inputPanel.add(new JLabel(textWidth));
    inputPanel.add(fieldTwo);
    inputPanel.add(new JLabel(""));
    inputPanel.add(new JLabel(""));
    inputPanel.add(new JLabel(""));
    inputPanel.add(new JLabel(""));
    inputPanel.add(new JLabel(""));
    inputPanel.add(new JLabel(""));

I don't like this answer, and hopefully someone knows a better way of doing this, but in the meantime this is what I'm using.

Answer 3

Don't add a JTextField to a GridLayout directly as this will force the component to stretch to fill the cell. Instead either put it into a JPanel, or use nested layouts to achieve your GUI.

For instance (a terrible example, but one that uses your code):

  final JTextField fieldOne = new JTextField(10);
  final JTextField fieldTwo = new JTextField(10);
  // fieldOne.setPreferredSize(new Dimension(100, 2));
  inputPanel.add(new JLabel(textLength));
  inputPanel.add(new JPanel() {
     {
        add(fieldOne);
        setBorder(BorderFactory.createTitledBorder("Field 1"));
     }
  });
  inputPanel.add(new JLabel(textWidth));
  inputPanel.add(new JPanel() {
     {
        add(fieldTwo);
        setBorder(BorderFactory.createTitledBorder("Field 2"));
     }
  });