JavaFX: set an overlapping text on a button when clicked - javafx

Question

I'm creating a simple lottery game where I can chose numbers from 1 to 42. I would like to mark the chosen number with a red "X" (instead of using an effect) but the user should still see the chosen number beneath the "X". When the user clicks the marked number again, the "X" should disappear.
The GUI looks like this:
enter image description here
How can I display a second text on a button in the way that the first text is still visible?
Thanks for your help
kind regards
Joel

Answer 1

You can set the Graphic of a button to a StackPane and then add an element to the StackPane. Since the children of a StackPane are all displayed on top of each other, this yields the effect that you want. My example just shows the concept, I would probably write a new class that extends Button in your use scenario :)
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
public class NewFXMain extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
Pane pane = new Pane();
StackPane buttonPane = new StackPane();
Label label = new Label("42");
buttonPane.getChildren().add(label);
Button button = new Button();
button.setGraphic(buttonPane);
button.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
if(buttonPane.getChildren().size() == 1){
Label labelX = new Label("X");
labelX.setStyle("-fx-text-fill: red;");
buttonPane.getChildren().add(labelX);
}
else
buttonPane.getChildren().remove(1);
}
});
pane.getChildren().addAll(button);
primaryStage.setScene(new Scene(pane, 300, 275));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}