Editing JavaFX CSS at runtime

Question

I am creating a CSS stylesheet for a JavaFX 8 application.

I repeat these steps several times:

• Change CSS
• Launch the application and view the changes.
• Stop application

I found this approach very time consuming and was looking for something smarter.

Is it possible to edit the CSS of my JavaFX application while running and see the result in real time?

I'm looking for something like Inspect Google Chrome Tool .

This can be partially achieved with Oracle Scene Builder . In fact, I can download the CSS file and run the preview. Any changes to the CSS file are displayed in the preview without having to restart.

Unfortunately, this is just a preview: many components are empty / uninitialized. Of course, this is very useful in any case, but for many refinements a real application is required.

Answer 1

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

In the example below, I had to use a temporary file, because I change the CSS of the scene, when used in separate components, this is not necessary, since you can directly change the components.

You can download this example by default .

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 );
}