Metro style Rating control for java (JMetro)

The Rating control is one of Windows first class citizens, it’s available in its control library, it allows a user to rate something from 0 to an x value. Given the importance of today’s social interaction it’s no wonder it has gained the status of a library control.

ControlsFX is a third party library of controls for JavaFX, it complements the standard library with some more useful controls and functionality which are not available straight from JavaFX’s standard library. One of the controls present is the Rating control which I opportunely took the chance to use and style the metro way through CSS.

The Rating control (default style)

In its default style, this control uses raster image files. One for the “selected” state:

and one for the “unselected” state:

Using this CSS code for the “unselected” state:

.rating > .container > .button {
  -fx-background-image: url("unselected-star.png");
}

And this for the “selected” state:

.rating > .container > .button.strong {
  -fx-background-image: url("selected-star.png");
}

“.strong” is the style class given to “selected” star buttons.

For JMetro I wanted to use vector based images instead of raster ones. To that effect I used the CSS property: “-fx-shape” and set the “-fx-background-image” to null which is the same as removing it.

Rating control – Dark theme (mouse pressed)

Rating Control – Dark theme

Rating control – Light theme (mouse pressed)

Rating control – Light theme

Advantages of using vector based images:

• You can make them as big as you want without losing image quality
• Fill color, stroke color, etc can be tweaked through CSS
• It occupies less space

By this, I’m not saying that vector based images should be used every time, there are certainly use cases where raster based ones are more convenient, specially at lower sizes.

In conclusion, you can do some really powerful stuff this way using only JavaFX CSS code. You can either rely on the usage of raster based images or vector based ones.