Category Archives: JMetro

A Java, JavaFX Theme / Look and Feel. Styling of JavaFX controls based on Microsoft’s Fluent Design style (previously named Metro).
Visit JMetro Java, JavaFX theme page for more information.

Metro style spinner for java (JMetro)

It’s been a while since I’ve worked on JMetro.

This time a control that’s not part of the windows framework: the spinner.
I opted to style the control in its STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL style, that is horizontal arrows split between left and right sides. To style the control you need to add the style you want to the StyleClass observable list:

spinner.getStyleClass().add(Spinner.STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL);

the other possible styles are:

STYLE_CLASS_ARROWS_ON_LEFT_HORIZONTAL
STYLE_CLASS_ARROWS_ON_LEFT_VERTICAL
STYLE_CLASS_ARROWS_ON_RIGHT_HORIZONTAL
STYLE_CLASS_SPLIT_ARROWS_VERTICAL

And here are the controls in their light and dark theme:

spinner - light theme 2

Spinner – light theme

spinner - dark theme 2

Spinner – dark theme

 
 
As always you can get this at jfxtras.

Metro style Slider for java update (JMetro)

Hi,

Given the latest feedback on the slider here’s an update:

sliderLight

JMetro Slider Light Theme

sliderDark

JMetro Slider – Dark Theme

Basically the vertical slider fill was misplaced, instead of starting from the bottom it was starting from the top.

Enjoy..

Metro style Slider for java (JMetro)

One thing that’s missing from java 8 javafx slider is the fill that comes from the beginning of the slider to the thumb. You can see this in windows 8 as well as several other operating systems: ios 6 and 7, android, etc.

So by using only CSS, it is not possible to style the fill of the slider, to accomplish this you’d have to create your own skin to use with the slider. And that’s exactly what I did by creating the “FilledSliderSkin”.

With this skin set on the slider you can style its fill color, like so:

.slider .fill {
 -fx-background-color: #00828b;
 -fx-padding: 0.333333em; 
}
.slider .fill:hover {
 -fx-background-color: #219297;
}

You can use this skin to achieve the styles of ios 6, 7 and android sliders.

And here are the screenshots of the slider with a metro style:

Slider - Dark Theme

Slider – Dark Theme

Slider - Light Theme

Slider – Light Theme

Metro style ProgressBar for java (JMetro)

It’s been a while since my last post..

I’ve been doing some tweaks here and there but nothing too significant for a blog post. Unfortunately haven’t had much time to spend on side projects, hopefully I’ll have time to style a new control every other week or so..

So, this time it’s the ProgressBar (also some other tweaks to the existing styles). Enjoy!

ProgressBar (dark theme)

ProgressBar – Dark Theme

ProgressBar (light theme)

ProgressBar – Light Theme