How to Add a CSS Stylesheet in Fxml

Setting stylesheets declaratively in FXML

You can set stylesheets on Parent nodes using:

parent.getStylesheets().add("/resources/shell.css");

Because the elements and attributes usable in FXML are derived from the public JavaFX Java API, then you can also assign stylesheets to a Parent node using an FXML stylesheets element (or interchangeably an attribute). As all containers extend Parent, you can set one or more custom stylesheets on any container you reference in FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import java.net.URL?>
   ....
<?scenebuilder-stylesheet fruitcombo.css?>

<AnchorPane prefHeight="205.0" prefWidth="168.0"
   styleClass="layout"
   fx:controller="fruit.FruitComboController"
   xmlns:fx="http://javafx.com/fxml">
   <children>
      ....
   </children>
   <stylesheets>
      <URL value="@fruitcombo.css" />
   </stylesheets>
</AnchorPane>

See the fxml file in this sample for a complete executable sample of referencing a css file from an fxml file.

There are a couple of nice to have features in the above code:

The strange @ prefix in the stylesheets URL isn't strictly needed, but can be used to take advantage of JavaFX's location resolution. "The location resolution operator (represented by an "@" prefix to the attribute value) is used to specify that an attribute value should be treated as a location relative to the current file rather than a simple string."

The following line isn't required at runtime, but is used by the SceneBuilder tool to locate the required css stylesheet at design time if you are using that tool:

<?scenebuilder-stylesheet fruitcombo.css?>

Update regarding the comment

Warning: It's FXML 1.0, it's not working in 2.0, javafx.fxml.LoadException: URL is not a valid type.

This comment is a bit incorrect I think. As far as I am aware, there is no such thing currently as FXML 2.0.

The reason the commenter received a LoadException was because the indicative snippet in this post was not importing the the java.net.URL class into the FXML document. I updated the snippet to include the java.net.URL import and add some more ellipsis .... to clarify the intent of the snippet. An ellipsis means "a series of dots that usually indicates an intentional omission of a word, sentence, or whole section from a text without altering its original meaning".

To best understand this answer it is suggested to compile and run the linked sample code.

Warning against using InputStream load functions in FXMLLoader

I strongly advise constructing an new FXMLLoader with a location, rather than using the FXMLLoader.load(InputStream) function. When the static load() function is used, then relative location references cannot be resolved as there is no base location for the FXML file.

I.e., don't do:

 InputStream input = this.getClass().getResourceAsStream("layout.fxml");
 FXMLLoader loader = new FXMLLoader.load(input);
 Parent content = loader.load();

Instead do:

 String url = this.getClass().getResource("layout.fxml").toExternalForm();
 FXMLLoader loader = new FXMLLoader(url);
 Parent content = loader.load();  

How to attach a CSS stylesheet to FXML?

URL is a class in the java.net package; you should import it from the FXML:

<?import java.net.*?>

How to add a CSS-File to a JavaFX Scene without FXML?

scene.getStylesheets().add(getClass().getResource("/stylesheet.css").toExternalForm());

So basically, instead of this.setScene(new Scene(grid, 400, 275)); do this:

Scene scene = new Scene(grid, 400, 275);
scene.getStylesheets().add(this.getClass().getResource("/stylesheet.css").toExternalForm());
this.setScene(scene);

---

Related Topics