How will I change the contents of the panel with a click of a button in GUI?

Question

Phew. I've been stuck for so long in this question. I'm doing a GUI program simulating a Pop Quiz. But I don't know what the codes to put when I want my program to be like this...

And when I click the start button, the panel should be like this...

So far, this is what I have for the start up menu...

public static void main (String []args){
    JFrame f = new JFrame("Pop Quiz");
    f.setSize(400,300);
    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    f.setLayout(null);
    f.setResizable(false);

    JPanel p1 = new JPanel();
    p1.setSize(400,100);
    p1.setLocation(0,0);
    p1.setLayout(new GridLayout(3,1));
    f.add(p1);

    JLabel l1 = new JLabel("Welcome to POP Quiz!");
    p1.add(l1);

    JLabel l2 = new JLabel("Enter your name:");
    p1.add(l2);

    final JTextField name = new JTextField ();
    p1.add(name);

    JPanel p2 = new JPanel();
    p2.setSize(400,50);
    p2.setLocation(0,225);
    f.add(p2);

    JButton start = new JButton ("Start");
    p2.add(start);

    start.addActionListener(new ActionListener(){
         public void actionPerformed(ActionEvent e){
             String player = name.getText();
             //what should be added here to change the contents of the panel?
         }
    });

    f.show();
}

And for the questions...

public static void main(String[] args){
    JFrame f = new JFrame("Pop Quiz");
    f.setSize(400,300);
    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    f.setLayout(null);
    f.setResizable(false);

    JPanel p1 = new JPanel();
    p1.setSize(400,100);
    p1.setBackground(Color.PINK);
    f.add(p1);

    JLabel question = new JLabel();
    question.setText("In computers, what is the smallest and basic unit of information storage?");
    p1.add(question);

    JPanel p2 = new JPanel();
    p2.setSize(400,175);
    p2.setLocation(0,100);
    p2.setLayout(new GridLayout(2,4));
    f.add(p2);

    JButton a = new JButton("a. Bit");
    p2.add(a);

    JButton b = new JButton("b. Byte");
    p2.add(b);

    JButton c = new JButton("c. Data");
    p2.add(c);        

    JButton d = new JButton("d. Newton");
    p2.add(d);        

    f.show();
}

I anyone could help, I would really appreciate it. Thanks in advance! Have a nice day! :)

Answer 1

Steps to achive this:
1.Create a main panel and add to JFrame
2. Add the contents to a welcomePanel in a main JPanel.
3. Once the user presses "start" button in the welcomePanel. call removeAll() on the main Container.
4.Add new contents in a contentPanel in main JPanel and call revalidate() which will update main.

Note: You do not need a seperate instance of the jframe for this

Answer 2

Try this.. 


   public class test {
    public static void main(String[] args) {
        final JFrame f = new JFrame("Pop Quiz");
        f.setSize(400, 300);
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setLayout(null);
        f.setResizable(false);

        final JPanel p1 = new JPanel();
        p1.setSize(400, 100);
        p1.setLocation(0, 0);
        p1.setLayout(new GridLayout(3, 1));
        f.add(p1);

        JLabel l1 = new JLabel("Welcome to POP Quiz!");
        p1.add(l1);

        JLabel l2 = new JLabel("Enter your name:");
        p1.add(l2);

        final JTextField name = new JTextField();
        p1.add(name);

        final JPanel p2 = new JPanel();
        p2.setSize(400, 50);
        p2.setLocation(0, 225);
        f.add(p2);

        JButton start = new JButton("Start");
        p2.add(start);

        start.addActionListener(new ActionListener() {

            public void actionPerformed(ActionEvent e) {
                String player = name.getText();
               p1.setVisible(false);
               p2.setVisible(false);
                JPanel testPanel = new JPanel();
                testPanel.setSize(400, 100);
                testPanel.setBackground(Color.PINK);
                f.add(testPanel);

                JLabel question = new JLabel();
                question.setText("<html>In computers, what is the smallest and basic unit<br/> of information storage?</html>");
                testPanel.add(question);

                JPanel p2 = new JPanel();
                p2.setSize(400, 175);
                p2.setLocation(0, 100);
                p2.setLayout(new GridLayout(2, 4));
                f.add(p2);

                JButton a = new JButton("a. Bit");
                p2.add(a);

                JButton b = new JButton("b. Byte");
                p2.add(b);

                JButton c = new JButton("c. Data");
                p2.add(c);

                JButton d = new JButton("d. Newton");
                p2.add(d);

                f.show();
            }
        });

        f.show();
    }
}

Answer 3

Use a CardLayout. As shown here.

Tips

Layouts

f.setLayout(null);

Use Layouts! I cannot stress this enough. Layouts might seem complicated, but they are the only workable solution to laying out complex groups of components in an GUI intended to be used on different platforms (PLAFs, screen resolutions..).

Controls

JButton a = new JButton("a. Bit");
p2.add(a);

JButton b = new JButton("b. Byte");
// ..

Given the nature of the strings used for the buttons, it seems they might best be a JComboBox, a JList or buttons in a ButtonGroup.

Deprecated methods

f.show();

This method was deprecated, your compiler should be warning you that it is deprecated or that there are further warnings that are being ignored. Look into such warnings, fix them. Methods are deprecated for a reason.

Answer 4

Try f.getContentPane().add(panel);