Hover effect on selected Text - javafx

Question

I have a problem which I cannot solve with hover effect on Text.
Text t1 = new Text();
Text t2 = new Text();
Text t3 = new Text();
Text t4 = new Text();
When I select one Text I would like to change the background for example to gray. But the tricky part that I don't know how to solve is how I can remove the background color from the previous selected Text? It should work like Toggle button but with Text.

Answer 1

A Text object is a Shape, which defines a much more limited set of properties for styling than a control; for example it has no background. If you want to style the text in the UI, you should probably prefer a Label over Text. The other option would be to wrap the Text in some kind of Region (such as a StackPane) and apply the background to the region. This would complicate your code a little though.
Here are some solutions: the first uses no CSS and uses Labels, just setting their style as needed. The second uses a different approach in which you can use the "selection behavior" already defined in ToggleButton, but make the toggle buttons look like plain text. This is probably the best solution, in that it uses existing functionality and just changes the appearance using CSS. The third is a refinement of the first in which you can factor the style out into a CSS, but implement the selection yourself.
Solution 1: all Java:
Create a property to store the selected text:
ObjectProperty<Label> selectedText = new SimpleObjectProperty<>();
Register a listener with the property to reset the style of the previous selected text and set the style of the new selected text:
selectedText.addListener((obs, oldSelectedText, newSelectedText) -> {
if (oldSelectedText != null) {
oldSelectedText.setStyle("");
}
if (newSelectedText != null) {
newSelectedText.setStyle("-fx-background-color: lightgray;");
}
});
Register mouse listeners with each text to make them the selected text when they are clicked:
Label t1 = new Label("One");
Label t2 = new Label("Two");
Label t3 = new Label("Three");
Label t4 = new Label("Four");
Stream.of(t1, t2, t3, t4).forEach(t ->
t.setOnMouseClicked(event -> selectedText.set(t)));
Solution 2: Use toggle buttons styled to look like plain text:
This would actually be my preferred solution: use the selection behavior already defined for ToggleButton, and just use CSS to change the appearance of the toggle buttons.
ToggleButton t1 = new ToggleButton("One");
ToggleButton t2 = new ToggleButton("Two");
ToggleButton t3 = new ToggleButton("Three");
ToggleButton t4 = new ToggleButton("Four");
ToggleGroup tg = new ToggleGroup();
Stream.of(t1, t2, t3, t4).forEach(t -> t.setToggleGroup(tg));
With the following external style sheet:
.toggle-button, .toggle-button:selected , .toggle-button:hover,
.toggle-button:armed, .toggle-button:focused, .toggle-button:selected:focused {
-fx-color: -fx-base ;
-fx-background-color: transparent ;
-fx-background-insets: 0 ;
-fx-background-radius: 0 ;
-fx-padding: 0 ;
-fx-text-fill: -fx-text-background-color ;
}
.toggle-button:selected, .toggle-button:selected:focused {
-fx-background-color: lightgray ;
}
Solution 3: Java with css pseudoclasses:
Use the property for the selected text as in the first solution, but manipulate the style classes instead of the style directly:
ObjectProperty<Label> selectedText = new SimpleObjectProperty<>();
PseudoClass selected = PseudoClass.getPseudoClass("selected");
selectedText.addListener((obs, oldSelectedText, newSelectedText) -> {
if (oldSelectedText != null) {
oldSelectedText.pseudoClassStateChanged(selected, false);
}
if (newSelectedText != null) {
newSelectedText.pseudoClassStateChanged(selected, true);
}
});
Create the text object, set a style class on them, and register the mouse listener as before:
Label t1 = new Label("One");
Label t2 = new Label("Two");
Label t3 = new Label("Three");
Label t4 = new Label("Four");
Stream.of(t1, t2, t3, t4).forEach(t ->
t.setOnMouseClicked(event -> selectedText.set(t)));
Then use an external style sheet, and apply whatever style you need to the selected text:
.label:selected {
-fx-background-color: lightgray ;
}
With any of these solutions, you can edit the styles to be as you need.

Answer 2

First create a css class.
.text:hover {
-fx-fill: blue;
}
.text:pressed {
-fx-fill: blue;
}
.text-selected {
-fx-fill: blue;
}
Then create a global variable.
Text selectText;
Then add this:
scene.getStylesheets().add(Teste.class.getResource("text.css").toExternalForm();
t1.getStyleClass().add("text");
t2.getStyleClass().add("text");
t1.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent arg0) {
if (selectText != null) {
selectText.getStyleClass().remove("text-selected");
}
t1.getStyleClass().add("text-selected");
selectText = t1;
}
});
t2.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent arg0) {
if (selectText != null) {
selectText.getStyleClass().remove("text-selected");
}
t2.getStyleClass().add("text-selected");
selectText = t2;
}
});