JavaFX loading CSS style from resources folder

Question

Project Structure:

I'm currently developing a JavaFX application in Eclipse and I'm having trouble loading a .css stylesheet from the resources folder.

I've already added the resources folder to the classpath (Project Properties -> Source -> Add Folder)

The following code is being used:

this.getStylesheets().add(getClass().getResource("/CSS/application-container.css").toExternalForm());

getResource() is throwing NullPointerException I've read other posts and tried everything but can't seem to get it to work.

EDIT: Managed to get it working by deleting and restoring the bin folder. Now the .css is loaded but by some reason it's not being applied, however using the javaFX method .setStyle(...) with the same content of the .css, it works.

private void buildHeader() {
    this.header.setId("header-container");
    this.getStylesheets().add(getClass().getResource("/CSS/application-container.css").toExternalForm());
    // this.header.setStyle("-fx-background-color: #7b9bce;");      this way works
}

CSS:

@charset"utf-8";

#header-container {
    -fx-background-color: #7b9bce;
}

Check the contents of the build folder to see if the CSS file is in the expected place. — James_D, Jan 20 '17 at 18:43
@James_D the .css file got copied by eclipse in bin/CSS/application-container.css, so it seems that's okay. Don't know why there is no resources folder inside bin though — Franch, Jan 20 '17 at 19:00
There's no resources folder inside bin, because it's a source folder, not a package. That all looks correct. Are you certain that `getClass().getResource("/CSS/application-container.css")` is returning null? (i.e. you're not getting the npe from somewhere else). Try `System.out.println(getClass().getResource(...))` to check. — James_D, Jan 20 '17 at 19:05
@James_D I deleted the bin folder and re-added the resources folder to the build path and now getResource is no longer returning null. The issue I'm having now is that the style is not applying, however `hbox.setStyle(...)` works perfectly fine and renders the style. But I'd really like to use external .css to avoid mixing GUI design with code. — Franch, Jan 20 '17 at 20:13
Can you just show the part of your style that does not apply ? For information, the style applies only in the case of Nodes having a default style class (Controls) example (button/scroll-pane/combo-box...) , if you use their styleClass in your CSS code of course, If a node does not have a default class style, you must use an #style ID or a name you want, and assign it to your node by the `setId()` or `getStyleClass()` method. ! — Bo Halim, Jan 20 '17 at 20:40
@Franch [Edit] your question with additional information, instead of posting code in comments. — James_D, Jan 20 '17 at 21:09

score 1 · Accepted Answer · answered Jan 21 '17 at 16:09

Finally got it working with the external .css, apparently JavaFX CSS parser doesn't allow @charset "utf-8" or any @ anotation. It didn't show any warning whatsoever.

Solution:

Change this:

@charset"utf-8";

#header-container {
    -fx-background-color: #7b9bce;
}

To this:

#header-container {
    -fx-background-color: #7b9bce;

JavaFX loading CSS style from resources folder

1 Answers1