Clever Geek Handbook

Can I use setStyle () to directly change the style of the Node substructure class?

I have an object that implements a custom ProgressBar. Sometimes I want the bar track to be white, and sometimes I want it to be black. I found I can set a default for it in my .css file using the following:

.my-bar .track {
    -fx-background-color: bar-default-color;
}

I was hoping I could change this color in the constructor based on the values ​​passed in. But even though Googling for all of this, I have yet to find an example where Node.setStyle () is used to change the style of a substructure class. Calling setStyle ("- fx-background-color: wish-color") directly on the ProgressBar object produces odd colors that don't match what I wanted. I'm pretty sure because I need to set it to .Track Substructure instead of the parent class. So how do I access and change it using code?

+3


source to share


2 answers


You cannot directly change the CSS property with setStyle (), but (as an alternative for searching) you can change the color used in the CSS property. These colors are defined in modena.css .root

.

So, for your use case, the progress bar track is defined as:

.progress-bar > .track {
      -fx-background-color: 
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom, 
            derive(-fx-control-inner-background, -7%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -3%),
            derive(-fx-control-inner-background, -9%)
          );
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
    -fx-background-radius: 4, 3, 2; /* 10, 9, 8 */
}


Here -fx-shadow-highlight-color

, -fx-text-box-border

and -fx-control-inner-background

are predefined colors. They can be changed using setStyle:

progBar.setStyle( "-fx-control-inner-background: aqua; 
                   -fx-text-box-border: red; 
                   -fx-shadow-highlight-color:yellow"
                );
+2


source


You can retrieve a node with styleclass .track

from ProgressBar

using lookup () on it and then style it to it:



final Node track = progressBar.lookup(".track");
track.setStyle("-fx-background-color: desired-color");
+4


source






More articles:


All Articles