GUI becomes untidy

Question

this is my first time here.
I was writing a GUI-driven program which would allow me to perform Caesar's cipher on .txt files.
However, before I could add the ActionListeners and ChangeListeners I decided to test the GUI. Here is what I got:

Here is the code:

package implementation;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
public class Frame extends JFrame{
    public Frame(){
        super("Caesar[E]");
        this.setVisible(true);
        this.setLocationRelativeTo(null);
        /*Adding the options to GUI*/
        factor.setPreferredSize(new Dimension(30,30));
        JToolBar toolbar = new JToolBar();
        radio.add(encrypt);
        radio.add(decrypt);
        toolbar.add(encrypt);
        toolbar.add(decrypt);
        toolbar.add(factor);
        toolbar.setFloatable(false);

        /*Adding the JTextArea for input*/
        Box inputBound = Box.createHorizontalBox();
        Box inputBound_text = Box.createVerticalBox();
        Box inputBound_buttons = Box.createVerticalBox();
        inputScroll.add(input);
        inputScroll.setEnabled(true);
        input.setEditable(true);
        inputScroll.setBorder(BorderFactory.createTitledBorder("Text/File for Encryption/" +
                "Decryption"));
        inputBound_text.add(inputScroll);
        inputBound_buttons.add(openFile);
        inputBound_buttons.add(cancelFileInput);
        inputBound.add(inputBound_text);
        inputBound.add(Box.createHorizontalStrut(25));
        inputBound.add(inputBound_buttons);

        /*Adding JTextArea for output*/
        Box outputBound = Box.createHorizontalBox();
        Box outputBound_text = Box.createVerticalBox();
        Box outputBound_buttons = Box.createVerticalBox();
        outputScroll.add(output);
        output.setEditable(true);
        outputScroll.setBorder(BorderFactory.createTitledBorder("Text After Encryption" +
                "/Decryption"));
        outputBound_text.add(outputScroll);
        outputBound_buttons.add(saveFile);
        outputBound_buttons.add(send);
        outputBound.add(outputBound_text);
        outputBound.add(Box.createHorizontalStrut(25));
        outputBound.add(outputBound_buttons);
        outputBound.setSize(150, 200);

        /*Adding JButton for performing the action*/
        this.add(performAction,BorderLayout.SOUTH);

        /*Adding the components to the Frame*/
        Box outerBox = Box.createVerticalBox();
        outerBox.add(toolbar,BorderLayout.NORTH);
        outerBox.add(inputBound);
        outerBox.add(outputBound);
        this.add(outerBox);
        this.setSize(500, 700);
    }
    boolean isFileInput = false;
    boolean isEncrypt = true;
    JButton performAction = new JButton("Encrypt!");
    JButton openFile = new JButton("Open a File");
    JButton cancelFileInput = new JButton("Cancel File Input");
    JButton saveFile = new JButton("Save File");
    JButton send = new JButton("Send");
    JTextArea input = new JTextArea();
    JTextArea output = new JTextArea();
    JFileChooser chooser = new JFileChooser();
    JScrollPane inputScroll = new JScrollPane();
    JScrollPane outputScroll = new JScrollPane();
    ButtonGroup radio = new ButtonGroup();
    JRadioButton encrypt = new JRadioButton("Encrypt",true);
    JRadioButton decrypt = new JRadioButton("Decrypt",false);
    JSpinner factor = new JSpinner(new SpinnerNumberModel(1,1,26,1));

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

Can you please tell me how I can solve the problems as shown in the image?

I know I can use setPreferredSize() but how do I make sure that I enter the correct dimension without trial-and-error?

Answer 1

In situations like these, I like to divide my application into areas of responsibility. This keeps the code clean and self contained, allowing me to replace sections of it if/and when required, without adversely effect the rest of the application.

It also means that you can focus on the individual requirements of each section.

With complex layout, it's always better (IMHO) to use compounding containers with separate layout managers, it reduces the complexity and potential for strange cross over behavior.

public class BadLayout07 {

    public static void main(String[] args) {
        new BadLayout07();
    }

    public BadLayout07() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new BorderLayout());
                frame.add(new MasterPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class MasterPane extends JPanel {

        public MasterPane() {
            EncryptSettings encryptSettings = new EncryptSettings();
            InputPane inputPane = new InputPane();
            OutputPane outputPane = new OutputPane();

            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.weightx = 1;
            gbc.fill = GridBagConstraints.HORIZONTAL;

            add(encryptSettings, gbc);

            gbc.gridy++;
            gbc.weighty = 1;
            gbc.fill = gbc.BOTH;
            add(inputPane, gbc);

            gbc.gridy++;
            add(outputPane, gbc);
        }

    }

    public class EncryptSettings extends JPanel {

        private JRadioButton encrypt;
        private JRadioButton decrypt;
        private JSpinner factor;

        public EncryptSettings() {
            encrypt = new JRadioButton("Encrypt");
            decrypt = new JRadioButton("Decrypt");
            ButtonGroup bg = new ButtonGroup();
            bg.add(encrypt);
            bg.add(decrypt);

            factor = new JSpinner(new SpinnerNumberModel(new Integer(1), new Integer(1), null, new Integer(1)));

            setLayout(new FlowLayout(FlowLayout.LEFT));
            add(encrypt);
            add(decrypt);
            add(factor);
        }

    }

    public class InputPane extends JPanel {

        private JTextArea input;
        private JButton open;
        private JButton close;

        public InputPane() {
            setBorder(new TitledBorder("Source Text"));
            input = new JTextArea();
            open = new JButton("Open");
            close = new JButton("Close");

            JPanel tb = new JPanel(new FlowLayout(FlowLayout.LEFT));
            tb.add(open);
            tb.add(close);

            setLayout(new BorderLayout());
            add(tb, BorderLayout.NORTH);
            add(new JScrollPane(input));
        }

    }

    public class OutputPane extends JPanel {

        private JTextArea output;
        private JButton save;
        private JButton send;

        public OutputPane() {
            setBorder(new TitledBorder("Encrypted Text"));
            output = new JTextArea();
            output.setEditable(false);
            save = new JButton("Save");
            send = new JButton("Send");

            JPanel tb = new JPanel(new FlowLayout(FlowLayout.LEFT));
            tb.add(save);
            tb.add(send);

            setLayout(new BorderLayout());
            add(tb, BorderLayout.NORTH);
            add(new JScrollPane(output));
        }

    }

}

I've not interconnect any of the functionality, but it is a simple case of providing appropriate setters and getters as required, as well appropriate event listeners.

Answer 2

I like the SpringLayout, it is very flexible and there is very not a lot that it can't do. Especially you will not need to care about setPreferredSize anymore. Just search for it, there are enough resources out there.

SpringLayout allows you to define the size of elements relative to others - so for example, you can make sure the buttons will look the same.

Answer 3

Trial-and-error is never a good way to get the layout you want. Instead, use the JTextArea constructor that lets you say how many rows and columns you want.

JTextArea(int rows, int columns)

JTextArea will calculate a good preferred size for when you pack() the window, and you won't need setSize().

Edit: You said, "JTextArea is inactive. I can't enter text in it."

Instead of add(), use setViewportView():

inputScroll.setViewportView(input);
...
outputScroll.setViewportView(output);
...

Answer 4

I would recommend MiGLayout as LayoutManager. Things like that are easy in MiGLayout