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: enter image description here

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?

`public class Frame extends JFrame{` Don't extend frame, and when you make a custom class, give it a descriptive and sensible name that is not the same as a J2SE class. — Andrew Thompson, Dec 11 '12 at 13:21
Id recommend the [GridBagLayout](http://docs.oracle.com/javase/tutorial/uiswing/layout/gridbag.html) for this. — David Kroukamp, Dec 11 '12 at 16:13
Also consider [MVC](http://stackoverflow.com/a/3072979/230513). — trashgod, Dec 11 '12 at 16:20

score 2 · Answer 1 · answered Dec 11 '12 at 14:41

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.

score 1 · Answer 2 · answered Dec 11 '12 at 12:51

1

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

answered Dec 11 '12 at 12:51

keuleJ

3,418
4
30
51

Most things are easy with MiGLayout. ;) – brimborium Dec 11 '12 at 13:32

Catalina Island · Answer 3 · 2012-12-11T13:50:18.563

1

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);
...

edited Dec 11 '12 at 13:50

answered Dec 11 '12 at 13:30

Catalina Island

7,027
2
23
42

still, `JTextArea` is inactive. I cant enter text in it – An SO User Dec 11 '12 at 13:38

score 0 · Accepted Answer · answered Dec 11 '12 at 20:03

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.

enter image description here

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.

Ha! So you are the one user of GridBagLayout who actually get's it to do what you want! Nice to meet you. :-) — keuleJ, Dec 11 '12 at 20:11
@keuleJ `GridBagLayout` is awesome...most of the time. After 12 years I think I'm beginning to understand it ;) — MadProgrammer, Dec 11 '12 at 20:24
@MadProgrammer I am just a beginner. I till tried my best. Will take time to become `mad` I am still `sane` :) — An SO User, Dec 18 '12 at 16:29

GUI becomes untidy

4 Answers4