Issues putting multiple panels into a JFrame

Question

This is sort of two questions on the same issue. I am working on a digital clock project that will look like this when finished:

There are 9 panels in the one frame. One panel of the TitlePanel class, 6 of the DigitPanel class, and 2 of the ColonPanel class. The problem I am having is with the DigitPanel class. I have the code written to only display one panel right now, but the digit panel wants to take up the entire JFrame when I run the program. Can someone please tell me what the problem is?

Main class:

public class DigitalTimeUI extends JFrame {

    public DigitalTimeUI() {
        JFrame clock = new JFrame("Clock");
        clock.setSize(605, 250);

        clock.setDefaultCloseOperation(EXIT_ON_CLOSE);
        clock.setLocationRelativeTo(null);
        clock.setResizable(false);

        clock.add(new TitlePanel(), BorderLayout.NORTH);
        clock.add(new DigitPane(), BorderLayout.SOUTH);

        clock.pack();
        clock.setVisible(true);
    }

    public class DigitPane extends JPanel {

        DigitPanel[] hourDigit = new DigitPanel[]{new DigitPanel(), new DigitPanel()};
        DigitPanel[] minDigit = new DigitPanel[]{new DigitPanel(), new DigitPanel()};
        DigitPanel[] secDigit = new DigitPanel[]{new DigitPanel(), new DigitPanel()};
        private String hour = pad(Calendar.getInstance().get(Calendar.HOUR));
        private String min = pad(Calendar.getInstance().get(Calendar.MINUTE));
        private String sec = pad(Calendar.getInstance().get(Calendar.SECOND));
        private char[] hours = hour.toCharArray();
        private char[] minutes = min.toCharArray();
        private char[] seconds = sec.toCharArray();

        public DigitPane() {
            JLabel label = new JLabel();
            label.setFont(new Font("Tahoma", Font.BOLD, 72));
            label.setForeground(Color.WHITE);

            JPanel digitsPanel = new JPanel(new GridBagLayout());
            digitsPanel.setSize(new Dimension(605, 100));

            digitsPanel.add(new panelPadding());

            label.setText(String.valueOf(hours[0]));
            hourDigit[0].add(label);
            digitsPanel.add(hourDigit[0]);

            digitsPanel.add(new panelPadding());

            label.setText(String.valueOf(hours[1]));
            hourDigit[1].add(label);
            digitsPanel.add(hourDigit[1]);
            digitsPanel.add(new panelPadding());

            digitsPanel.add(new ColonPanel());
            digitsPanel.add(new panelPadding());

            label.setText(String.valueOf(minutes[0]));
            minDigit[0].add(label);
            digitsPanel.add(minDigit[0]);
            digitsPanel.add(new panelPadding());

            label.setText(String.valueOf(minutes[1]));
            minDigit[1].add(label);
            digitsPanel.add(minDigit[1]);
            digitsPanel.add(new panelPadding());

            digitsPanel.add(new ColonPanel());
            digitsPanel.add(new panelPadding());

            label.setText(String.valueOf(seconds[0]));
            secDigit[0].add(label);
            digitsPanel.add(secDigit[0]);
            digitsPanel.add(new panelPadding());

            label.setText(String.valueOf(seconds[1]));
            secDigit[0].add(label);
            digitsPanel.add(secDigit[1]);
            digitsPanel.add(new panelPadding());

            this.add(digitsPanel);
        }
    }

    protected String pad(int value) {
        StringBuilder sb = new StringBuilder(String.valueOf(value));
        while (sb.length() < 2) {
            sb.insert(0, "0");
        }
        return sb.toString();
    }

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

    public class panelPadding extends JPanel {

        public panelPadding() {
            this.setPreferredSize(new Dimension(5, 80));
        }
    }
}

TitlePanel:

public class TitlePanel extends JPanel {

    JLabel title;

    public TitlePanel() {
        this.setBackground(Color.WHITE);
        this.setPreferredSize(new Dimension(605, 100));
        this.setLayout(new GridBagLayout());
        title = new JLabel("DIGITAL CLOCK");
        title.setFont(new Font("Tahoma", Font.BOLD, 72));
        title.setForeground(Color.BLACK);
        this.add(title);
    }
}

DigitPanel:

public class DigitPanel extends JPanel {

    public DigitPanel() {
        this.setLayout(new GridBagLayout());
        this.setPreferredSize(new Dimension(80, 80));
        this.setBackground(Color.BLACK);
    }
}

The title panel (for whatever reason) does not take up the whole frame when I resize it, but the digit panel does, and I have no idea why. I tried the .setLocation(), .setLayout(), .setSize(), and a few other things and nothing seems to work.

The second question that perhaps could be answered here would be, what would be the best way to create each of the Digit Panels? I was playing around with a while loop and a switch statement earlier, but didn't get anywhere because I kept running into the first problem I addressed. Thanks.

Answer 1

BorderLayout has 5 distinct areas that components can be added. By default, if you do not specify a location, the components are added to the CENTER position.

In you code you are doing this...

clock.setLayout(new BorderLayout());
clock.add(new TitlePanel())
clock.add(new DigitPanel()).setLocation(5, 125);

This is basically replacing the TitlePane with the DigitialPanel, meaning the TitlePane will not show.

Also, using setLocation is not only pointless (as the value will be discard once the panel is revalidated) but is also discouraged.

I would;

1. Add the TitlePanel to the NORTH position (clock.add(new TitlePane(), BorderLayout.NORTH)))
2. Create ANOTHER JPanel (something like digitsPanel) and set to use a GridLayout, something like (digitsPanel.setLayout(new GridLayout(1, 8))).
3. Add each DigitalPane to the digitsPanel (including the colons)
4. Add the digitsPanel to CENTER position of the clock - clock.add(digitsPanel)

The only problem with this, is each panel (on the digitsPanel) will be the same size.

If this doesn't meet your needs, I'd encourage you to using either FlowLayout or GridBagLayout if you need to more control over the layout

Updated

DigitPane[] hourDigit = new DigitPane[]{new DigitPane(), new DigitPane()};
DigitPane[] minDigit = new DigitPane[]{new DigitPane(), new DigitPane()};
DigitPane[] secDigit = new DigitPane[]{new DigitPane(), new DigitPane()};

JPanel digitsPanel = new JPanel(new GridBagLayout());
digitsPanel.add(hourDigit[0]);
digitsPanel.add(hourDigit[1]);
digitsPanel.add(new ColonPane());
digitsPanel.add(minDigit[0]);
digitsPanel.add(minDigit[1]);
digitsPanel.add(new ColonPane());
digitsPanel.add(secDigit[0]);
digitsPanel.add(secDigit[1]);