Difficulty displaying several JTextFields and JLabels inside JPanel

Question

I'm having difficulty creating several JTextFields and JLabels in my JPanel for a hangman game I a making. I am trying to display the users input as "Letters Used" in a JLabel. I have commented the area that is not displaying below. Thanks in advance.

/*PACKAGE DECLARATION*/
package Game;


import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.*;


/************************
 * GAME MECHANICS CLASS *
 * **********************/
public class GameMechanics {


    /* STATIC DECLARATIONS */
    static JPanel jp;//panel
    static JLabel jl;//label
    static JTextField tf;//text field
    static String input = "";


    /*********************
     * USER INPUT METHOD *
     * *******************/
    public void userInput() {

        jp = new JPanel();
        jp.setLayout(new BoxLayout(jp, BoxLayout.Y_AXIS));
        jl = new JLabel("Enter a Letter");//prompt with label
        tf = new JTextField(null);//length of text field by character
        jp.add(jl);//add label to panel
        jp.add(tf);//add text field to panel


        tf.addActionListener(new ActionListener() {
        @Override
        public void actionPerformed(ActionEvent e) {

            JTextField tf = (JTextField)e.getSource();
            input = tf.getText();//get user input
            JLabel jl2 = new JLabel("Letters Used: " + input);//NOT DISPLAYING
            jp.add(jl2);//NOT DISPLAYING

            }//end actionPerformed method

        });

    }//end userInput method


    /*****************
     * WINDOW METHOD *
     * ***************/
    public void window() {

    LoadImageApp i = new LoadImageApp();//calling image class
    JFrame gameFrame = new JFrame();//declaration
    gameFrame.add(i); //adds background image to window
    i.add(jp); // adds panel containing label to background image panel
    gameFrame.setTitle("Hangman");//title of frame window
    gameFrame.setSize(850, 600);//sets size of frame
    gameFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//exit when 'x' button pressed
    gameFrame.setIconImage(new ImageIcon("Hangman-Game-grey.png").getImage());//set the frame icon to an image loaded from a file
    gameFrame.setLocationRelativeTo(null);//window centered
    gameFrame.setResizable(false);//user can not resize window
    gameFrame.setVisible(true);//display frame

  }//end window method

}//end GameMechanics class








/*PACKAGE DECLARATION*/
package Game;


/***********************
 * IMPORT DECLARATIONS *
 * *********************/
import java.awt.Graphics;
import javax.swing.ImageIcon;
import javax.swing.JPanel;


/***************
 * IMAGE CLASS *
 * *************/
public class LoadImageApp extends JPanel {

    private static final long serialVersionUID = 1L;

        private ImageIcon image;


        /***********************
         * PAINT IMAGE METHOD *
         * *********************/
        public void paintComponent (Graphics g) {

            super.paintComponent(g);
            image = new ImageIcon("hangman.png");//image name & type
            image.paintIcon(this, g, 0, 9);

        }//end paintComponent method

}//end LoadImageApp class










/*PACKAGE DECLARATION*/
package Game;


/*******************
 * GAME MAIN CLASS *
 * *****************/
public class GameMain {


    /***************
     * MAIN METHOD *
     * *************/
    public static void main (String []args) {

        GameMechanics game = new GameMechanics();//declaration
        game.userInput();//userInput call
        game.window();

    }//end main method

}//end GameMain class

Answer 1

There are a number of things about this code that won't work, and a number of things about it that are confusing.

The immediate problem is that the panel jp is created in userInput(), and has things added to it there, but it is not itself added to a frame or a window or anything. So it isn't going to display.

I recommend having all your UI "setup" code in one place -- set up the entire window, with empty labels or text fields or whatever, before the user is expected to enter anything. That way, the user doesn't have UI controls "popping up" on him, which is disconcerting since GUIs rarely work that way.

It is also then easier to make sure that the panels that are to contain your controls are all created, and the layout managers are all set, and the controls are created and placed in the correct panels with the correct layout managers, etc., before you start getting into event-driven logic.

One more caution -- any changes made to a Swing UI need to happen on the "event dispatch thread", and if you don't know what that is you need to read a tutorial or two until you figure it out.

---

On the order of code: I find it best to create a container panel, set its layout manager, then create items that will go directly inside that panel and add them. Since nesting panels is common, this can have several layers.

I'd probably put the controls you're going to have at the top in one panel, and have that panel set to the "north" portion of a borderlayout on the frame. Then I'd create another panel for the center of that borderlayout, and put anything I wanted in the stretchy portion of the frame there. So: create frame, set borderlayout (though actually it's the default), create upper panel, set layout, create upper controls and add them, add that panel to frame in the north, etc.

I find it best to create and add an action routine along with the other characteristics of that control (label, color, etc.). One of the challenges of event-driven code is that, when you write something like an action routine, you must keep in mind that the code is executed in the context of the state of the application when activated; particularly for anonymous inner classes, it requires a bit of a context shift on your part. But the most logical thing for me is to create it with the control.

I'm not sure what else you want help with the order of. Good luck.