Adding JComponent to JPanel at runtime with IntelliJ GUI Designer

Question

I have initialized my own JPanel inside the GUI Designer's JPanel but I still can't seem to add this JTextField to my newly created JPanel when the button is clicked. I am getting no errors, have tried revalidating, validating, repainting and more. I even set the layout to my panel as a BoxLayout as suggested from another user but that still didn't work.

fieldsPanel is created using the GUI Designer, but I try to override it.

panel is my own code that I want to add to fieldsPanel .

public class Form extends JFrame {

private JPanel rootPanel;
private JPanel fieldsPanel;
private JPanel panel;

public Form() {
    fieldsPanel = new JPanel();
    panel = new JPanel();
    panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));

    setContentPane(rootPanel);

    pack();

    addFieldButton.addActionListener(new ActionListener() {
        @Override
        public void actionPerformed(ActionEvent e) {
            JTextField skuField = new JTextField();
            panel.add(skuField);
            fieldsPanel.add(panel);
            pack();
            repaint();
        }
    });

    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    setVisible(true);
}

Answer 1

First a comment on GUI designers. GUI designers are great for RAD and for someone who can code, but with little experience in GUI devlopment that needs to do a once-off GUI project. In all other cases and perhaps even in the last mentioned case, it's a better long-term strategy to learn how to do GUI development using only code and not a designer tool such as those found in NetBeans and IntelliJ. The main reason is that it hides things from the developer - so when something goes wrong you can't see where the problem lies and seeing is the first (and most vital) step for debugging. That's why developers spend hours implementing log files and stepping through programs with debuggers. Having said that, onto the issue:

IntelliJ uses XML to generate the Java code for you. The XML is built behind the scenes when you use the designer tool. When you run your program, there is a method call

$$$setupUI$$$(MainView.java)

that creates the Java code (MainView extends JDialog in this case). If you want to manually initialise an item, the correct way to do it is to check the box in the designer tool which says Custom Create

When this box is checked, a method is created in your code called createUIComponents. In this method you can then add your custom creation code, for example:

    private void createUIComponents() {
    // TODO: place custom component creation code here
     fieldsPanel = new JPanel();
     panel = new JPanel();
}

So what you must remember when working with designers is you have to play by their rules. Use the provided functionality. One final note, that createUIComponents method gets called the moment this object comes into scope - no sooner and no later than immediately.

If you follow this path then your example needs to change into this:

    public class Form extends JFrame {

private JPanel rootPanel;
private JPanel fieldsPanel;
private JPanel panel;

public Form() {

    panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));
    setContentPane(rootPanel);
    pack();

    addFieldButton.addActionListener(new ActionListener() {
        @Override
        public void actionPerformed(ActionEvent e) {
            JTextField skuField = new JTextField();
            panel.add(skuField);
            fieldsPanel.add(panel);
            pack();
            repaint();
        }
    });

    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);    
    setVisible(true);
}

private void createUIComponents() {
        // TODO: place custom component creation code here
        fieldsPanel = new JPanel();
        panel = new JPanel();
    }