Fluent Design style Combo Box and Scroll Bar for Java, JavaFX

This time I’ll be describing version 4 of JMetro which has just been released.
JMetro is a Java, JavaFX theme inspired by Fluent Design. This version brings new styles to the following controls:

• Combo Box;
• Scroll Bar;
• Scroll Pane.

These new styles are comprised of a new dark and light version.

JMetro 4.0 details

I first started by updating the Combo Box.

Combo Box new style

Colors have changed, and also the down arrow image:

Combo Box OLD JMetro Light Theme

Combo Box NEW JMetro Light Theme

The down arrow image has a thinner stroke and is wider.

One thing that doesn’t happen in Fluent Design but happens with JMetro is that when you mouse press the Combo Box it immediately starts to open up to key presses from the keyboard. This is indicated by the focus indicator: the border of the Combo Box turns black (white in the case of the dark theme). Pressing the down and up arrow keyboard keys will now change the selected item. This is the default behavior of JavaFX.

You’ll notice above that JavaFX adds scroll bars when the Combo Box has more content. The first Combo Box is fine without the scroll bars whereas the one below shows them for the user to be able to scroll through a larger content set.

Combo Box OLD JMetro Dark Theme

Combo Box NEW JMetro dark theme

Scroll Bar new style

Since I’ve changed the Combo Box style I took the opportunity to also update the Scroll Bar. I did this because, like I said, Scroll Bars can also be used inside Combo Box’s.

Scroll Bar OLD JMetro light theme

Scroll Bar NEW JMetro light theme

The colors are slightly different and the arrow has changed to one with a thinner stroke. The same is true of the dark style, with the arrow image color changing to white.

ScrollBar OLD JMetro Dark Theme

ScrollBar NEW JMetro Dark Theme

And the new Scroll Pane light and dark style:

ScrollPane NEW JMetro light theme

ScrollPane NEW JMetro dark theme

Wrapping up

Version 4.0 of JMetro brings new styles to the Scroll Bar and the Combo Box. These control’s arrow images were made thinner and wider.  Colors of light and dark theme have also changed, sometimes just slightly.

12 controls have been updated since version 3.0 came out, a few weeks ago. This included new styles for controls that didn’t have them as well as refreshing existing styles. Since there is a dark and light version for every control, that’s 24 new styles since the start of this last iteration!

With those 24 new styles there’s tons of small detail changes. They might seem tiny, but all of them added up is what can make an interface shine.

The versioning I’ve been adopting might seem a bit odd to you (and maybe it actually is) but my objective is, in version 5.0, to finish refreshing the looks of all the important controls. Also, maybe one or two additions of new styles for controls that don’t have them yet and possibly a new feature that would allow changing the colors of the theme with a method call or through a CSS variable override.

As usual follow me on twitter and subscribe to this blog to stay up-to-date.