Controlfx - Rating width

Question

I am using RatingBar from Controlfx.

I´d like to bind the width value, but It dont allow to be a value < 248.

@FXML
private Rating vipRating;

        vipRating.prefWidthProperty().bind(ratingVBox.prefWidthProperty());

score 2 · Accepted Answer · answered Jun 18 '17 at 15:34

RatingBar has a padding value in CSS for button selector:

.rating > .container > .button {
    -fx-background-color: transparent;
    -fx-background-image: url("unselected-star.png");
    -fx-padding: 16 16; 
    -fx-background-image-repeat: no-repeat;
}

We should remove this padding.

.rating > .container .button {
        -fx-background-size: cover;
        -fx-padding: 0; 
    }

We also should apply the width/height value to the button instead of the rating box.

 .rating > .container .button {
            -fx-pref-width: 20 ;
            -fx-pref-height: 20 ;
            -fx-background-size: cover;
            -fx-padding: 0; 
        }

And to make this work programatically, there is another undocumented behavior:

If you do:

ratingHeigth.bind(mainBorderPane.prefHeightProperty());
    vipRating.styleProperty().bind(Bindings.concat(".rating > .container .button{ -fx-pref-height: ", ratingHeigth.asString(), ";}"));

It wont work due to inline styles simply apply the actual style specified by the string to the node on which you call setStyle(...): an inline style does not include selectors.

So we should create a CSS variable in CSS file, like this:

.rating {
    button-width: 32;
    button-height: 32;
}

 .rating > .container .button {
                -fx-pref-width: button-width;
                -fx-pref-height: button-height;
                -fx-background-size: cover;
                -fx-padding: 0; 
            }

Now inline style should be applied to the new CSS variable.

ratingWidth.bind(centerPane.prefWidthProperty());
        vipRating.styleProperty().bind(Bindings.concat("button-width: ", ratingWidth.asString(), ";"));

purring pigeon · Answer 2 · 2017-06-15T17:17:25.647

0

You could something like this:

DoubleBinding minPrefBinding = Bindings.createDoubleBinding(() -> {
        if(ratingVBox.getPrefWidth() < 248.0){
            return 248.0;
        }
        return ratingVBox.getPrefWidth();
    }, ratingVBox.prefWidthProperty());

 vipRating.prefWidthProperty().bind(minPrefBinding);

edited Jun 15 '17 at 17:17

answered Jun 15 '17 at 17:04

purring pigeon

4,141
5
35
68

Sorry for the confusion, but the problem is that I want to get a value under 248, but the Rating Node dont let me put a value below that. Any value for width below 248, in the node it keep 248. – Marckaraujo Jun 15 '17 at 18:49

eckig · Answer 3 · 2017-06-18T13:05:24.570

0

Adjust the minimum width: vipRating.setMinWidth(Region.USE_PREF_SIZE); or vipRating.setMinWidth(0);.

Edit:

Looking into the ControlsFX Source it seems the Rating control uses PNG graphics for its appearance. These icons are 32x32 pixels and the container aligning the 5 star icons has a spacing of 4.

Easy math: (32 + 4) * 5 - 4 = 176.

176 is the minimum width this control can have. You might override the CSS and remove the spacing, this will give you another 16 pixels, so you'll end up with 160 pixels.

Demo App showing printing the minimum size:

@Override
public void start(Stage primaryStage) throws Exception {
    final Rating rating = new Rating();

    final BorderPane pane = new BorderPane(rating);
    pane.setMaxWidth(Region.USE_PREF_SIZE);

    primaryStage.setScene(new Scene(pane));
    primaryStage.show();

    Platform.runLater(()->System.out.println(rating.getWidth()));

}

And if you really want to remove the spacing, just add the following CSS rule:

.rating > .container {
    -fx-spacing: 0;
}

edited Jun 18 '17 at 13:05

answered Jun 18 '17 at 07:07

eckig

10,964
4
38
52

@Marckaraujo Then please clarify and show us a working and simple example. The source code of the `RatingSkin` does not indicate a sign of a fixed minimum width, so I guess there is something wrong in your layout? – eckig Jun 18 '17 at 11:57
Yes, that why I open a bounty, thats no a minimum width in source code and it still doesnt work. – Marckaraujo Jun 18 '17 at 12:11
@Marckaraujo But we are developers not fortunetellers.. we need a simple and working example to reproduce this. "My code doesnt work" is not a question for SO.. – eckig Jun 18 '17 at 12:24
Thats no special need here. If you simple add this component to your FXML, you gonna see that no way to modify the width value. – Marckaraujo Jun 18 '17 at 12:37

Controlfx - Rating width

3 Answers3