Edit JavaFX CSS at runtime

Question

I\'m creating a CSS stylesheet for a JavaFX 8 application.

I\'m repeating these steps several times:

1. Edit the CSS
2. Run the application and see the

Answer 1

You will have to change using getStylesheets() / setStyle() etc.

In the example below I had to use a temp file as I am changing the CSS of the scene, when using into single components this is not necessary as you can change directly in the components.

You may download this example on gist.

Test.java

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Test extends Application{

    @Override
    public void start(Stage primaryStage) throws Exception {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("doc.fxml"));
        Parent root = (Parent)loader.load();
        CSSController myController = loader.getController();
        Scene scene = new Scene(root);
        myController.setScene(scene);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }

}

CSSController.java

import java.io.BufferedWriter;
import java.io.File;
import java.io.FileWriter;
import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;

public class CSSController implements Initializable{
    private Scene scene;
    @FXML TextArea cssContent;
    @FXML Button defineCSSButton;
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        defineCSSButton.setOnAction(new EventHandler<ActionEvent>(){
            @Override
            public void handle(ActionEvent event) {
                String css = cssContent.getText();
                try{
                    File temp = new File("tempfile.css"); 
                    temp.delete();
                    temp.createNewFile();
                    BufferedWriter bw = new BufferedWriter(new FileWriter(temp));
                    bw.write(css);
                    bw.close();
                    String url = "tempfile.css";
                    scene.getStylesheets().add(temp.toURI().toString());
                }catch(Exception e){
                    e.printStackTrace();
                }
            }
        });    
    }
    public void setScene(Scene scene) { this.scene = scene; }
}

doc.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.*?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity"
    minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0"
    prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="CSSController">
    <children>
        <TextArea fx:id="cssContent" layoutX="14.0" layoutY="26.0"
            prefHeight="292.0" prefWidth="319.0" />
        <Label layoutX="22.0" layoutY="6.0" text="Define your CSS here:" />
        <Button fx:id="defineCSSButton" layoutX="14.1875" layoutY="333.5"
            mnemonicParsing="false" text="Define CSS" />
        <Line endY="400.0" layoutX="332.0" />
        <Label layoutX="418.0" layoutY="15.0" text="Components:" />
        <ChoiceBox layoutX="343.0" layoutY="48.0" prefWidth="150.0" />
        <ColorPicker layoutX="343.3759765625" layoutY="86.0" />
        <CheckBox layoutX="347.6650390625" layoutY="123.0"
            mnemonicParsing="false" text="CheckBox" />
        <MenuButton layoutX="343.37109375" layoutY="159.5"
            mnemonicParsing="false" text="MenuButton">
            <items>
                <MenuItem mnemonicParsing="false" text="Action 1" />
                <MenuItem mnemonicParsing="false" text="Unspecified Action" />
                <MenuItem mnemonicParsing="false" text="Unspecified Action" />
                <CheckMenuItem mnemonicParsing="false" text="Unspecified Action" />
            </items>
        </MenuButton>
        <ProgressIndicator layoutX="347.9091796875" layoutY="200.01953125"
            progress="0.0" />
        <Slider layoutX="410.0" layoutY="213.01953125" />
        <ToggleButton layoutX="348.7421875" layoutY="254.0"
            mnemonicParsing="false" text="ToggleButton" />
    </children>
</AnchorPane>

Css in the screenshot:

.label{
-fx-font: 15px "System Bold";
-fx-text-fill: #FF0000;
}

.button{
    -fx-background-color:
        #c3c4c4,
        linear-gradient(#d6d6d6 50%, white 100%),
        radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%);
    -fx-background-radius: 30;
    -fx-background-insets: 0,1,1;
    -fx-text-fill: black;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 );
}