1

Is it possible to change the way the JFXSpinner progress text is displayed. I don't want it to be displayed as a percentage but as an index between 0 and 1.

TheZopo
  • 304
  • 2
  • 12
  • 1
    As the Text is set in `layoutChildren` method of the skin, AFAIK it is a little bit tricky. However, it is easy enough to code your own CircularIndicator component (I did it for my project). (One solution would have been to set the progress between 0 and 1/100 but the percentage symbol would be remained.) – Pagbo Apr 23 '18 at 08:25
  • (... and the loading circle not fulfilled) – Pagbo Apr 23 '18 at 10:53
  • 1
    @Pagbo not overly tricky ... just subclass the skin, lookup the text control, override layoutChildren and after calling super, set the text to whatever you want :) – kleopatra Apr 23 '18 at 14:15
  • @kleopatra When it is said like this, it actually does not seem tricky at all (even if I am not fond of `Node#lookUp(String)` method and I avoid using it in most of case). How can we apply this custom skin ? Would be sufficient to only apply it in the `-fx-skin` parameter of the css stylesheet ? – Pagbo Apr 23 '18 at 14:39
  • 1
    @Pagbo yeah. Alternatively and if you want to enhance its api (like f.i. make the text formatting configurable), subclass the control as well and override its createDefaultSkin to return the custom skin. – kleopatra Apr 24 '18 at 07:54
  • @kleopatra Thanks a lot for the information/clarification, I will give a try for fun. – Pagbo Apr 24 '18 at 07:58

2 Answers2

1

So I've succeed by subclassing JFXSpinnerSkin and overriding layoutChildren. I get the Text node with Node#lookup() and change it's text. As the text wasn't centered anymore, I checked the source code, got the centering line and adapted it.

public class SpinnerCustomSkin extends JFXSpinnerSkin {
    private SpinnerCustom control;
    private DecimalFormat formatter = new DecimalFormat("0.00");

    public SpinnerCustomSkin(SpinnerCustom control) {
        super(control);

        this.control = control;
    }

    @Override
    protected void layoutChildren(double contentX, double contentY, double contentWidth, double contentHeight) {
        super.layoutChildren(contentX, contentY, contentWidth, contentHeight);

        Text text = ((Text) getNode().lookup("Text"));
        text.setText(formatter.format(control.getProgress())); //Or whatever you want to display
        text.relocate((control.getRadius() - text.getLayoutBounds().getWidth()) / 2, (control.getRadius() - text.getLayoutBounds().getHeight()) / 2);
    }
}

Finnaly, I just subclassed the JFXSpinner element, maybe it's possible to set the skin by another way, but I didn't foud (in fact I didn't searched for so long).

public class SpinnerCustom extends JFXSpinner {
    @Override
    protected Skin<?> createDefaultSkin() {
        return new SpinnerCustomSkin(this);
    }
}
TheZopo
  • 304
  • 2
  • 12
0

I had to go the source code of JFXSpinnerSkin.java and found that text object has the styleClass: text or percentage, so in css you have to do the following:

.jfx-spinner .percentage
{
    -fx-stroke: white;
}

Note: If you are using JavaFX Scene Builder or similar i suggest you add these classnames in the "Style Class" field.

BaderDa
  • 1