Im having trouble trying to display graphics in my JFrame

Question

I am trying to create game with a similar layout to Wordle where there is a 5 letter scrambled word displayed and below it there are 5 separate text fields for the user to input what order the letters of the scrambled word will go in. Basically they have to unscramble the word. Sorry for the bad explanation.

Iam trying to make rectangles/squares around each of the letters of the JLabels lb1, lb2, lb3, lb4, lb5 and around each of the JTextFields tf1, tf2, tf3, tf4, tf5. I cannot figure out how to display these rectangles at all but also how they will display on top of JPanels that are already in place.

Also just a bonus here, Is there anyway to organise these labels and text fields so that i can set there exact position? i would like to have 5 of the labels on top of 5 of the text fields.

import java.awt.*;
import javax.swing.*;



public class scramble extends JFrame {

    Font mainFont = new Font("Impact", Font.BOLD, 60);
    Font smallFont = new Font("Impact", Font.BOLD, 30);

    JLabel lbWelcome;
    JLabel lb1, lb2, lb3, lb4, lb5;
    JTextField tf1, tf2, tf3, tf4, tf5;
    JFrame frame;
    GridBagConstraints gbc = new GridBagConstraints();
    


    scramble() {

      gbc.gridx = 0;
      gbc.gridy = 0;
      gbc.anchor = GridBagConstraints.PAGE_START;
      gbc.weightx = 1.0;
      gbc.weighty = 1.0;

         //mainPanel
         JPanel mainPanel = new JPanel();
         mainPanel.setLayout(new GridBagLayout());
         mainPanel.setBackground(new Color(12, 177, 237));
         mainPanel.setBorder(BorderFactory.createEmptyBorder(10, 40, 30, 40));
         
         

         //header/title
         lbWelcome = new JLabel("Scramble", SwingConstants.CENTER);
         lbWelcome.setFont(mainFont);
         lbWelcome.setToolTipText("Scramble is a game created by Glen Filson");
         gbc.gridx = 0;
         gbc.gridy = 0;
         mainPanel.add(lbWelcome, gbc);

          //input panel
          JPanel inputs = new JPanel();
          inputs.setSize(new Dimension(300,300));
          inputs.setBackground(new Color(12, 177, 200));
          inputs.setLayout(new GridBagLayout());
          gbc.gridx = 0;
          gbc.gridy = 3;
          mainPanel.add(inputs, gbc);

          gbc.insets = new Insets(30, 10,30,10);
        
          
         //JLabels main
         lb1  = new JLabel("F", SwingConstants.CENTER);
         lb1.setFont(smallFont);
         gbc.gridx = 0;
         gbc.gridy = 0;
         inputs.add(lb1, gbc);
      

         lb2  = new JLabel("I", SwingConstants.CENTER);
         lb2.setFont(smallFont);
         gbc.gridx = 1;
         gbc.gridy = 0;
         inputs.add(lb2, gbc);
        

         lb3  = new JLabel("G", SwingConstants.CENTER);
         lb3.setFont(smallFont);
         gbc.gridx = 2;
         gbc.gridy = 0;
         inputs.add(lb3, gbc);
         

         lb4  = new JLabel("H", SwingConstants.CENTER);
         lb4.setFont(smallFont);
         gbc.gridx = 3;
         gbc.gridy = 0;
         inputs.add(lb4, gbc);
        

         lb5  = new JLabel("T", SwingConstants.CENTER);
         lb5.setFont(smallFont);
         gbc.gridx = 4;
         gbc.gridy = 0;
         inputs.add(lb5, gbc);


         
         

         //JTextField main
         tf1  = new JTextField("s");
         tf1.setFont(smallFont);
         tf1.setHorizontalAlignment(JTextField.CENTER);
         gbc.gridx = 0;
         gbc.gridy = 1;
         inputs.add(tf1, gbc);
         


         tf2  = new JTextField("u");
         tf2.setFont(smallFont);
         tf2.setHorizontalAlignment(JTextField.CENTER);
         gbc.gridx = 1;
         gbc.gridy = 1;
         inputs.add(tf2, gbc);
       
         

         tf3  = new JTextField("s");
         tf3.setFont(smallFont);
         tf3.setHorizontalAlignment(JTextField.CENTER);
         gbc.gridx = 2;
         gbc.gridy = 1;
         inputs.add(tf3, gbc);
        

         tf4  = new JTextField("s");
         tf4.setFont(smallFont);
         tf4.setHorizontalAlignment(JTextField.CENTER);
         gbc.gridx = 3;
         gbc.gridy = 1;
         inputs.add(tf4, gbc);
         
         
         tf5  = new JTextField("y");
         tf5.setFont(smallFont);
         tf5.setHorizontalAlignment(JTextField.CENTER);
         gbc.gridx = 4;
         gbc.gridy = 1;
         inputs.add(tf5, gbc);

     
        
         

          
        



           
           
            //JFrame
            JFrame frame = new JFrame();      
            frame.setTitle("Scramble");
            frame.setSize(500, 650);
            
            frame.setLocationRelativeTo(null);
            frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
            frame.getContentPane().setBackground(new Color(100, 60, 100));
            frame.setVisible(true);
            frame.add(mainPanel);
           
    }

    public static void main(String[] args){
       scramble myFrame = new scramble();
      
     

}
public class graphicsPanel extends JPanel {
   public void paint(Graphics g ){
      
      Graphics g2d = (Graphics2D) g;

      g2d.drawRect(250,325,300,300);

   }



}
}

Answer 1

There are solutions to everything you asked. So let's see from where to take it.

1. you can add a border to any JComponent and it's subclasses. Just use setBorder() .
2. To have a JLabel with rectangles around each of the letters, you probably are better off not using a JLabel at all. Subclass JComponent, add a String property so you know which text to render, then override the paintComponent() method. All you need is to loop over the string's characters, calculate the character size via the GraphicsContext and the Font, add space for your box. Then draw the box using g.drawRect() , finally g.drawString() .
3. To organize the position use LayoutMangers. GridBagLayout is the most powerful one and will do anything you require. Check out the nice tutorial .