Only one component shows up in JFrame

As an improvement to my encryption project I decided to make a little GUI. However, when I run the program, only the top element shows up on the screen and it appears to obscure the others, though I have no way of checking. Does anyone know why?

Below is my code in its entirety besides e() and d() because those simply encrypt a string and have nothing to do with a GUI. I would also like a way to speed it up as much as possible without editing the encryption, just to make it as great as possbile.

@SuppressWarnings("serial")
public class EncDecExample extends JFrame implements ActionListener {
    final static JPanel top = new JPanel();
    final static JPanel mid = new JPanel();
    final static JPanel bot = new JPanel();
    final static JTextField in = new JTextField(10);
    final static JTextField out = new JTextField(10);
    final static JButton enc = new JButton("Encrypt");
    final static JButton dec = new JButton("Decrypt");
    final static JFrame f = new JFrame("Encryption/decryption");

    public static void main(String[] args) {
//        EncDec.exampleImplement();

        f.setSize(500, 500);
        f.setResizable(false);
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        out.setEditable(false);
        out.setText("Hello");
        in.setVisible(true);
        out.setVisible(true);
        enc.setVisible(true);
        dec.setVisible(true);
        top.add(in);
        mid.add(enc);
        mid.add(dec);
        bot.add(out);
        f.add(top);
        f.add(mid);
        f.add(bot);
        f.setVisible(true);
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        if (e.getSource() == enc && !in.getText().equalsIgnoreCase("")) {
            out.setText(EncDec.e(in.getText(), 5));
        }
        else if(e.getSource() == dec && !in.getText().equalsIgnoreCase("")) {
            out.setText(EncDec.d(in.getText()));
        }
    }
}

Solution 1:

The content pane of a JFrame has a BorderLayout. If you place a component in a BL with no constraints it ends up in the CENTER. The center can only display one component.

For an immediate effect, I suggest:

f.add(top, BorderLayout.PAGE_START);
f.add(mid);
f.add(bot, BorderLayout.PAGE_END);

Other points.

1. Take out f.setSize(500, 500); and call pack() immediately before setVisible(true)
2. For a better way to end the GUI, change f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); to f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
3. in.setVisible(true); Except for the frame itself, take these out. A component automatically becomes visible when it is added to a top level container and that container is itself made visible.
4. Change
   public class EncDecExample extends JFrame
   to
   public class EncDecExample
   This code keeps a reference to a frame, and that is the right way to go.