Home > Back-end >  How can i change the button colour on Virtual Keyboard Java using KeyListener library?
How can i change the button colour on Virtual Keyboard Java using KeyListener library?

Time:11-30

how can i change the button color(for highlight it) after i press my keyboard keys? like the label said "Type some text using your keyboard.The keys you press will be highlighted and text will be displayed."

here is my code, what should i add in the code so when i press key on my keyboard, the button on the JFrame will change color? thanks like example, on my keyboard i press A, and on the JFrame button A will change color from gray to red(example) after i release it, the color(red) changing back to default color(gray) i set

import java.awt.Color;
import java.awt.Container;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextArea;

/**
 *
 * @author frint6
 */
public class GUITyping extends JFrame implements KeyListener {
    private final JLabel lFp = new JLabel("Type some text using your keyboard. The keys you press will be highlighted and the text will be displayed.");
    private final JLabel lSp = new JLabel("Note: Clicking the buttons with your mouse will not perform any action.");
    private final JTextArea taL = new JTextArea();
    private final String firstRow[] = {"~","1","2","3","4","5","6","7","8","9","0","-"," ","Backspace"};
    private final String secondRow[] = {"Tab","Q","W","E","R","T","Y","U","I","O","P","[","]","\\"};
    private final String thirdRow[] = {"Caps","A","S","D","F","G","H","J","K","L",":","\"","Enter"};
    private final String fourthRow[] = {"Shift","Z","X","C","V","B","N","M",",",".","?","^"};
    private final String fifthRow[] = {"       ","<","\\/",">"};
    private JButton first[];
    private JButton second[];
    private JButton third[];
    private JButton fourth[];
    private JButton fifth[];
    private final Container cont = getContentPane();
    
    GUITyping(){
        super("Typing Application");
        initWidget();
    }
    
    private void initWidget(){
        cont.setLayout(null);
        lFp.setBounds(10, 0, 600, 30);
        lSp.setBounds(10, 20, 400, 30);
        taL.setBounds(10,50,765,230);
        taL.setBorder(BorderFactory.createLoweredBevelBorder());
        cont.add(lFp);
        cont.add(lSp);
        cont.add(taL);
        
        first = new JButton[firstRow.length];
        for(int i = 0; i < firstRow.length;   i){
            JButton a = new JButton(firstRow[i]);
            first[i] = a;
            first[i].addKeyListener(this);
            first[i].setBorder(BorderFactory.createRaisedBevelBorder());
            first[i].setBackground(Color.LIGHT_GRAY);
            cont.add(first[i]);
        }
        
        second = new JButton[secondRow.length];
        for(int i = 0; i < secondRow.length;   i){
            JButton b = new JButton(secondRow[i]);
            second[i] = b;
            second[i].addKeyListener(this);
            second[i].setBorder(BorderFactory.createRaisedBevelBorder());
            second[i].setBackground(Color.LIGHT_GRAY);
            cont.add(second[i]);
        }
        
        third = new JButton[thirdRow.length];
        for(int i = 0; i < thirdRow.length;   i){
            JButton c = new JButton(thirdRow[i]);
            third[i] = c;
            third[i].addKeyListener(this);
            third[i].setBorder(BorderFactory.createRaisedBevelBorder());
            third[i].setBackground(Color.LIGHT_GRAY);
            cont.add(third[i]);
        }
        
        fourth = new JButton[fourthRow.length];
        for(int i = 0; i < fourthRow.length;   i){
            JButton d = new JButton(fourthRow[i]);
            fourth[i] = d;
            fourth[i].addKeyListener(this);
            fourth[i].setBorder(BorderFactory.createRaisedBevelBorder());
            fourth[i].setBackground(Color.LIGHT_GRAY);
            cont.add(fourth[i]);
        }
        
        fifth = new JButton[fifthRow.length];
        for(int i = 0; i < fifthRow.length;   i){
            JButton e = new JButton(fifthRow[i]);
            fifth[i] = e;
            fifth[i].addKeyListener(this);
            fifth[i].setBorder(BorderFactory.createRaisedBevelBorder());
            fifth[i].setBackground(Color.LIGHT_GRAY);
            cont.add(fifth[i]);
        }
        
        first[0].setBounds(10, 300, 45, 45);
        first[1].setBounds(60, 300, 45, 45);
        first[2].setBounds(110, 300, 45, 45);
        first[3].setBounds(160, 300, 45, 45);
        first[4].setBounds(210, 300, 45, 45);
        first[5].setBounds(260, 300, 45, 45);
        first[6].setBounds(310, 300, 45, 45);
        first[7].setBounds(360, 300, 45, 45);
        first[8].setBounds(410, 300, 45, 45);
        first[9].setBounds(460, 300, 45, 45);
        first[10].setBounds(510, 300, 45, 45);
        first[11].setBounds(560, 300, 45, 45);
        first[12].setBounds(610, 300, 45, 45);
        first[13].setBounds(660, 300, 115, 45);
        
        second[0].setBounds(10, 350, 75, 45);
        second[1].setBounds(90, 350, 45, 45);
        second[2].setBounds(140, 350, 46, 45);
        second[3].setBounds(190, 350, 45, 45);
        second[4].setBounds(240, 350, 45, 45);
        second[5].setBounds(290, 350, 45, 45);
        second[6].setBounds(340, 350, 45, 45);
        second[7].setBounds(390, 350, 45, 45);
        second[8].setBounds(440, 350, 45, 45);
        second[9].setBounds(490, 350, 45, 45);
        second[10].setBounds(540, 350, 45, 45);
        second[11].setBounds(590, 350, 45, 45);
        second[12].setBounds(640, 350, 45, 45);
        second[13].setBounds(690, 350, 85, 45);
        
        third[0].setBounds(10, 400, 75, 45);
        third[1].setBounds(90, 400, 45, 45);
        third[2].setBounds(140, 400, 46, 45);
        third[3].setBounds(190, 400, 45, 45);
        third[4].setBounds(240, 400, 45, 45);
        third[5].setBounds(290, 400, 45, 45);
        third[6].setBounds(340, 400, 45, 45);
        third[7].setBounds(390, 400, 45, 45);
        third[8].setBounds(440, 400, 45, 45);
        third[9].setBounds(490, 400, 45, 45);
        third[10].setBounds(540, 400, 45, 45);
        third[11].setBounds(590, 400, 45, 45);
        third[12].setBounds(640, 400, 135, 45);
        
        fourth[0].setBounds(10, 450, 105, 45);
        fourth[1].setBounds(120, 450, 45, 45);
        fourth[2].setBounds(170, 450, 45, 45);
        fourth[3].setBounds(220, 450, 45, 45);
        fourth[4].setBounds(270, 450, 45, 45);
        fourth[5].setBounds(320, 450, 45, 45);
        fourth[6].setBounds(370, 450, 45, 45);
        fourth[7].setBounds(420, 450, 45, 45);
        fourth[8].setBounds(470, 450, 45, 45);
        fourth[9].setBounds(520, 450, 45, 45);
        fourth[10].setBounds(570, 450, 45, 45);
        fourth[11].setBounds(680, 450, 45, 45);
        
        fifth[0].setBounds(215, 500, 305, 45);
        fifth[1].setBounds(630, 500, 45, 45);
        fifth[2].setBounds(680, 500, 45, 45);
        fifth[3].setBounds(730, 500, 45, 45);
    }
    
    @Override
    public void keyTyped(KeyEvent e) {
        
    }

    @Override
    public void keyPressed(KeyEvent e) {
        
    }

    @Override
    public void keyReleased(KeyEvent e) {
        
    }
    
    private class Actions implements ActionListener {

        @Override
        public void actionPerformed(ActionEvent e) {
            
        }
    }
}

CodePudding user response:

Normally you click on the button. When the button is pressed the background of the button is painted in the selected state. When you release the mouse button the Action is invoked, and the button is repainted in its normal state.

For just using the keyboard you will need to manually set the state of the ButtonModel so the button can be painted correctly. This is done by adding Key Bindings to the button to handle the "pressed/released" state:

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

public class CalculatorPanel2 extends JPanel
{
    private JTextField display;

    public CalculatorPanel2()
    {
        Action pressedAction = new AbstractAction()
        {
            @Override
            public void actionPerformed(ActionEvent e)
            {
                JButton button = (JButton)e.getSource();
                ButtonModel model = button.getModel();
                model.setPressed(true);
                model.setArmed(true);
            }
        };

        Action releasedAction = new AbstractAction()
        {
            @Override
            public void actionPerformed(ActionEvent e)
            {
                JButton button = (JButton)e.getSource();
                ButtonModel model = button.getModel();
                model.setPressed(false);
                model.setArmed(false);
                display.replaceSelection(e.getActionCommand());
            }
        };

        setLayout( new BorderLayout() );

        display = new JTextField();
        display.setEditable( false );
        display.setHorizontalAlignment(JTextField.RIGHT);
        add(display, BorderLayout.NORTH);

        JPanel buttonPanel = new JPanel();
        buttonPanel.setLayout( new GridLayout(0, 5) );
        add(buttonPanel, BorderLayout.CENTER);

        for (int i = 0; i < 10; i  )
        {
            String text = String.valueOf(i);
            JButton button = new JButton( text );
            button.setBorder( new LineBorder(Color.BLACK) );
            button.setPreferredSize( new Dimension(30, 30) );
            buttonPanel.add( button );

            InputMap inputMap = button.getInputMap(JComponent.WHEN_IN_FOCUSED_WINDOW);
            String pressed = "pressed "   text;
            inputMap.put(KeyStroke.getKeyStroke(pressed), pressed);
            button.getActionMap().put(pressed, pressedAction);
            String released = "released "   text;
            inputMap.put(KeyStroke.getKeyStroke(released), released);
            button.getActionMap().put(released, releasedAction);
        }
    }

    private static void createAndShowUI()
    {
        JFrame frame = new JFrame("Calculator Panel");
        frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
        frame.add( new CalculatorPanel2() );
        frame.pack();
        frame.setLocationRelativeTo( null );
        frame.setVisible(true);
    }

    public static void main(String[] args)
    {
        EventQueue.invokeLater(new Runnable()
        {
            public void run()
            {
                createAndShowUI();
            }
        });
    }
}

CodePudding user response:

A straight-forward approach would be to add the following four things:

  • In your initWidget method add a KeyListener to your JTextArea (not to your JButtons) so that your keyPressed and keyReleased methods will actually be called when you type something.

    taL.addKeyListener(this);
    
  • Add a Map to your class where you will store the mapping from key-codes to buttons.

    private final Map<Integer, JButton> map = new HashMap<>();
    
  • In your initWidget method, while adding all the buttons store the mapping from key-codes to buttons in the map mentioned above. I also recommend making this method easier readable by swapping out the repetitive parts into a method of its own. Then you don't need the string arrays (firstRow, secondRow, ...) and the button arrays (first, second, ...) anymore.

    private void initWidget() {
        ....
    
        addButton(KeyEvent.VK_DEAD_TILDE, "~", 10, 300, 45, 45);
        addButton(KeyEvent.VK_1, "1", 60, 300, 45, 45);
        addButton(KeyEvent.VK_2, "2", 110, 300, 45, 45);
        addButton(KeyEvent.VK_3, "3", 160, 300, 45, 45);
        addButton(KeyEvent.VK_4, "4", 210, 300, 45, 45);
        addButton(KeyEvent.VK_5, "5", 260, 300, 45, 45);
        addButton(KeyEvent.VK_6, "6", 310, 300, 45, 45);
        ....
        addButton(KeyEvent.VK_SPACE, "", 215, 500, 305, 45);
        addButton(KeyEvent.VK_LEFT, "<", 630, 500, 45, 45);
        addButton(KeyEvent.VK_DOWN, "V", 680, 500, 45, 45);
        addButton(KeyEvent.VK_RIGHT, ">", 730, 500, 45, 45);
    }
    
    private void addButton(int keyCode, String text, int x, int y, int w, int h) {
        JButton button = new JButton(text);
        button.setBorder(BorderFactory.createRaisedBevelBorder());
        button.setBackground(Color.LIGHT_GRAY);
        button.setBounds(x, y, w, h);
        cont.add(button);
        map.put(keyCode, button);  // save the mapping from key-code to button
    }
    
  • In your keyPressed and keyReleased methods react by finding the corresponding button for the key-code and highlighting that button.

    @Override
    public void keyPressed(KeyEvent e) {
        JButton button = map.get(e.getKeyCode());  // find the button
        if (button != null)
            button.setBackground(Color.RED);
    }
    
    @Override
    public void keyReleased(KeyEvent e) {
        JButton button = map.get(e.getKeyCode());  // find the button
        if (button != null)
            button.setBackground(Color.LIGHT_GRAY);
    }
    
  • Related