Desktop Java

Fluent Design Style Text Field And Password Field For Java, JavaFX

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:

TextField- JMetro OLD Light Theme
TextField- JMetro OLD Light Theme

Text Field – JMetro OLD Dark Theme
Text Field – JMetro OLD Dark Theme

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

Password Box – JMetro OLD Light Theme
Password Box – JMetro OLD Light Theme

Password Field – JMetro OLD dark theme
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:

TextField – JMetro NEW light theme
TextField – JMetro NEW light theme

TextField – JMetro NEW dark theme
TextField – JMetro NEW dark theme

New Password Field styles look as follows:

Password Field – JMetro NEW light theme
Password Field – JMetro NEW light theme

Password Field – JMetro NEW dark theme
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!

Published on Java Code Geeks with permission by Pedro Duque Vieira, partner at our JCG program. See the original article here: Fluent Design Style Text Field And Password Field For Java, JavaFX

Opinions expressed by Java Code Geeks contributors are their own.

Pedro Duque Vieira

JavaFX and Swing, Freelancer and Consultant specialized in creating User Interfaces. Has been working as a front end consultant and has been developing web, native and cross platform since 2006. Holder of a master degree in Computer Science, he's permanently studying and taking courses in User Interface Design and User Experience. Owner of the software company Pixel Duke.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Back to top button