How to change an appearance of the button, when a key on a keyboard is pressed. JavaFx

Question

I've already asked similar question here. The answer was correct, but still it seems like it's not applicable to my case. Have a look at my code:

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class Main extends Application {

@Override
public void start(Stage primaryStage) throws Exception{
    FlowPane root = new FlowPane();
    root.setPadding(new Insets(40, 40, 40, 40));
    Button btn = new Button("NEW BUTTON");
    btn.setId("button");

    root.setOnKeyPressed(new EventHandler<KeyEvent>() {
        @Override
        public void handle(KeyEvent event) {
            btn.arm();
        }
    });

    root.setOnKeyReleased(new EventHandler<KeyEvent>() {
        @Override
        public void handle(KeyEvent event) {
            btn.disarm();
        }
    });

    root.getChildren().addAll(btn);
    primaryStage.setScene(new Scene(root, 310, 200));
    primaryStage.getScene().getStylesheets().add("style.css");
    primaryStage.show();
}


public static void main(String[] args) {
    launch(args);
}
}

Then I specified stylesheet:

#button {
-fx-background-color: #403e40;
-fx-border-width: 0;
-fx-font-size: 30px;
-fx-text-fill: #b3b1b3;
-fx-background-radius: 0;
}

#button:hover {
-fx-background-color: #595759;
}

#button:pressed {
-fx-background-color: #ffffff;
-fx-text-fill: #403e40;
}

And in the end, it doesn't work. I'm absolutely frustrated. It works just fine if .css file isn't linked and doesn't work otherwise. So, is it possible at all to change the appearance of the button if a key pressed with customized view?

score 0 · Answer 1 · answered Jul 19 '15 at 15:17

You could create your own styles for armed and disarmed. Initially you set the disarmed style and depending on your key states you first remove all relevant styles and set the armed or disarmed style. Like this:

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        FlowPane root = new FlowPane();
        root.setPadding(new Insets(40, 40, 40, 40));
        Button btn = new Button("NEW BUTTON");
        btn.setId("button");
        btn.getStyleClass().add("disarmed");

        root.setOnKeyPressed(new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent event) {

                // remove existing styles
                btn.getStyleClass().remove("armed");
                btn.getStyleClass().remove("disarmed");

                // add new style
                btn.getStyleClass().add("armed");

                btn.arm();
            }
        });

        root.setOnKeyReleased(new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent event) {

                // remove existing styles
                btn.getStyleClass().remove("armed");
                btn.getStyleClass().remove("disarmed");

                // add new style
                btn.getStyleClass().add("disarmed");

                btn.disarm();

            }
        });

        root.getChildren().addAll(btn);
        primaryStage.setScene(new Scene(root, 310, 200));
        primaryStage.getScene().getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

And the css:

#button {
-fx-border-width: 0;
-fx-font-size: 30px;
-fx-text-fill: #b3b1b3;
-fx-background-radius: 0;
}

#button:hover {
-fx-background-color: #595759;
}

#button:pressed {
-fx-background-color: #ffffff;
-fx-text-fill: #403e40;
}

.armed  {
-fx-background-color: #ff0000;
}
.disarmed  {
-fx-background-color: #403e40;
}

Note that if you set the background color in the id selector (#), it will get higher precedence and you can't overwrite it.

How to change an appearance of the button, when a key on a keyboard is pressed. JavaFx

1 Answers1