Dynamically change JavaFX properties for specific classes in CSS

Question

I am writing code that allows a user to build a theme for the application, so they need to be able to effectively communicate that they want to change something about some element of JavaFX.

Suppose I have a bar on the top of every view that lets a user change the way some set of things look: button, label, text, and so on.

Here is a basic stylesheet that I am working with. It just puts style on root and button.

basetheme.css

  .root {
            -fx-background-color: "teal";
    }
    
    Button { 
        -fx-background-color: "orange";
        -fx-font-size: 2em;
        -fx-text-fill: #0000ff
    }

Right now, all the views I have would load this sheet each time they are loaded:

view.getStylesheets().add("views/basetheme.css");

The Button class and its fx properties here would apply to all buttons in the view. This is the behavior I want. I want the user to have leverage over Button and its properties during runtime.

For instance, if they want to change Button's -fx-font-size property from -fx-font-size: 2em to -fx-font-size: 3em, they can do that. Is this possible?

Currently, I know setStyle will set properties on some elements, but I am looking for a way to do this for not just a single Button, Label, and so on, but for all them. I want there to be run-time changes. For instance, after a user changes some element like button and one of its properties, it reloads that view and the change is applied.

I want to do something like view.setStyle("Button: some properties") and then it add those properties to Button class or overrides it, instead of view.setStyle("some properties") adding properties to root. The latter would not recognize that the property goes on a button, let alone all Buttons in view.

The obvious reason why this might not work this way is that we are not really changing the css file when we do those inline setStyle calls, just setting over the existing property and thus that inline has higher precedence and is updated.

I know I could technically do somebutton.setStyle("some properties"), but I want the user to be able to modify properties for all Button elements by specifying it at the root of a view so the styles trickle down to subelements in the view. This makes things easier.

you might manage custom style sheets, see f.i. stackoverflow.com/q/24762217/203657 - looks a bit awkward (because adding them requires an url), though — kleopatra
– kleopatra, Commented Nov 23, 2020 at 13:11
tutorials.de/threads/inputstream-in-url-umwandeln.245313 is an example of how to pass an in-memory inputStream (that could be a byteArrayStream on a dynamic rule) as url - it's very old but working. There could be something newer. — kleopatra
– kleopatra, Commented Nov 23, 2020 at 14:11
@kleopatra yeah, i think reloading and rereading the css is chill, I just gotta write new css each time. thanks for linking this! — Xenon
– Xenon, Commented Nov 24, 2020 at 5:21

Dirk Lemmermann · Accepted Answer · 2020-11-23 14:36:20Z

1

You could use CSSFx to constantly pull in a CSS file that has bee written by your app.

answered Nov 23, 2020 at 14:36

Dirk Lemmermann

1666 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kleopatra Over a year ago

hmm .. could you clarify a bit?

Dirk Lemmermann Over a year ago

The CSSFx project on GitHub: github.com/McFoggy/cssfx You can call CSSFx.start() and it will monitor your CSS files. Whenever any file changes it gets reloaded. Just like in ScenicView.

Collectives™ on Stack Overflow

Dynamically change JavaFX properties for specific classes in CSS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related