I’ve just released version 4.5 of Java, JavaFX theme JMetro. This version adds new styles for the Text Field and Password Field. Inspired, as usual, by Fluent Design.

In this post I’m going to go over the details about this new release.

JMetro version 4.5

Like I said in the introduction, JMetro 4.5 has just been released.

I’ll start by showing the old Text Field and Password Field styles, prior to JMetro 4.5:

Text Field JMetro light theme. Java, JavaFX style inspired by Microsoft's Metro (predecessor to Fluent Design)

TextField- JMetro OLD Light Theme

Text Field JMetro dark theme. Java, JavaFX style inspired by Microsoft's Metro (predecessor to Fluent Design)

Text Field – JMetro OLD Dark Theme

And the old light and dark style for the Password Field:

Password Field JMetro light theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Password Box – JMetro OLD Light Theme

Password Field JMetro dark theme, Java (JavaFX) style inspired by Microsoft Metro (predecessor of Fluent Design)

Password Field – JMetro OLD dark theme

These are some of the differences between the old styles and the new styles introduced in JMetro 4.5:

  • Colors have changed;
  • Accent color is used when the controls are focused (control is open for, and receives keyboard input);
  • Hover colors have changed;
  • Text has been made bigger by default;
  • Icons for clear and show password have been tweaked slightly (positioning and size).

And here are the new styles in action:

Text Field JMetro light theme. Java, JavaFX style inspired by Fluent Design (previously named Metro)

TextField – JMetro NEW light theme

Text Field JMetro dark theme. Java, JavaFX style inspired by Fluent Design (previously named Metro)

TextField – JMetro NEW dark theme

New Password Field styles look as follows:

Password Field JMetro light theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Password Field – JMetro NEW light theme

Password Field JMetro dark theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Password Field – JMetro NEW dark theme

There are differences between the new styles and Microsoft’s Fluent Design. Namely icons, I don’t like Fluent Design’s icon for the show password button on the Password Field. And colors, I’m also not fond of how in the dark version the color changes abruptly from black to white when the controls get focused.

Of course if you don’t agree you can easily add a stylesheet to override the JMetro looks after the call to applyTheme from the JMetro class.

In the future I plan to slightly update the show password icon and make its stroke thinner.

Wrapping up

JMetro version 4.5 is just out. With it new Password Field and Text Field styles are available.

As always if you want to look at the documentation you can check out Java, JavaFX theme JMetro page. Which will be updated soon with the details from this new version.

Next, I’ll probably be looking at, and updating the Progress controls.

Follow me on twitter. And enjoy.

9 thoughts on “Fluent Design Style Text Field And Password Field For Java, JavaFX

  1. That’s something on the TODO list. Adding a css property to toggle whether that should appear or not.
    Meanwhile you can try changing to the Modena text field skin, through the -fx-skin css property. So the styling remains but not the new functionality.

    • BTW Saied, you can also target that on a case by case situation, of course, so that not all TextFields get the “x” removed…

      • my problem with the x was that i tried to display text in arabic (right to left direction) and when i changed the alignment to CENTER_RIGHT the x is now hiding a portion of the text, hiding it by changing the skin worked but can i move it to the left side of the textfield through css ?

        • No you can’t. Can you file an issue for that in the JFXtras-styles issue tracker? For the support of right to left orientation in the skins..

Leave a Reply

Your email address will not be published. Required fields are marked *