Dynamically add CSS stylesheets in JavaFX


Question

I would like to add a CSS file which is located somewhere on the filesystem. The purpose is to write an application where the user can add JavaFX CSS files (which are created by anyone and located anywhere) dynamically.
I tried something like that, only for testing, to see if dynamically added CSS files works:

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Label label = new Label("Hello");
        Scene scene = new Scene(label);

        //file would be set by an file chosser
        File file = new File("C:/test.css");
        scene.getStylesheets().add(file.getAbsolutePath());

        primaryStage.setTitle("Title");
        primaryStage.setScene(scene);
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

But I get always the same error:

WARNING: com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged Resource "C:\test.css" not found. 

How can I fix it?

1
7
7/2/2016 7:29:01 PM

Accepted Answer

Your problem is that you aren't using a URL. Here you can find more documentation on how the CSS is loaded alongside the CSS reference.

If you have the URL as a String you could set the CSS dynamically with an external file like so:

private boolean isANext = true;

public void start(Stage primaryStage) throws Exception {
    Button button = new Button("Change CSS");
    VBox vbox = new VBox(10);
    vbox.setAlignment(Pos.CENTER);
    vbox.getChildren().add(button);
    scene = new Scene(vbox, 200, 200);

    button.setOnAction(ev -> {
        // Alternate two stylesheets just for this demo.
        String css = isANext ? "file:///C:/temp/a.css" : "file:///C:/temp/b.css";
        isANext = !isANext;
        System.out.println("Loading CSS at URL " + css);

        scene.getStylesheets().clear();
        scene.getStylesheets().add(css);
    });

    primaryStage.setTitle("Title");
    primaryStage.setScene(scene);
    primaryStage.show();
}

In the a.css

.button {    
    -fx-text-fill: white;
    -fx-background-color: red;
}

And in b.css

.button {    
    -fx-text-fill: white;
    -fx-background-color: black;
}
11
7/2/2016 7:36:34 PM

If css in same packaage simply use

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

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon