GUI - using CardLayout for a wizard-like set of windows

StackOverflow https://stackoverflow.com/questions/9305566

Question

I've got a few windows, in a wizard-like fashion. Some of them are using standard BorderLayout, some TableLayout. If you click the Next button, the next window should appear. I read the best way to do it is to use CardLayout. But I don't know how should I "link" them together. This is the first window:

public class Identification extends JPanel implements ActionListener {

static String next = "Next";
JButton nextButton;
final static int BIG_BORDER = 75;
final static int SMALL_BORDER = 10;
final static int ELEMENTsLENGHT = 320;
final static int VERTICAL_SPACE = 10;
final static int VERTICAL_SPACE_PLUS = 25;
final static int HORIZONTAL_SPACE = 75;
final static int SPACEforELEMENT_LABEL = 50;
final static int SPACEforELEMENT_TEXT = 40;
final static int H_SPACEforBUTTON = 64;
final static int V_SPACEforBUTTON = 26;
private JTextField nameField = new JTextField();
private JTextField surnameField = new JTextField();


public Identification() {
    init();
}

public void init() {

    JLabel nameLabel = new JLabel("Please enter your name:");
    JLabel surnameLabel = new JLabel("Please enter your surname:");

    nameLabel.setForeground(Color.green);
    surnameLabel.setForeground(Color.green);
    Font labelFont = new Font("SansSerif", Font.PLAIN, 24);
    nameLabel.setFont(labelFont);
    surnameLabel.setFont(labelFont);

    nameField.addActionListener(this);
    surnameField.addActionListener(this);   

    Font TfieldFont = new Font("SansSerif", Font.PLAIN, 16);
    nameField.setFont(TfieldFont);
    surnameField.setFont(TfieldFont);

    nextButton = new JButton("NEXT");
    nextButton.setActionCommand(next);
    nextButton.addActionListener(this);
    nextButton.setToolTipText("Click this button to continue.");    

    JPanel panelButton = new JPanel();
    panelButton.add(nextButton);        

    double size[][] = {
            { BIG_BORDER, ELEMENTsLENGHT, HORIZONTAL_SPACE,
                    H_SPACEforBUTTON, SMALL_BORDER }, // Columns
            { BIG_BORDER, SPACEforELEMENT_LABEL, VERTICAL_SPACE,
                    SPACEforELEMENT_TEXT, VERTICAL_SPACE_PLUS,
                    SPACEforELEMENT_LABEL, VERTICAL_SPACE,
                    SPACEforELEMENT_TEXT, VERTICAL_SPACE_PLUS,
                    SPACEforELEMENT_LABEL, VERTICAL_SPACE,
                    V_SPACEforBUTTON, SMALL_BORDER } }; // Rows

    setLayout(new TableLayout(size));
    setBackground(Color.darkGray);      

    add(nameLabel, "1,1,1,1");
    add(nameField, "1,3,1,1");
    add(surnameLabel, "1,5,1,1");
    add(surnameField, "1,7,1,1");
    add(nextButton, "3,11,1,1");

} // end init

public static void createAndShowGUI() {
    JFrame frame = new JFrame("Identification");
    frame.getContentPane().add(new Identification());
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(550, 450);
    frame.setResizable(false);
    frame.pack();
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
}

@Override
public void actionPerformed(ActionEvent e) {

    if (e.getActionCommand().equalsIgnoreCase(next)) {
        Identification.showNextWindow();
    }
}

public static void showNextWindow() {
    // instead of println - show the next window
    System.out.println("go to the next window");
}

public static void main(String[] args) {
    java.awt.EventQueue.invokeLater(new Runnable() {
        public void run() {
            createAndShowGUI();
        }
    });
}


} // end class Id

This is the second one:

    public class NewUser extends JPanel implements ActionListener {

    static String yes = "<html><font size=\"+1\"><font color=\"#00FF00\">Yes</font></html>";
    static String no = "<html><font size=\"+1\"><font color=\"#00FF00\">No</font></html>";
    static String next = "Next";
    JRadioButton yesButton;
    JRadioButton noButton;
    JButton nextButton;
    boolean choice = false;
    boolean isNew;

    public NewUser() {
        super(new BorderLayout());
        init();
    }


    public void init() {

        yesButton = new JRadioButton(yes);
        yesButton.setOpaque(false);
        yesButton.setActionCommand(yes);
        noButton = new JRadioButton(no);
        noButton.setOpaque(false);
        noButton.setActionCommand(no);
        ButtonGroup group = new ButtonGroup();
        group.add(yesButton);
        group.add(noButton);        
        nextButton = new JButton("NEXT");
        nextButton.setActionCommand(next);
        yesButton.addActionListener(this);
        noButton.addActionListener(this);
        nextButton.addActionListener(this);     
        nextButton.setToolTipText("Click this button to continue.");

        String q = "Hello name surname,<br>Have you used this software tool before?";

        JLabel textLabel = new JLabel(
                "<html><div style=\"text-align: center;\">" + q + "</html>",
                SwingConstants.CENTER);
        textLabel.setForeground(Color.green);
        Font labelFont = new Font("SansSerif", Font.PLAIN, 30);
        textLabel.setFont(labelFont);
        textLabel.setBorder(new EmptyBorder(75, 0, 0, 0)); // top, left, //
                                                            // bottom, right
        setBackground(Color.darkGray);
        add(textLabel, BorderLayout.NORTH);

        JPanel radioPanel = new JPanel(new GridLayout(2, 1, 0, 0));     

        radioPanel.setOpaque(false);                                
        radioPanel.add(yesButton);      
        radioPanel.add(noButton);       
        radioPanel.setBackground(Color.darkGray);       
        radioPanel.setBorder(new EmptyBorder(50, 200, 125, 0));

        add(radioPanel, BorderLayout.CENTER);

        JPanel btnPanel = new JPanel();

        btnPanel.setLayout(new BoxLayout(btnPanel, BoxLayout.LINE_AXIS));
        btnPanel.setBorder(BorderFactory.createEmptyBorder(0, 10, 10, 10));
        btnPanel.add(Box.createHorizontalGlue());

        btnPanel.add(nextButton);
        btnPanel.setBackground(Color.darkGray);
        btnPanel.setAlignmentX(RIGHT_ALIGNMENT);
        add(btnPanel, BorderLayout.SOUTH);      

    } // end init

    public static void showNextWindow() {
        // instead of println - show the next window
        System.out.println("go to the next window");
    }


    public void actionPerformed(ActionEvent e) {

        if (e.getActionCommand().equalsIgnoreCase(yes)) {
            System.out.println("You clicked yes");
            isNew = false;
            yesButton.setEnabled(false);
            noButton.setEnabled(true);
            choice = true;
        } else if (e.getActionCommand().equalsIgnoreCase(no)) {
            System.out.println("You clicked no");
            isNew = true;
            noButton.setEnabled(false);
            yesButton.setEnabled(true);
            choice = true;
        } else if (e.getActionCommand().equalsIgnoreCase(next)) {
            // go to the next window
            if (choice == true) {
                 if (isNew == true) {
                     System.out.println("REGISTERING.");
                 } else {
                     System.out.println("LOGGING.");
                 }
                showNextWindow();
            } 
        }
    }

    public static void createAndShowGUI() {
        JFrame frame = new JFrame("New user?");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(new NewUser());
        frame.setSize(550, 450);
        frame.setResizable(false);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
    }

}

And the third one: 

public class Password extends JPanel implements ActionListener {

    static JTextArea passwordField;
    JLabel infoLabel;
    JLabel infoLabel2;
    static String next = "Next";
    static String copy = "Copy";
    JButton nextButton;
    JButton copyButton;
    final static int BIG_BORDER = 70;
    final static int SMALL_BORDER = 10;
    final static int ELEMENTsLENGHT = 370;
    final static int VERTICAL_SPACE = 15;
    final static int VERTICAL_SPACE_PLUS = 25;
    final static int HORIZONTAL_SPACE = 30;
    final static int SPACEforELEMENT_LABEL = 80;
    final static int SPACEforELEMENT_TEXT = 40;
    final static int H_SPACEforBUTTON = 64;
    final static int V_SPACEforBUTTON = 26;

    public Password() {
        init();
    }

    public void init() {

        String text = "This is your temporary password generated by the system:";
        String text2 = "Remember:<br>it expires in 30 seconds time.";

        JLabel infoLabel = new JLabel(
                "<html><div style=\"text-align: center;\">" + text + "</html>",
                SwingConstants.CENTER);

        JLabel infoLabel2 = new JLabel(
                "<html><div style=\"text-align: center;\">" + text2 + "</html>",
                SwingConstants.CENTER);

        infoLabel.setForeground(Color.green);
        infoLabel2.setForeground(Color.green);
        Font labelFont = new Font("SansSerif", Font.PLAIN, 24);
        infoLabel.setFont(labelFont);
        infoLabel2.setFont(labelFont);

        passwordField = new JTextArea("password1");
        passwordField.setEditable(false);   

        Font TextfieldFont = new Font("SansSerif", Font.PLAIN, 32);
        passwordField.setFont(TextfieldFont);

        nextButton = new JButton("NEXT");
        nextButton.setActionCommand(next);
        nextButton.addActionListener(this);
        nextButton.setToolTipText("Click this button to continue.");        

        copyButton = new JButton("Copy");
        copyButton.setActionCommand(copy);
        copyButton.addActionListener(this);
        copyButton.setToolTipText("Click this button to copy the password.");       

        JPanel panelButton = new JPanel();
        panelButton.add(nextButton);        

        double size[][] = {
                { BIG_BORDER, ELEMENTsLENGHT, HORIZONTAL_SPACE,
                        H_SPACEforBUTTON, SMALL_BORDER }, // Columns                

                { BIG_BORDER, SPACEforELEMENT_LABEL, VERTICAL_SPACE_PLUS,
                        SPACEforELEMENT_TEXT, VERTICAL_SPACE_PLUS,
                        SPACEforELEMENT_LABEL, VERTICAL_SPACE_PLUS,
                        VERTICAL_SPACE, VERTICAL_SPACE_PLUS,
                        V_SPACEforBUTTON, SMALL_BORDER } }; // Rows

        setLayout(new TableLayout(size));
        setBackground(Color.darkGray);      

        add(infoLabel, "1,1,1,1");
        add(passwordField, "1,3,1,1");
        add(infoLabel2, "1,5,1,1");
        add(copyButton, "3,3,1,1");
        add(nextButton, "3,9,1,1");

    } // end init()

    public static void showNextWindow() {
        // instead of println - show the next window
        System.out.println("go to the next window");    
    }


    @Override
    public void actionPerformed(ActionEvent e) {

        if (e.getActionCommand().equalsIgnoreCase(next)) {
            showNextWindow();
        }
        if (e.getActionCommand().equalsIgnoreCase(copy)) {
            passwordField.copy();
            System.out.println("copied");
        }
    }

    public static void createAndShowGUI() {
        JFrame frame = new JFrame("RandomSystemPassword");
        frame.getContentPane().add(new Password());
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(550, 450);
        frame.setResizable(false);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }


    public static void main(String[] args) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
    }
}

Sorry, for lots of code, I guess you could write it in a much better way, but I'm just new to Java... Any help will be appreciated.

Was it helpful?

Solution

But I don't know how should I "link" them together.

You need one frame with 3 panels, not 3 frames with one panel each. The content pane of the frame will use a CardLayout. Each individual panel can use whatever layout they want.

Start by reading the Swing tutorial on How to Use Card Layout for a working example. On each panel your Next/Previous buttons would need to display of the next/previous panel that should be displayed.

One way to do this is to just hard code the panel names in the ActionListener of each button.

The other approach is to use the next()/previous() method of the CardLayout class.

Edit:

For example to make card1 a separate source file you could do something like:

// JPanel card1 = new JPanel();
// card1.setName("buttons");
// card1.add(new JButton("Button 1"));
// card1.add(new JButton("Button 2"));
// card1.add(new JButton("Button 3"));
   JPanel card1 = new ButtonPanel();

And the source for ButtonPane would be something like:

public class ButtonPanel extends JPanel
{
    public ButtonPanel()
    {
        setName("buttons");
        add(new JButton("Button 1"));
        add(new JButton("Button 2"));
        add(new JButton("Button 3"));
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top