By "selector bar", I am referring to the selected tree-cell from when you click on a node of the TreeView. I'm using javafx8.
When an object in a TreeView is selected, the selector bar stretches to edges of whatever pane contains the aforementioned TreeView, like in the image above. What I want to achieve can be seen below.
I figured a reasonable way to achieve this would be to write a couple of css blocks. First, one that makes the current selector bar not visible, like below,
.tree-cell:selected
{
-fx-background-color: transparent;
}
in combination with a css block to make whatever node contains the icon and label some background color. I can't find a resource that lists the substructure of the TreeView or TreeCell; I did not see much here, and there were no related google search results other than the documentation linked. Maybe I'm not looking in the right place? Anyway, I would imagine a second block would go something like below
.tree-cell:selected > .hbox
{
-fx-background-color: blue;
}
where hbox should be replaced with whatever node contains the icon and label. If anyone could tell me what information I'm missing, or perhaps this is possible an entirely different way? I would really appreciate any efforts.
Thank you so much for your time.
I am building a costume button by extending from a Label.
I know that you can use CSS within .java files with:
setStyle("-fx-background-color: #101010");
which is pretty cool and I am using this quite often.
But there is my problem: It seems like this doesn't work for hover effects.
In an external CSS file you can have:
#LabelButton:hover {
-fx-background-color: #aaaaaa;
}
I would like to have this feature with "XXX:hover" inside my Java File because the hex color code must be variable and this isn't possible when using external CSS files. So what I kinda want to have it this:
setStyle("hover:-fx-background-color: #101010");
But I can't find the right syntax for it let alone there is a syntax.
If there is no such feature, how should I do it then?
Thanks!
There is no way to use selectors of any kind in inline CSS. The inline style is always applied to the node regardless of it's state (with the exception of you assigning the corresponding node property).
You could bind the style property to the hover property of the node.
myButton.styleProperty().bind(Bindings.when(myButton.hoverProperty())
.then("-fx-background-color: #101010")
.otherwise("-fx-background-color: #aaaaaa"));
This could become very ugly if you e.g. want to style focused buttons and pressed buttons differently. For this reason I recommend combining CSS and inline CSS to achieve the desired style:
You can define your own variables color variables in CSS:
stylesheet
.label-button { /* using style class for selector (ids are for single nodes) */
/* assign default values */
-fx-normal-background: yellow;
-fx-hovered-background: red;
-fx-background-color: -fx-normal-background;
}
.label-button:hover {
-fx-background-color: -fx-hovered-background;
}
java code
myButton.setStyle("-fx-normal-background: #101010; -fx-hovered-background: #aaaaaa;");
I googled for this, but couldn't find anything. I know that I can style a Buttons text, background colour etc, but I would like to change the text itself.
This is what I've tried (of course the actual end result is more complex, but this will do):
Button#playButton {
-fx-background-color: #ddd;
-fx-text: "Play";
}
the background colour is correctly applied, but the text does not change.
Edit: The way to go seems to be a custom property, if someone has knowledge within that field I would love a concise explanation and implementation, that could save me hours of trial and error with the few sources I found!
No you cannot set the text of your button using css. But hey! In the other hand, you can still display an icon in your button using css!
You only need to add this to your css :
-fx-graphic : url("relative path to your icon");
In case your icon is repeated in the button, then add this as well :
-fx-background-repeat : no-repeat;
Note: Javafx newbie
Problem:
Many websites and tutorial show one how to set the style of a button using classes or ID's.
After setting the style from an Id, I need to restore the style to the previous state or simply the .button class.
Some Styles:
I have the following css (extract) used for all my buttons:
.button {
-fx-text-fill: white;
-fx-font-family: "Arial Narrow";
-fx-font-weight: bold;
-fx-background-color: linear-gradient(#61a2b1, #2A5058);
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}
and an Id for a button that is selected:
#button-selected {
-fx-background-color: linear-gradient(#3f6770, #82c0ce);
}
The code (extract):
//load stylesheet from resources into scene someScene.getStylesheets().add(Main.class.getResource("/gui.css").toExternalForm());
//...
Button b = new Button("some button");
//...
b.getStyleClass().add("button"); <----- adds .button class style to button
some trigger later on calls:
(activeButton, bSelectedButton) -> {
//...
if (!activeButton.equals(bSelectedButton)){
//restore activeButton to ".button" class
bSelectedButton.setId("button-selected");
}
//...
}
As a short summary above: (to put question into a practical application)
A trigger occurs, e.g. mouse click event, calling the lambda.
This checks if the buttons are the "same buttons", if not then:
clear the previous button's formatting activeButton,
and set the new button's bSelectedButton style with the #button-selected id.
Please note:
I have tried:
.button:pressed {
-fx-background-color: linear-gradient(#3f6770, #82c0ce);
}
but it does not change the colours as expected after the click (on the button)
Question:
How do I "unsetId" / "removeId" to restore the previous style of the button,
or simply how do I set the active style on the button from a loaded style sheet?
Use a toggle button rather than a standard button
You seem to be re-inventing the wheel. A selectable button is a ToggleButton, you should probably be using that. A toggle button has a selected psuedo-state that is used to configure the styling when the button is selected.
Aside comment on -fx-background-color usage
As an aside it is usually not best to directly set -fx-background-color for controls, but instead to set one of the higher level looked up colors, such as -fx-base. See modena.css for the definitions of these looked up colors and examples of how to use them (as well as the pseudo-state selectors).
Aside comment on -fx-effect usage
Setting a drop shadow effect on things can often lead to blurred text. For this reasons (and others), the standard way to simulate a shadow 3D effect for JavaFX controls is layered backgrounds, which is a bit complicated, but documented somewhat sparsely in the JavaFX CSS reference and abundant samples are in the modena.css file.
Advice on css id usage
The css id of an element should not change. It is used to identify the element, and should be unique in a given document. So you should not set and unset the id to something like button-selected. Instead you should use classes or pseudo-classes for maintaining keys to dynamic styling information.
You could effectively "unset" a CSS id by setting it to null, but I wouldn't advise that.
Related toggle button styling
Related answer mentions styling for ToggleButtons (but slightly different from the kind of styling you are asking for):
JavaFX - create custom button with image
Style by custom psuedo-class
If you really need to create your own psuedo-class, then see:
Example of using new Pseudoclass API in JavaFX 8 by james-d.
GuiGarage post on psuedo-classes
Style by style class setting
If you don't need or want to use pseudo-classes, then you can set different style classes on your control and use "and" style selectors:
styleclass.anotherstyleclass {
\\ your style attributes
}
For instance:
.button.selected {
-fx-base: palegreen;
}
With this method you would need to add and remove the additional style classes from the node's style class list as needed.
Generic selectable node styling
If you want a very generic selectable node style which is not tied to a button type, then see the solution here:
https://stackoverflow.com/a/40939611/1155209
In order to switch style by css file, you can use these commands:
scene.getStylesheets().clear();
setUserAgentStylesheet(null);
scene.getStylesheets().add(getClass().getResource("theme1.css").toExternalForm());
For your purpose, restoring previous style, I think you cannot do directly, but you can do as follows:
1) Use variable to store previousStyle.
2) When you switch to new style, you have to set value previousStyle is current style.
So, if you want to restore to previous style, you just call the previousStyle.
My solution does obey all css rules.
According to w3schools :
one should use an the id selector (denoted by #your_id_name) when referring to a specific/unique object.
The id of an element should be unique within a page, so the id selector is used to select one unique element!
NOTE: This rule is not adhered to in my solution
Solution:
CSS contains:
#button-default {
-fx-text-fill: white;
-fx-font-family: "Arial Narrow";
-fx-font-weight: bold;
-fx-background-color: linear-gradient(#61a2b1, #2A5058);
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}
#button-default:hover {
-fx-background-color: linear-gradient(#82c0ce, #3f6770);
}
#button-selected {
-fx-background-color: linear-gradient(#3f6770, #82c0ce);
}
Code:
When creating my buttons, I set the id there:
Button b = new Button();
//....
b.setId("button-default");
and some trigger event:
//....
(activeButton, newSelectedButton) -> {
if (!activeButton.equals(newSelectedButton)){
activeButton.setId("button-default");
newSelectedButton.setId("button-selected");
}
}
//....
A short summary:
The button is created with a specific id from the css file.
When some event gets triggered requiring the style change:
The button to be reset to the default style with an id referred to as button-default
Followed by setting the new buttons style with style referred to as button-selected
Note again: Not recommended since it does not adhere to standard practices, but I posted it here for completeness sake.
So guys, this should be very simple but I can't find the answer. My knowledge in CSS is very limited.
I want to move the "Drop Down Button" or the "Arrow" of a ComboBox/ChoiceBox to the left side of the component, instead of the right side.
Just like the picture below:
I found a way to make the arrow transparent, like this:
.combo-box .arrow-button {
-fx-background-color: transparent;
}
And this was my naive approach to move the arrow to the left side:
.combo-box .arrow-button {
-fx-alignment: LEFT;
}
So, does anyone knows if this is possible to achieve?
How? Thanks!!
The ComboBox itself does not support the style property "-fx-alignment" - only the editor (textField) does.
You can either extend ComboBoxBaseSkin (ComboBoxListViewSkin), override #layoutChildren() and position the arrow button by yourself or simply change the node orientation just like in the example below. However, changing the node orientation affects the complete content - means editor and popup content. You can repair this for the editor by applying the opposite (because of RTL) alignment or by changing the NodeOrientation to LTR just like for the ListView of the popop.
combo.setNodeOrientation(NodeOrientation.RIGHT_TO_LEFT);
combo.getEditor().setStyle("-fx-alignment: baseline-right");
combo.setOnShowing(evt -> ((ComboBoxListViewSkin<?>)combo.getSkin()).getListView().setNodeOrientation(NodeOrientation.LEFT_TO_RIGHT));
You have to set the NodeOrientation. The Problem is, that the StyleableProperty for the NodeOrientation is not supported yet, so you can't set it with css.
check Line 6136 in javafx.scene.Node --> Node#nodeOrientationProperty
Set the orientation within code or FXML