I have been struggling to remove a blue highlight from a ContextMenu implementation when it is hovered over.
private void attachContextMenu() {
CustomMenuItem item = FilterPanel.getInMenuItem(this);
ContextMenu contextMenu = new ContextMenu();
contextMenu.getItems().add(item);
tableColumn.setContextMenu(contextMenu);
}
With the containing VBox I was able to paint it white and get rid of a majority of the blue flash.
filterVBox.setStyle("-fx-background-color: white;");
But i cannot figure out how to get the CustomerMenuItem to lose the blue border when focused with the mouse.I tried the following but it does not work
CustomMenuItem item = FilterPanel.getInMenuItem(this);
item.setStyle("-fx-text-fill: white;");
Here is the PR if you want the full picture, but does anybody have an idea how I can manipulate that to go away?
I was able to get it to go away by styling every MenuItem for the entire TableView with this CSS. But I'd like to apply it specifically to just that CustomMenuItem.
.menu-item:focused {
-fx-background-color: transparent;
}
Since the blue highlight happens when the ContextMenu gets the focus, you are dealing here with a Pseudoclass. In CSS, a pseudo-class is used to define a specific state of a node. Typical states are hover, selected, focused...
The way to deal with this is by adding a CSS file, where you can easily apply your style settings to any of the possible states.
First, apply a style class to your ContextMenu (so other controls using context menus don't get affected by these settings). For instance, column-filter:
private void attachContextMenu() {
CustomMenuItem item = FilterPanel.getInMenuItem(this);
ContextMenu contextMenu = new ContextMenu();
contextMenu.getStyleClass().add("column-filter");
contextMenu.getItems().add(item);
tableColumn.setContextMenu(contextMenu);
}
Then add the required styling rules to a css file:
style.css
.column-filter .context-menu {
-fx-background-color: white;
}
.column-filter .context-menu:focused {
-fx-background-color: white;
}
.column-filter .custom-menu-item {
-fx-background-color: white;
-fx-padding: 0;
}
.column-filter .custom-menu-item:focused {
-fx-background-color: white;
}
Finally you need to apply this stylesheet to the scene:
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
And you'll get rid of the highlight.
Related
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;
}
Video
Scene Builder Screen
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 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();
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.
EDIT: #Topaco wrote solution above, but I solved my problems in other way: I made toggle button and it's style to look like an icon. I placed JFOenix Color Picker above that toggle button and made Color PIcker's opacity to 0. It looks like I click on toggle button with icon, but I actually click on Color Picker because it is placed ABOVE toggle button.
JFoenix Color Picker is not wrapped into any Pane. It is placed just in Grid Pane as Stack Pane of toggle buttons. Color Picker is broght forward. Toggle Button is placed backward
I wan't to change the color of any button in my application from red to blue fluent when the mouse is over it.
This is my css code so far:
.button{
-fx-background-color: rgb(225,0,0);
}
.button:hover{
-fx-background-color: rgb(0,0,255);
transition: -fx-background-color 2s;
}
Now I'm looking for something like this:
.button:hover{
transition: -fx-background-color 2s;
}
I am trying to center the tabs in a JavaFX TabPane but seem to be unable to achieve the desired result.
Using the CSS reference I am able to target various pieces of the sub-structure of the TabPane control but no matter what I try I am unable to centre the tabs horizontally within the header.
The CSS I have so far is below:
.tab-pane > .tab-header-area > .headers-region {
-fx-border-color: red;
-fx-border-width: 3;
-fx-alignment: CENTER;
}
.tab-pane > .tab-header-area > .tab-header-background {
-fx-border-color: blue;
-fx-border-width: 3;
}
Which gives the following result:
As you can see, the coloured borders show I am correctly selecting the sub-structure of the TabPane but the -fx-alignment property appears to have no effect.
Is it possible to centre the tabs horizontally within the header using CSS and if so which property do I need to set and which part of the sub-structure do I need to target?
Well this not a neat solution, it is more a workaround. Since the sub structure of tabpane consist of stackpanes, these stackpanes align to center by default. But tabs are not aligned to center, which implies there is custom laying out in the skin code. The right solution can be found after reading the tabpane skinning code.
Platform.runLater(new Runnable() {
#Override
public void run() {
final StackPane region = (StackPane) tabPane.lookup(".headers-region");
final StackPane regionTop = (StackPane) tabPane.lookup(".tab-pane:top *.tab-header-area");
regionTop.widthProperty().addListener(new ChangeListener<Number>() {
#Override
public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) {
Insets in = regionTop.getPadding();
regionTop.setPadding(new Insets(
in.getTop(),
in.getRight(),
in.getBottom(),
arg2.doubleValue() / 2 - region.getWidth() / 2));
}
});
// force re-layout so the tabs aligned to center at initial state
stage.setWidth(stage.getWidth() + 1);
}
});
The javacode workaround posted by #Uluk Biy didn't work for me.
But this CSS soluton did.
I am new to JavaFX. In my application I am using Titled pane and I want to replace the default minimise icon location from left to right end. The thing is I am using a separate FXML file for the titled pane and it is included in the scene. I used the below css content to achieve my goal.
.titled-pane > .title > .arrow-button .arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
-fx-collapsible: false;
-fx-shape: "";
At first I tried to remove the icon using the above css.
public class PrjExplorerController implements Initializable {
#FXML
TitledPane titledPanePrjExplorer;
#Override
public void initialize(URL url, ResourceBundle rb) {
titledPanePrjExplorer.getStylesheets().add("StyleSheet.css");
boolean b = titledPanePrjExplorer.getStyleClass().add("titled-pane");
}
}
But this not working. I think I am using a wrong approach. Could anyone help me on this?
Try this solution: How to change header component in TitledPane in JavaFX
Specifically:
// translate the titledpane arrow and header so that the arrow is displayed to right of the header.
Pane connectivityArrow = (Pane) connectivityPane.lookup(".arrow");
connectivityArrow.translateXProperty().bind(
connectivityPane.widthProperty().subtract(connectivityArrow.widthProperty().multiply(2))
);
Pane connectivityTitle = (Pane) connectivityPane.lookup(".header");
connectivityTitle.translateXProperty().bind(
connectivityArrow.widthProperty().negate()
);
I'm trying to learn JavaFX 2, but I've been stumbling a lot trying to style my application. I've found this document which tries to document controls and the css properties that apply to them. I can't tell if it's incomplete, if I should be using some unknown selectors or JavaFX's CSS support just isn't powerful enough for my needs.
Here are a couple of examples:
How would I change the background color for the area behind a TabPane without coloring every other child component (is there a selector for that, or perhaps a property?)
How would I change the color of non-selected tabs?
Have you tried something like this?
This uses an ID selector as shown in the "Skinning JavaFX Applications with CSS" document. You could also leave off the "#MyTabPane" selector and have it apply to all TabPane's. (It looks like the .tab and .tab-content-area selectors are not discussed in the reference guide. I went to the "caspian.css" file contained in jfxrt.jar file to find them.)
TabExample.css
#MyTabPane .tab {
-fx-background-color: blue;
}
#MyTabPane .tab:selected {
-fx-background-color: red;
}
#MyTabPane .tab-content-area {
-fx-background-color: cyan;
}
#MyTabPane .tab *.tab-label {
-fx-text-fill: white;
}
TabPaneEx.java
#Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Hello World");
StackPane root = new StackPane();
TabPane pane = new TabPane();
pane.setId(("MyTabPane"));
Tab tab1 = new Tab("ONE");
Tab tab2 = new Tab("TWO");
Tab tab3 = new Tab("THREE");
pane.getTabs().addAll(tab1,tab2,tab3);
Scene scene = new Scene(root, 300, 250);
root.getChildren().add(pane);
scene.getStylesheets().add(
this.getClass().getClassLoader().getResource("tabpaneex/TabExample.css").toString());
primaryStage.setScene(scene);
primaryStage.show();
}
JavaFX CSS Reference Guide
Skinning JavaFX Applications with CSS