CODEWITHSUNDEEP
javacssjavafxfxml
Samer
Samer

Reputation: 161

how to control CSS file from the Java controller in JavaFX

i've build an app with one theme and i use for that a CSS file when i finished it i m trying to give the User the choice of choicing colors that he prefer and the CSS file is included in the FXML files for each Stage 

 *{
    -fx-primary :#2A2E37 ;
    -fx-secondary : #FFFF8D;
    -fx-primarytext : #B2B2B2;
    -fx-blue: #1976D2;
    -fx-red: #FF0000;
    -fx-green:#2E7D32; 

}
.root{ 
    -fx-background-color: -fx-primary;
}

i wanna some methode that change the value of my -fx-primary for example and the color will be choosen from a pallette ( i can do that ) and for fxml i use the simple method 

<AnchorPane fx:id="rootAnchoreFW" prefHeight="800.0" prefWidth="767.0" stylesheets="@../Style/myTheme.css" >

Upvotes: 0

Views: 1928

Answers (3)

charles Lgn
charles Lgn

Reputation: 528

you can create an "CSS Editor"

you will have two css :

myTheme.css :

@import url("main.css");

*{
    -fx-primary :#2A2E37 ;
    -fx-secondary : #FFFF8D;
    -fx-primarytext : #B2B2B2;
    -fx-blue: #1976D2;
    -fx-red: #FF0000;
    -fx-green:#2E7D32; 
}

main.css :

.root{ 
    -fx-background-color: -fx-primary;
}

you will have the same code for your fxml :

<AnchorPane fx:id="rootAnchoreFW" prefHeight="800.0" prefWidth="767.0"
            stylesheets="@../Style/myTheme.css" >

to edit the css you have two option :

  • read the CSS file, export data, update it (delete the old CSS file and créate a new file)

  • read a config file (txt, JSON, XLM...) to store data of you configaration and recreate the scc with it.

It will be a part of the anwser I think

Upvotes: 0

gonzaloan
gonzaloan

Reputation: 371

You can make several themes for this colors. For example, a file called themeRed.css, themeBlue.css

   .root{
    -fx-font-size: 14pt;
    -fx-font-family: "Tahoma";
    -fx-base: #DFB951;
    -fx-background: #A78732;
    -fx-focus-color: #B6A678;
}

And, you have a button that changes colors or themes.

You can set your themes in your app with something like this:

public String themeRed = getClass().getResource("themeRed.css").toExternalForm(); public String themeBlue = getClass().getResource("themeBlue.css").toExternalForm();

and in the button click action, or in the method triggered when a click happens, you can use:

btn.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent event) {
        scene.getStylesheets().remove(themeRed);
        scene.getStylesheets().add(themeBlue);
        System.out.println("Stylesheets: " + scene.getStylesheets());
        //You can see the stylesheet being used
    }
});

You can play with that to change themes.

The other option is if you just change let's say, one css line, like background in one button for example, you can use the setStyle method in every element you want.

For example:

btn.setStyle("-fx-background: #A78732;");

Upvotes: 1

Mohamed Benmahdjoub
Mohamed Benmahdjoub

Reputation: 1280

If for example you are using a ColorPicker colorPicker : 

colorPicker.valueProperty().addListener((obs, oldValue, newValue) -> {
            yourAnchorPane.setStyle("-fx-primary : " + newValue);
});

So basically you need to use the setStyle function, add the attribute you want to change and its value like in CSS.
Or else (If you don't want to put an attribute) you can just do something like this to change the color of a label for instance : 

label.setTextFill(colorPicker.getValue())

Upvotes: 0

Related Questions