JFoenixカラーピッカーライブラリのCSSスタイルを変更するには？

kentforth：

私はJavaFXのとシーンBuilderで自分のアプリケーションでいくつかの機能を作ってるんです

JFoenixカラーピッカーをクリックしたときに、私は色を選択することができますし、この色は私のラベルの背景に適用されます

私はJFOenixカラーピッカーは、アイコンのように見せていました。私は私のイメージにカラーピッカーのスタンダールappearenceを変更していました

問題＃1：私はプログラムの最初の時間をlanch、私はそれの上にマウスを移動すると、それは私のアイコンのようなルックスになったときに、カラーピッカーは完全に白い色で塗りつぶされています。

問題点＃2：私は、カラーピッカー波及効果の作品で私のアイコンをクリックすると、私はカラーピッカーをクリックしたとき、私は、任意の波及効果やアニメーションを必要としません

問題点＃3：私は再びそれの上にマウスを移動するとJFoenixカラーピッカーもそれ自身の背景に選択した色を適用し、それのappearenceは、もう一度アイコンの画像になります

問題＃4：カラーピッカーがスタックペインカラーピッカーダイアログウィンドウに配置されている場合、私はアイコンの左側にクリックした場合にのみ表示され、カラーピッカーアイコンの右側が無効になっているように見えますが、私はすべきカラーピッカーダイアログウィンドウを必要とします私はカラーピッカーアイコンの任意の部分にクリックしたときに登場

私はJFoniexカラーピッカーのCSSファイルに探していなかったが、CSSで適切にカラーピッカーをカスタマイズする方法の任意のドキュメントにはあります。

することができますように、多くのように私を助けてください

*私は、トグルボタンを使用するためのアイデア（私は自分のニーズに合わせてカスタマイズする方法を知っている）と場所カラーピッカー後方、このトグルボタンとメイク不透明度0を持っていたしかし、私はいつカラーピッカーダイアログウィンドウが開いて作る方法がわかりませんトグルボタンをクリックします。何か案は？

私は色のラベルの背景を埋めるために、カラーピッカーをクリックしたときに呼び出されるメソッドを使用します。

コントローラクラス：

@FXML  private Label category1;
@FXML  private JFXColorPicker colorPickerCategory;

@FXML
  void changeCategoryColor(ActionEvent event) {

    Color selectedColor = colorPickerCategory.getValue();
    category1.setBackground(new Background(new BackgroundFill(Paint.valueOf(selectedColor.toString()), CornerRadii.EMPTY, Insets.EMPTY)));

  }

CSS：

.jfx-color-picker .color-box {
    -fx-background-image: url("resources/palette.png");
    -fx-background-color: transparent;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-background-size: contain;
}


.jfx-color-picker:armed,
.jfx-color-picker:hover,
.jfx-color-picker:focused,
.jfx-color-picker {
    -fx-background-color: transparent, transparent, transparent, transparent;
    -fx-background-insets: 0px;
}


.color-picker > .color-picker-label > .picker-color > .picker-color-rect {
    -fx-stroke: null;
    -fx-fill : null;
}

.color-picker {
    -fx-background-color: transparent;
    -fx-color-label-visible: false;
}
.color-picker  .color-picker-label  .picker-color  {
    -fx-alignment: center;
}

.color-picker .color-picker-label .text {
    -fx-fill: transparent;
}

.jfx-color-picker:default{
    -fx-background-color: transparent;
}

ビデオ

シーンビルダー画面

Topaco：

スキンクラスは、JFXColorPickerペインとスタイルのクラスを持っているラベル含まれているcolor-labelとcolor-box、それぞれが、。ラベルがペインに含まれています。

以下のcss表示アイコン背景無し（=選択された色）とテキスト無し（選択された色の= Hex値）

.jfx-color-picker {
    -fx-focus-traversable: false;
    -fx-color-label-visible: false;
}

.jfx-color-picker .color-label {
    -fx-background-image: url("resources/palette.png");
    -fx-background-color: transparent;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-background-size: contain;
}

.jfx-color-picker .color-box {
    visibility: hidden;
}

The first part disables the text. The middle part is responsible for the display of the icon. The last part disables the background.

With that css the observed problems don't occur:

No white color, no hidden icon
Ripple-effect can be disabled optionally (programmatically)
Chosen color optionally not displayed in the background
No problems in StackPanes

My testcase consists of a BorderPane containing a StackPane in the center. The StackPane contains the JFXColorPicker and 3 buttons. The right part of the BorderPane contains a pane whose color is controlled by the color picker. The following figures show the FXML in Scenebuilder (Fig. 1), the application immediately after the start (Fig. 2), the application after the color picker is clicked (Fig. 3) and the application after a color change (Fig. 4):

Fig. 1:

Fig. 2:

Fig. 3:

Fig. 4:

The following css displays the icon with background (=selected color) and with ripple but without text (=hex value of selected color)

.jfx-color-picker {
    -fx-focus-traversable: false;
    -fx-color-label-visible: false;
}

.jfx-color-picker .color-label {
    -fx-background-image: url("resources/palette.png");
    -fx-background-color: transparent;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-background-size: contain;
}

The following figure shows the application after a color change.

Fig. 5:

In order to display the icon with background (=selected color), but without ripple and without text (=hex value of selected color), the following method has to be added to the controller:

public void disableRipple() {
    JFXRippler rippler = (JFXRippler) jfxColorPicker.lookup("JFXRippler");
    rippler.setDisable(true);
}

where jfxColorPicker denotes the color picker in the FXML.

The method has to be called in the main-method after the execution of the show-method:

FXMLLoader loader = new FXMLLoader(getClass().getResource("<path to FXML>"));
...
primaryStage.show();
...
Controller controller = loader.getController();
controller.disableRipple();

スキンクラスJFXColorPickerに位置していますJFoenix-master\jfoenix\src\main\java\com\jfoenix\skins\JFXColorPickerSkin.java。ここではコントロールの相互作用を研究することができます。

JFoenixカラーピッカーライブラリのCSSスタイルを変更するには？

おすすめ