katie1245
katie1245

Reputation: 1137

How to Layout these components on JPanel?

I made a small GUI application that only has the presentation tier right now. It constructs the basic GUI, (but no logic added yet). I'm having trouble with laying out controls/components such as text fields and Buttons.

Here's the code:

Main.java

public class Main {

    public static void main(String[] args) {
    // Make a new Client (TempConverter application)
    Client client = new Client();
    }

}

Client.java

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;

public class Client extends JFrame{

    private JPanel panel;
    private JTextField inputTextBox;
    private JTextField outputTextBox;
    private JButton convertButton;

    public Client(){
        panel = new JPanel();
        inputTextBox = new JTextField(6);
        outputTextBox = new JTextField(6);
        convertButton = new JButton("Convert!");
        ConstructGUI();
    }

    private void ConstructGUI(){
        this.setTitle("Temerature Converter");
        this.setSize(300, 400);
        PanelLayout();
        this.setVisible(true);
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
    }

    private void PanelLayout(){
        this.add(panel);
        panel.add(inputTextBox);
        panel.add(outputTextBox);
        panel.add(convertButton);
    }

}

The components all appear next to each other, and it's not that I expected otherwise, but no matter what layout I tried (unless I did it wrong), it doesn't change.

Do I have to override something maybe?

Upvotes: 1

Views: 231

Answers (2)

MadProgrammer
MadProgrammer

Reputation: 347204

You could use a GridBagLayout or GridLayout depending on what you want to achieve...

GridBagLayout

public class Client extends JFrame {

    private JPanel panel;
    private JTextField inputTextBox;
    private JTextField outputTextBox;
    private JButton convertButton;

    public Client() {
        panel = new JPanel(new GridBagLayout());
        inputTextBox = new JTextField(6);
        outputTextBox = new JTextField(6);
        convertButton = new JButton("Convert!");
        ConstructGUI();
    }

    private void ConstructGUI() {
        this.setTitle("Temerature Converter");
        PanelLayout();
    }

    private void PanelLayout() {
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridwidth = GridBagConstraints.REMAINDER;
        this.add(panel);
        panel.add(inputTextBox, gbc);
        panel.add(outputTextBox, gbc);
        panel.add(convertButton, gbc);
    }

}

Have a look at Laying Out Components Within a Container for more details.

I'd also discourage you from extending directly from JFrame, but instead, start by extending from JPanel instead, it will decouple your code and provide better re-usability, among other things

Upvotes: 1

rdonuk
rdonuk

Reputation: 3956

You can use BoxLayout to have them stacked on top of each other.

private void PanelLayout(){
    this.add(panel);

    //next three lines aligning the components horizontally
    inputTextBox.setAlignmentX(Component.CENTER_ALIGNMENT);
    outputTextBox.setAlignmentX(Component.CENTER_ALIGNMENT);
    convertButton.setAlignmentX(Component.CENTER_ALIGNMENT);
    //aligning horizontally end. If you don't want the align them horizontally just remove these three lines.

    panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));
    panel.add(Box.createVerticalGlue());//remove this line if you don't want to center them vertically
    panel.add(inputTextBox);
    panel.add(outputTextBox);
    panel.add(convertButton);
    panel.add(Box.createVerticalGlue());//remove this line if you don't want to center them vertically
}

Upvotes: 1

Related Questions