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

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.

1) What is a `TableLayout`? 2) For better help sooner, post an [SSCCE](http://sscce.org/). 3) Do you have a question? — Andrew Thompson, Feb 16 '12 at 04:51
TableLayout is a library that enables you to create excel-like layouts. You specify the size and number of rows and columns. I don't know how do I link the windows using CardLayout if the windows use different layouts themselves and are in separate classes. (Not to mention that probably I could have organised the program in a better way, but that's another thing) — Hurdler, Feb 16 '12 at 04:54

camickr · Accepted Answer · 2012-02-17T00:15:26.150

5

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"));
    }
}

edited Feb 17 '12 at 00:15

answered Feb 16 '12 at 05:01

camickr

321,443
19
166
288

So I can't have 3 windows in separate classes, I need to have 1 window with different "layers", right? – Hurdler Feb 16 '12 at 05:08
You can have the panels in separate classes. – camickr Feb 16 '12 at 06:02
Meantime, I was trying to make it work, but I don't see how would you make the next window consist of more elements than a single JPanel and also things like different font sizes and alignement? – Hurdler Feb 16 '12 at 06:09
You can nest panels within a parent panel so you can do whatever you want. – camickr Feb 16 '12 at 15:50
Could you possibly support me with a little example? I would be really grateful. – Hurdler Feb 16 '12 at 17:28
The tutorial has a little example. Instead of using the combo box to change cards you need to add Next/Previous buttons to each panel. – camickr Feb 16 '12 at 21:08
Yes, I worked out how to change the window content using the buttons, but still in the tutorial that's all in one class, and this is the bit that I'm struggling with... – Hurdler Feb 16 '12 at 23:01
So take the code related to creating a panel and create a separate source file for that panel. I don't see your SSCCE so I can't guess what you are doing wrong. – camickr Feb 17 '12 at 00:10
[link](http://stackoverflow.com/questions/9322474/adding-jpanels-from-other-classes-to-the-cardlayout) ;) – Hurdler Feb 17 '12 at 03:30

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

1 Answers1