ToggleButton retains previous color after deselecting

Question

I am trying to make colored toggle buttons to remember their color before they are selected, for example, a black button is selected, it will be gray, and after it is canceled, it will return to black.

When creating buttons, they get the following properties:

    cell.setStyle("-fx-border-color: black; -fx-background-color: gray; -fx-base: gray; -fx-border-width: 1");
    cell.setOnAction(event -> setPerformAction(cell));

What event:

public void setPerformAction(ToggleButton cell) {
    if(cell.isSelected()) {
        cell.setStyle("-fx-border-color: red");
    }
    else{
        cell.setStyle("-fx-border-color: black");
    }
}

Black and white were applied as follows:

cell.setStyle("-fx-base: white; -fx-background-color: white; -fx-border-width: 1");

But, as you see in the gif below, when the buttons are not selected, they all return to a different color. How can they remember their previous color?

By the way, these buttons are generated dynamically at runtime, so I do not see them in the scene builder, and they do not have css code.

Answer 1

CSS. ToggleButton CSS.

selected . css, , :

.

.toggle-container>ToggleButton {
    -fx-pref-width: 100;
    -fx-pref-height: 100;
    -fx-background-radius: 0;
    -fx-background-color: -fx-original-background;
}

.toggle-container>ToggleButton:selected {
    -fx-background-color: gray;
}

fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox xmlns:fx="http://javafx.com/fxml/1" stylesheets="@style.css" styleClass="toggle-container">
    <children>
        <ToggleButton style="-fx-original-background: black;" />
        <ToggleButton style="-fx-original-background: red;" />
        <ToggleButton style="-fx-original-background: yellow;" />
    </children>
</VBox>

, , ToggleButton java- , .

cell.setStyle("-fx-original-background: black;");

cell.setStyle("-fx-original-background: white;");

---

Java, fxml

@Override
public void start(Stage primaryStage) {
    ToggleButton b1 = new ToggleButton(),
            b2 = new ToggleButton(),
            b3 = new ToggleButton();

    b1.setStyle("-fx-original-background: black;");
    b2.setStyle("-fx-original-background: red;");
    b3.setStyle("-fx-original-background: yellow;");

    VBox root = new VBox(b1, b2, b3);
    root.getStyleClass().add("toggle-container");
    root.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
    Scene scene = new Scene(root);

    // alternative place to add the stylesheet
    // scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

: style.css , .class ( .jar)

Answer 2

, setUserData (Object obj)

 private class StyleData {

        private String selected = "";
        private String deselected = "";

        public StyleData(String selected, String deselected) {
            this.selected = selected;
            this.deselected = deselected;
        }

        /**
         * @return the selected
         */
        public String getSelected() {
            return selected;
        }

        /**
         * @param selected the selected to set
         */
        public void setSelected(String selected) {
            this.selected = selected;
        }

        /**
         * @return the deselected
         */
        public String getDeselected() {
            return deselected;
        }

        /**
         * @param deselected the deselected to set
         */
        public void setDeselected(String deselected) {
            this.deselected = deselected;
        }

    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO

        String style1 = "-fx-border-color: black; -fx-background-color: black; -fx-base: gray; -fx-border-width: 1";
        String style2 = "-fx-border-color: black; -fx-background-color: gray; -fx-base: gray; -fx-border-width: 1";
        btn.setUserData(new StyleData(style1, style2));
        btn.setStyle(((StyleData) btn.getUserData()).getDeselected());
        btn.selectedProperty().addListener(new ChangeListener<Boolean>() {

            @Override
            public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
                if (newValue) {
                    btn.setStyle(((StyleData) btn.getUserData()).getSelected());
                } else {
                    btn.setStyle(((StyleData) btn.getUserData()).getDeselected());
                }
            }
        });
    }

- , ?

() , , fxml , , ToggleButton ,