How to show on screen keyboard using swing in java for typing tutor? Which layout serves the best?

Question

The code I have so far is as follows:

import javax.swing.JFrame;
import javax.swing.JButton;
import javax.swing.JPanel;
import java.awt.GridLayout;
import java.awt.FlowLayout;

public class GUI extends JFrame
{
    private JButton button;
    private JPanel panel;
    private static final String[][] key = { { "Esc", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "PrtSc", "Insert", "Delete", "Home", "End", "PgUp", "PgDn"}, { "3\n2", "&", "é", "\"", "'", "(", "§", "è", "!", "ç", "à", ")", "-", "BkSpc", "NumLock", "/", "*", "-" }, { "Tab", "A", "Z", "E", "R", "T", "Y", "U", "I", "O", "P", "^", "$", "Enter", "7", "8", "9", "+" }, { "ShiftLock", "Q", "S", "D", "F", "G", "H", "J", "K", "L", "M", "ù", "µ", "4", "5", "6" }, { "Shift", "<", "W", "X", "C", "V", "B", "N", ",", ";", ":", "=", "Shift", "Up", "1", "2", "3", "Enter" }, { "Ctrl", "Fn", "Win", "Alt", "Space", "AltGr", "Context", "Ctrl", "Left", "Down", "Right", "0", "." } };

    public GUI()
    {
       super( "Typing Tutor" );
       setLayout( new GridLayout( key.length, 0 ) );

       for ( int row = 0; row < key.length; row++)
       {
           panel = new JPanel();
           panel.setLayout(new FlowLayout());
           for ( int column = 0; column < key[ row ].length; column++ )
           {
              button = new JButton( key[ row ][ column ] );
              panel.add( button );
           }
           add( panel );           
       }
    }
}

==================================================================

import javax.swing.JFrame;

public class GUITest extends JFrame
{
   public static void main(String[] args)
   {
    GUI gui = new GUI();
    gui.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
    gui.setSize( 1600, 250 ); 
    gui.setVisible( true );
   }
}

It shows keys in correct rows but not exactly as it is. For example enter button is not rectangular and one rowed. Any suggestions to improve it?

PS: What I am trying to do is create an typing tutor that acts as a normal text editor or better yet a program that passes keystrokes across other programs while I can still see visual keyboard on screen for reference (and feedback). Just to make sure that I don't have to look at real keyboard and can always practice touch typing. If you have beter suggestions/alternatives or know if its possible or not, do let me know.

Answer 1

• arrays for private JPanel[] panel; and private JButton[][] button; aren't initalized

• KeyBoard isn't nice designated, have to put there a few JButtons that aren't visible but occupating or split layout to three separated JPanels (plus one more over for ESC - F12 - Pause/Break)

• remove private JPanel[] panel; is useless put there JButtons directly to JPanel, this make me sence for Borders, but then you would need to create and separate array with tha same numbers of members as for private JButton[][] button; , there you can hold Border as child array with four number (i, i, i, i) fo one member

quick fix, required only minor changes as are descibed in my last two points

import java.awt.EventQueue;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class GUI extends JFrame {

    private JFrame frame = new JFrame("Typing Tutor");
    private JPanel parent = new JPanel(new GridLayout(0, 1));
    private JPanel[] panel;
    private JButton[][] button;
    private static final String[][] key = {
        {"Esc", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9",
            "F10", "F11", "F12", "PrtSc", "Insert", "Delete", "Home",
            "End", "PgUp", "PgDn"}, {"3\n2", "&", "é", "\"", "'", "(",
            "§", "è", "!", "ç", "à", ")", "-", "BkSpc", "NumLock", "/",
            "*", "-"}, {"Tab", "A", "Z", "E", "R", "T", "Y", "U", "I",
            "O", "P", "^", "$", "Enter", "7", "8", "9", "+"}, {"ShiftLock",
            "Q", "S", "D", "F", "G", "H", "J", "K", "L", "M", "ù", "µ",
            "4", "5", "6"}, {"Shift", "<", "W", "X", "C", "V", "B",
            "N", ",", ";", ":", "=", "Shift", "Up", "1", "2", "3", "Enter"},
        {"Ctrl", "Fn", "Win", "Alt", "Space", "AltGr", "Context",
            "Ctrl", "Left", "Down", "Right", "0", "."}};

    public GUI() {
        super("Typing Tutor");
        panel = new JPanel[6];
        for (int row = 0; row < key.length; row++) {
            panel[row] = new JPanel();
            button = new JButton[20][20];
            for (int column = 0; column < key[row].length; column++) {
                button[row][column] = new JButton(key[row][column]);
                button[row][column].putClientProperty("column", column);
                button[row][column].putClientProperty("row", row);
                button[row][column].putClientProperty("key", key[row][column]);
                button[row][column].addActionListener(new MyActionListener());
                panel[row].add(button[row][column]);
            }
            parent.add(panel[row]);
        }
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        add(parent);
        pack();
        setVisible(true);
    }

    public class MyActionListener implements ActionListener {

        @Override
        public void actionPerformed(ActionEvent e) {
            JButton btn = (JButton) e.getSource();
            System.out.println("clicked column --> " + btn.getClientProperty("column")
                    + ", row --> " + btn.getClientProperty("row")
                    + ", Key Typed --> " + btn.getClientProperty("key"));
        }
    }

    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                GUI guI = new GUI();
            }
        });
    }
}