I would like to create the following GUI:
https://www.dropbox.com/s/ebm057jfevwe532/result.png?dl=0
Here is my code:
public class TypingTutor extends JFrame{
private JPanel mainPanel;
private JPanel[] keyboardPanel;
private JLabel instructionsLabel;
private JLabel noteLabel;
private JTextArea typingTextArea;
private JButton[] buttonKeysFirstRow;
private JButton[] buttonKeysSecondRow;
private JButton[] buttonKeysThirdRow;
private JButton[] buttonKeysFourthRow;
private JButton[] buttonKeysFifthRow;
//TypingTutor no-argument constructor
public TypingTutor(){
super("Typing Application");
setLayout(new BoxLayout(getContentPane(), BoxLayout.Y_AXIS));
instructionsLabel = new JLabel("Type some text using your keyboard. The keys you press " +
"will be highlighted and the text will be displayed.");
noteLabel = new JLabel("Note: Clicking the buttons with your mouse will not perform any " +
"action.");
add(instructionsLabel);
add(noteLabel);
typingTextArea = new JTextArea();
add(typingTextArea);
//each row represents each row in the keyboard
buttonKeysFirstRow = new JButton[14];
buttonKeysSecondRow = new JButton[13];
buttonKeysThirdRow = new JButton[14];
buttonKeysFourthRow = new JButton[12];
buttonKeysFifthRow = new JButton[4];
initializeKeys(1);
initializeKeys(2);
initializeKeys(3);
initializeKeys(4);
initializeKeys(5);
Box[] keyboard = new Box[5];
for(int i = 0; i < keyboard.length; i++){
keyboard[i] = Box.createHorizontalBox();
switch(i){
case 0:
for(int j = 0; j < buttonKeysFirstRow.length; j++){
keyboard[i].add(buttonKeysFirstRow[j]);
} //end for
break;
case 1:
for(int j = 0; j < buttonKeysSecondRow.length; j++){
keyboard[i].add(buttonKeysSecondRow[j]);
} //end for
break;
case 2:
for(int j = 0; j < buttonKeysThirdRow.length; j++){
keyboard[i].add(buttonKeysThirdRow[j]);
} //end for
break;
case 3:
for(int j = 0; j < buttonKeysFourthRow.length; j++){
keyboard[i].add(buttonKeysFourthRow[j]);
} //end for
break;
case 4:
for(int j = 0; j < buttonKeysFifthRow.length; j++){
keyboard[i].add(buttonKeysFifthRow[j]);
} //end for
break;
} //end switch
add(keyboard[i]);
} //end for
} //end TypingTutor no-argument constructor
//initializes button keys with their values
private void initializeKeys(int keys){
switch(keys){
case 1:
buttonKeysFirstRow[0] = new JButton("|\n°");
buttonKeysFirstRow[1] = new JButton("1");
buttonKeysFirstRow[2] = new JButton("2");
buttonKeysFirstRow[3] = new JButton("3");
buttonKeysFirstRow[4] = new JButton("4");
buttonKeysFirstRow[5] = new JButton("5");
buttonKeysFirstRow[6] = new JButton("6");
buttonKeysFirstRow[7] = new JButton("7");
buttonKeysFirstRow[8] = new JButton("8");
buttonKeysFirstRow[9] = new JButton("9");
buttonKeysFirstRow[10] = new JButton("0");
buttonKeysFirstRow[11] = new JButton("'\n?");
buttonKeysFirstRow[12] = new JButton("¿\n¡");
buttonKeysFirstRow[13] = new JButton("Backspace");
break;
case 2:
buttonKeysSecondRow[0] = new JButton(" Tab ");
buttonKeysSecondRow[1] = new JButton("Q");
buttonKeysSecondRow[2] = new JButton("W");
buttonKeysSecondRow[3] = new JButton("E");
buttonKeysSecondRow[4] = new JButton("R");
buttonKeysSecondRow[5] = new JButton("T");
buttonKeysSecondRow[6] = new JButton("Y");
buttonKeysSecondRow[7] = new JButton("U");
buttonKeysSecondRow[8] = new JButton("I");
buttonKeysSecondRow[9] = new JButton("O");
buttonKeysSecondRow[10] = new JButton("P");
buttonKeysSecondRow[11] = new JButton("´\n¨");
buttonKeysSecondRow[12] = new JButton("+\n*");
break;
case 3:
buttonKeysThirdRow[0] = new JButton(" Caps ");
buttonKeysThirdRow[1] = new JButton("A");
buttonKeysThirdRow[2] = new JButton("S");
buttonKeysThirdRow[3] = new JButton("D");
buttonKeysThirdRow[4] = new JButton("F");
buttonKeysThirdRow[5] = new JButton("G");
buttonKeysThirdRow[6] = new JButton("H");
buttonKeysThirdRow[7] = new JButton("J");
buttonKeysThirdRow[8] = new JButton("K");
buttonKeysThirdRow[9] = new JButton("L");
buttonKeysThirdRow[10] = new JButton("Ñ");
buttonKeysThirdRow[11] = new JButton("{\n[");
buttonKeysThirdRow[12] = new JButton("}\n]");
buttonKeysThirdRow[13] = new JButton(" Enter ");
break;
case 4:
buttonKeysFourthRow[0] = new JButton(" Shift ");
buttonKeysFourthRow[1] = new JButton("<\n>");
buttonKeysFourthRow[2] = new JButton("Z");
buttonKeysFourthRow[3] = new JButton("X");
buttonKeysFourthRow[4] = new JButton("C");
buttonKeysFourthRow[5] = new JButton("V");
buttonKeysFourthRow[6] = new JButton("B");
buttonKeysFourthRow[7] = new JButton("N");
buttonKeysFourthRow[8] = new JButton("M");
buttonKeysFourthRow[9] = new JButton(",\n;");
buttonKeysFourthRow[10] = new JButton(".\n:");
buttonKeysFourthRow[11] = new JButton("^");
break;
case 5:
buttonKeysFifthRow[0] = new JButton("");
buttonKeysFifthRow[1] = new JButton("<");
buttonKeysFifthRow[2] = new JButton("v");
buttonKeysFifthRow[3] = new JButton(">");
buttonKeysFifthRow[0].setMinimumSize(new Dimension(50, 10));
break;
} //end switch
} //end method initializeKeys
} //end class TypingTutor
And here is my result:
https://www.dropbox.com/s/dx99npirnl0v1wd/sample.png?dl=0
I have tried using the class javax.swing.Box and adding a main Box with Box.createVerticalBox() to the center in the JFrame BorderLayout and then adding other boxes with Box.createHorizontalBox() and I get the same result, everything is ok until I add the JButtons after the JTextArea, after that, the JButtons shrink and the JLabel aligns to the right.
Non-intuitively - you are running into a problem with the default label alignment. This comes to light when you combine labels with certain other components in a BoxLayout - see the Java tutorial on alignment in BoxLayout
Try this for your your JLabels (note the two new lines):
instructionsLabel = new JLabel("Type some text using your keyboard. The keys you press " +
"will be highlighted and the text will be displayed.");
noteLabel = new JLabel("Note: Clicking the buttons with your mouse will not perform any " +
"action.");
instructionsLabel.setAlignmentX(Component.CENTER_ALIGNMENT);
noteLabel.setAlignmentX(Component.CENTER_ALIGNMENT);
add(instructionsLabel);
add(noteLabel);
You might have to play around a bit to get the size of your spacebar right - 50 x 10 displays very small on my computer...
EDIT:
Actually - the spacebar displaying small is also an issue with how JButtons paint - see this question. In summary, you have to set the minimum and preferred size followed by the maximum size to ensure it checks the minimum size and paint correctly. So, replace your .setMinimumSize(... with the following (dimenstions 250 x 26 worked nicely on my display)
Dimension spaceDimension = new Dimension(250, 26);
buttonKeysFifthRow[0].setMinimumSize(spaceDimension);
buttonKeysFifthRow[0].setPreferredSize(spaceDimension);
buttonKeysFifthRow[0].setMaximumSize(spaceDimension);