I have created an FXML class using SceneBuilder, loaded via FXMLLoader with an associated controller. The parent panel of the widget has a style class with a pseudo-class applied to it. Interestingly, while the ToggleButton is styled correctly, the two labels are not reflecting the styles.
To test this issue, I directly assigned one of the labels a CSS class. The result was that it initially picked up the changes but did not update the text color when the pseudo-class changed.
Below is a snippet of code from my production setup for reference:
CustomButton.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.*?>
<?import javafx.scene.layout.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="70.0" prefWidth="70.0" styleClass="custom-button" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="CustomButtonController">
<children>
<ToggleButton fx:id="selectionToggle" mnemonicParsing="false" prefHeight="70.0" prefWidth="70.0" />
<Label fx:id="dateLabel" alignment="TOP_LEFT" contentDisplay="TOP" layoutX="5.0" layoutY="5.0" mouseTransparent="true" prefHeight="25.0" prefWidth="60.0" styleClass="custom-button" text="Date" wrapText="true" />
<Label fx:id="eventLabel" alignment="BOTTOM_LEFT" contentDisplay="BOTTOM" layoutX="5.0" layoutY="40.0" mouseTransparent="true" prefHeight="25.0" prefWidth="60.0" text="Event" wrapText="true" />
</children>
</Pane>
CustomButtonController.java:
/**
* Sample Skeleton for 'CustomButton.fxml' Controller Class
*/
import java.net.URL;
import java.util.ResourceBundle;
import javafx.css.PseudoClass;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.scene.Parent;
import javafx.scene.control.Label;
import javafx.scene.control.ToggleButton;
public class CustomButtonController {
@FXML
private ResourceBundle resources;
@FXML
private URL location;
@FXML
private Label dateLabel;
@FXML
private ToggleButton selectionToggle;
@FXML
private Label eventLabel;
private Parent m_parent;
@FXML
void initialize() {
assert dateLabel != null : "fx:id=\"dateLabel\" was not injected: check your FXML file 'CustomButton.fxml'.";
assert selectionToggle != null : "fx:id=\"selectionToggle\" was not injected: check your FXML file 'CustomButton.fxml'.";
assert eventLabel != null : "fx:id=\"eventLabel\" was not injected: check your FXML file 'CustomButton.fxml'.";
}
public void setParent(Parent parent) {
m_parent = parent;
selectionToggle.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
m_parent.pseudoClassStateChanged(PseudoClass.getPseudoClass("state2"), selectionToggle.isSelected());
m_parent.applyCss();
}
});
}
}
Main.java:
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javafx.application.Platform;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Parent;
import javafx.scene.Scene;
public class Main implements Runnable {
@Override
public void run() {
JFrame frame = new JFrame("Test Frame");
frame.setSize(800, 600);
JPanel panel = new JPanel();
frame.setContentPane(panel);
FXMLLoader loader = new FXMLLoader(getClass().getResource("/CustomButton.fxml"));
Parent parent = loader.load();
String cssString = getClass().getResource("/CustomButton.css").toExternalForm();
parent.getStylesheets().add(cssString);
CustomButtonController cont = loader.<CustomButtonController>getController();
cont.setParent(parent);
JFXPanel jfxPanel = new JFXPanel();
jfxPanel.setScene(new Scene(parent));
panel.add(jfxPanel);
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
new JFXPanel();
Platform.runLater(new Main());
}
});
}
}
CustomButton.css:
.custom-button:state2 {
-fx-base: cyan;
-fx-text-fill: red;
-fx-fill: yellow;
-fx-stroke: purple;
}
.custom-button {
-fx-base: green;
-fx-text-fill: blue;
}
Result (top is unselected, bottom is selected):
https://i.sstatic.net/ln7zt.png
Note that the ToggleButton follows -fx-base property, the date Label updates its initial color when given a CSS class directly, but does not reflect changes on toggling, and the event Label does not apply any styles from the CSS file.