How to set specific css value for javaFX ProgressBar at runtime?

Question

I have regular CSS for mine ProgressBar:

.progress-bar > .track {
  -fx-background-color: transparent;
}
.progress-bar > .bar {
  -fx-background-color: transparent;
  -fx-background-image: url('/images/progress_bar.png');
  -fx-background-size: 1600px 50px;
  -fx-background-repeat: no-repeat;
}

The image progress_bar.pngis a 3-color stripe that changes from green to red when it reaches the end. It works well when the application starts.

My problem is those hardcoded values ​​for the background size. This work on full HD displays fine, but at 1366x768 most of the yellow-red parts are cut out. I would like to set this property at runtime to fit the screen size. Is it possible?

I tried to use the method setStyle()in ProgressBar, but to no avail. Maybe I'm just doing it wrong, so if anyone has a working example ...

100% ( px), . , 100% .

:

Answer 1

, CSS. Skin, bar Node ImageView bar :

progress.BarBackgroundProgressBarSkin

public class BarBackgroundProgressBarSkin extends ProgressBarSkin {

    public BarBackgroundProgressBarSkin(ProgressBar control) {
        super(control);
    }

    private ImageView barBackground;

    @Override
    protected void initialize() {
        super.initialize();

        barBackground = new ImageView();

        barBackground.setManaged(false);

        barBackground.setPreserveRatio(false);
        barBackground.getStyleClass().setAll("bar-background");
        int barIndex;

        List<Node> children = getChildren();
        int size = children.size();

        for (barIndex = 0; barIndex < size && !children.get(barIndex).getStyleClass().contains("bar"); barIndex++) {
        }

        Region bar = (Region) children.set(barIndex, barBackground);
        barBackground.setClip(bar);

        // fill the bar for clipping
        bar.setBackground(new Background(new BackgroundFill(Color.WHITE, new CornerRadii(2), new Insets(3, 3, 4, 3))));
    }

    @Override
    protected void layoutChildren(double x, double y, double w, double h) {
        // set pos
        barBackground.setLayoutX(x);
        barBackground.setLayoutY(y);

        // set size
        barBackground.setFitHeight(h);
        barBackground.setFitWidth(w);

        super.layoutChildren(x, y, w, h);
    }

}

style.css

.progress-bar {
    -fx-skin: 'progress.BarBackgroundProgressBarSkin';
}

.progress-bar > .bar-background {
    /* your image goes here */
    -fx-image: url('http://i.stack.imgur.com/glUAd.png');
}

.progress-bar > .track {
    -fx-background-color: transparent;
}

Demo

@Override
public void start(Stage primaryStage) {

    ProgressBar progressBar = new ProgressBar();

    StackPane root = new StackPane();
    root.getChildren().add(progressBar);
    progressBar.setPrefSize(300, 18);

    Scene scene = new Scene(root, 200, 200);

    scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

    Timeline tl = new Timeline(
            new KeyFrame(Duration.ZERO, new KeyValue(progressBar.progressProperty(), 0d)),
            new KeyFrame(Duration.seconds(10), new KeyValue(progressBar.progressProperty(), 1d, Interpolator.EASE_OUT))
    );

    tl.setCycleCount(Animation.INDEFINITE);
    tl.play();

    primaryStage.setScene(scene);
    primaryStage.show();
}