ToggleButton pour garder la couleur précédente après désélection.

Question

J'essaie de faire en sorte que les boutons à bascule colorés se souviennent de la couleur qu'ils avaient avant d'être sélectionnés. Par exemple, un bouton noir sélectionné sera gris, et après avoir été désélectionné, il redeviendra noir.

Lorsque les boutons sont créés, ils reçoivent ces propriétés :

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

C'est l'événement :

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

Le noir et le blanc ont été appliqués comme ceci :

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

Mais comme vous le voyez dans le gif ci-dessous, lorsque les boutons sont désélectionnés, ils reprennent tous une couleur différente. Comment peuvent-ils se souvenir de leur couleur précédente ?

Ces boutons sont générés dynamiquement au moment de l'exécution, je ne peux donc pas les voir dans le scene builder et ils n'ont pas de code css.

Answer 1

Le plus simple est d'utiliser une feuille de style CSS. Vous devez trouver un moyen d'identifier l'élément ToggleButton à l'aide d'un sélecteur CSS.

En selected peut être utilisée pour identifier les bascules sélectionnées. En définissant une variable css, vous pouvez facilement définir la couleur, même en utilisant des styles en ligne :

Par exemple

.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;
}

fonctionnerait avec le fxml suivant

<?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>

mais vous pouvez bien sûr ajouter l'option ToggleButton à partir du code java et définir la couleur non sélectionnée, par exemple en utilisant

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

o

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

---

L'équivalent Java de 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();
}

Pour que cela fonctionne, il faut que le style.css doit se trouver dans le classpath, dans le même répertoire que le fichier .class de la classe de l'application (ou un emplacement équivalent à l'intérieur d'un fichier .jar fichier)

Answer 2

Je viens d'écrire cela très rapidement, vous pouvez utiliser la méthode setUserData(Object obj) pour plus de commodité.

 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());
                }
            }
        });
    }

C'est vraiment simple à lire, c'est ce que vous recherchiez ?

Initialize() est juste une méthode de contrôleur, je l'ai écrit en créant un projet fxml avec un contrôleur, vous pouvez juste créer ToggleButton dans le code et mettre le même code que j'ai écrit.