選択解除後に前の色を維持するToggleButton

Question

色を選択する前に色を覚えているトグルボタンを作成しようとしています。たとえば、黒ボタンを選択すると灰色になり、選択解除すると黒に戻ります。

、彼らが与えられているボタンが作成されると、これらのプロパティ：

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

黒と白のは、次のように適用された：イベントだ

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

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

しかし、下のgifにあるように、ボタンが選択解除されると、それらのボタンはすべて別の色に戻ります。彼らは以前の色をどのように覚えていますか？

これらのボタンは実行時に動的に生成されるため、シーンビルダでは表示されず、CSSコードは表示されません。

Answer 1

これは、CSSを使用して達成するのが最も簡単ですスタイルシート。 CSSセレクタを使用してToggleButtonを識別する方法を考え出す必要があります。

疑似クラスを使用して、選択したトグルを識別できます。 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> 

で動作しますが、あなたはもちろん、JavaコードからToggleButton Sを追加して、例えば非選択色を設定することができますこれはstyle.cssファイルを動作させるため

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

注意をFXMLする

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

または

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

---

同じJavaを使用すると、同じディレクトリにクラスパスにする必要があります.classアプリケーションクラスのファイル（または同等の場所）.jarファイル）

Answer 2

私はこれは本当に速い書かjsut、あなたはな便利

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

読み、その本当に簡単な方法setUserData（オブジェクトobj）を使用することができ、あなたが探していたものを、このですか？私は、コントローラでプロジェクトをFXML作成することによって、これを書か

初期化（）そのわずかコントローラメソッドは、あなただけのコードでトグルボタンを作成し、私が書かれている同じコードを置くことができ芽