Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Fluent Design Style Text and Password Field for Java, JavaFX

DZone's Guide to

Fluent Design Style Text and Password Field for Java, JavaFX

Want to learn more about the fluent design style change for the password and text fields in Java and JavaFX? Click here to learn more about these changes.

· Java Zone ·
Free Resource

Atomist automates your software deliver experience. It's how modern teams deliver modern software.

I’ve just released version 4.5 of Java, JavaFX theme JMetro. This version adds new styles for the text and password field, inspired, as usual, by Fluent Design.

In this post, I’m going to go over the text box and password box changes in this new release in greater detail.

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, here is 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;
  • The accent color is used when the controls are focused (control is open for, and receives keyboard input);
  • Hover colors have changed;
  • The 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

The 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 the differences between the new styles and Microsoft’s Fluent Design, namely icons. I don’t like the Fluent Design’s icon for the show password button on the password field — and the colors. I’m not fond of how, in the dark version, the color changes abruptly from black to white when the controls are 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 still very new. 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 the Java, JavaFX theme JMetro page. This will be updated soon with the details from this new version.

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

Hope you enjoyed!

Get the open source Atomist Software Delivery Machine and start automating your delivery right there on your own laptop, today!

Topics:
java ,jmetro ,templates ,password box ,text field ,text box ,password field

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}