I'm making some function in my application with JavaFX and Scene Builder
I can pick a color when clicking on JFoenix Color Picker and then this color applies to my label background
I made JFOenix Color Picker look like an icon. I had changed the standart appearence of Color Picker to my image
Problem #1: Color Picker is totally filled with white color when I lanch a program first time and then it become looks like my icon when I move the mouse over it.
Problem #2:When I click my icon with Color Picker ripple effect works, but I don't need any ripple effect or animation when I click on Color Picker
Problem #3: JFoenix Color Picker also applies chosen color to it's own background and it's appearence become to icon image again when I move mouse over it again
Problem #4: When Color Picker is placed in Stack Pane The Color Picker dialog window appears only when I click on left side of the icon, it looks like right side of Color Picker icon is disabled, but I need Color Picker dialog window to be appeared when I click to any part of Color Picker icon
I was searching into CSS files of JFoniex Color Picker, but there is no any documentation how to customize properly Color Picker in CSS.
Please, help me as much as you can
*I had an idea to use toggle button(I know how to customize it to my own needs) and place Color Picker backward this toggle button and make opacity 0. But I don't know how to make Color Picker dialog window open When I click on toggle button. Any ideas?
I use method that is called when I click Color Picker to fill label's background with color.
Controller class:
@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;
}
The skin-class of the JFXColorPicker
contains a pane and a label which have the style classes color-label
and color-box
, respectively. The label is contained in the pane.
The following css
displays the icon without background (=selected color) and 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;
}
.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
StackPane
s
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();
The skin-class of the JFXColorPicker
is located at JFoenix-master\jfoenix\src\main\java\com\jfoenix\skins\JFXColorPickerSkin.java
. Here the interaction of the controls can be studied.