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..

Advertisements

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

 

 

 

Metro style Password Box for java (JMetro)

The metro style password field is very similar to the Text Box (Text Input Field) in its design. The look is very similar and it also has a button to the far right of the control.

passwordBoxWindows8

Password Box with the password masked

 

This time instead of clearing the field, pressing the button will reveal the text you’ve just entered which is by default masked. This is useful, especially for long passwords and while entering the password through touch instead of a keyboard, which is less error prone.

passwordBoxWindows8-buttonPressed

Password Box with the password revealed

 

So here are the screenshots of the light and dark theme of the Password Box JMetro skin implementation:

Password Box - Light theme

Password Box – Light theme

Password Box - Dark theme

Password Box – Dark theme

Metro style Text Box control for java (JMetro)

The Metro Text Box control is the usual input text field from which developers can get text input from users. This control has a particular trait usually present in control library designed to be used through touch: whenever the user enters text a clear button appears on the right most position of the control.

metroTextBox

Windows 8 Text input control

 

This particular feature isn’t available in the text input control from the JavaFX library, so the use of CSS won’t be enough to achieve a “metro” style.

For this reason I’ve created a new control: ErasableTextField (Yes, I know, not the best choice of a name for a control 🙂 ), which extends from TextField and adds this missing feature: a button which appears inside the text input control to clear it whenever there is text inside. Then through the usual use of CSS I style the control to make it look like the Windows 8 Text Box.

JMetro TextBox Dark theme - mouse pressed

JMetro Dark Theme – mouse pressed

JMetro TextBox Dark theme

JMetro Dark Theme

JMetro TextBox Light Theme - text selected

JMetro Light Theme – text highlighted

JMetro TextBox Light theme

JMetro TextBox Light Theme

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.

Rating control

The Rating control (default style)

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

selected-star

and one for the “unselected” state:

unselected-star

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 - Dark theme (mouse pressed)

Rating control – Dark theme (mouse pressed)

Rating - Dark theme

Rating Control – Dark theme

Rating - Light theme (mouse pressed)

Rating control – Light theme (mouse pressed)

Rating - Light theme

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.

Metro style ComboBox for Java (JMetro)

I’ll start this post by clarifying the purpose of this project. This project aims to provide skins for Javafx controls that are inspired by Metro style in Windows 8. The light theme tries to match as closely as possible the Windows 8 look while the dark theme which is not available on windows 8 is inspired by the metro look and provides a dark version.

There are some controls that exist in JavaFX but do not exist on Windows 8, for those controls I’ll try to reproduce a version that I think matches as closely as possible the Metro guidelines.

Finally, I’ve added one more style to the list of available controls: the ComboBox. Like I said before the light theme for this control tries to match as closely as possible the available version that exists on Windows 8, while the dark theme is a fresh new style inspired by the same Windows 8 control.

metro style combobox (dark theme)

Metro style ComboBox (Dark Theme)

metro style combobox (dark theme) 2

Metro style ComboBox (Dark Theme)

metro style combobox (light theme)

Metro style ComboBox (Light Theme)

metro style combobox (light theme) 2

Metro style ComboBox (Light Theme)