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:

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.

Fluent Design Style Button, Toggle Button and Tooltip For Java, JavaFX

Hi again!

This weekend, during my spare time, I’ve continued work on JMetro. The end result is a new Button and ToggleButton dark and light style. These new styles include a new animation when the button is pressed. Which can be turned on and off through CSS.

Finally I’ve quickly tweaked the Tooltip style.

This bumps up JMetro version number to 4.4.

JMetro version 4.4

Sometimes I’m impressed with how much I can achieve with just a few hours working in JavaFX. I try to be as honest as possible and sure I’m biased since I’ve been working with it since it’s early start. Since JavaFX was still beta (before version 1). Had it’s own scripting language (JavaFX script). You had to recur to hacks to interface with Java, the language (?!). And it silenced NPEs (?!?!).

It’s impressive that with just a few hours of my spare time each weekend for the past few weeks I’m almost finished with this new iteration of JMetro. Which included re-styling practically all JavaFX controls (new animations, new colors, new overall styles). Including some which do not exist in the JavaFX framework. And all of that twice, since JMetro includes a light and dark version. Not to mention designing (code/API design as well as visual design and UX), testing and tweaking till I thought it was good enough. Personally, I’m impressed at how much I have achieved so far with the time I’ve spent.

I don’t try to sell any specific technology. Because like I used to hear Kirill Grouchnikov (now working at Google), former software engineer that blogged about Swing: “the customer doesn’t care about the technology”. The customer doesn’t care about the technology that was used. The customer cares whether the product works well or not.

I don’t mind working with other technologies. In fact, in the recent past I’ve been working in web development using javascript, html, etc. I always try to choose the best tool for the job, passions aside (of course, experience with a toolkit also counts).

In this blog I try to be as honest and unbiased as possible. Not trying to sell the readers on any particular technology. Right now, I’m not affiliated with Oracle or with any other company that sells JavaFX products or JavaFX consultancy. I don’t have any investment in JavaFX, other than the fact that I’ve been using it for very long. Usually, I first describe myself as a JavaFX consultant and freelancer, only because that’s what I have most experience with. There are maybe other technologies as productive as JavaFX out there (I don’t know them all, thoroughly enough, obviously). Still, I think it’s pretty impressive what you can achieve with just a few hours of work.

I’m planning to probably start blogging on other technologies. Technologies related to user interfaces.

Button and ToggleButton new style

Just a couple of hours was all it took for me to completely re-implement the button style with a new animation when clicked. And a new CSS property to turn on/off that animation.

First the old light and dark style of the Button:

Button JMetro light theme, Java, JavaFX theme, inspired by Microsoft's Metro.

Button – JMetro OLD light theme

Button JMetro dark theme, Java, JavaFX theme, inspired by Microsoft's Metro.

Button –  JMetro OLD dark theme

The “Default” that you see above, represents the style of the button when it is set as the default. Check out the API specification for more information.

The new style looks as follows:

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

Button – JMetro NEW light theme

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

Button – JMetro NEW dark theme

The colors for pressed, hover, etc and corresponding effects have changed. A new animation has also been added, which happens when the Button is clicked. The Button shrinks, when pressed, and then progressively comes back to normal size. You can turn this animation on or off with the -shrink-animate-on-press CSS property. By default, it is set to on, in the JMetro stylesheet:

.button, .toggle-button {

    -shrink-animate-on-press: true;
}

 

The Toggle Button style is highly based on the Button. Here’s the old style:

Toggle Button JMetro light theme, Java, JavaFX theme, inspired by Microsoft's Metro.

Toggle Button – JMetro OLD light theme

Toggle Button JMetro dark theme, Java, JavaFX theme, inspired by Microsoft's Metro.

Toggle Button – JMetro OLD dark theme

The new Toggle Button style now looks as follows:

Toggle Button JMetro light theme, Java, JavaFX theme, inspired by Fluent Design System (previous versions where named Metro)

Toggle Button – JMetro NEW light theme

Toggle Button JMetro dark theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro')

Toggle Button – JMetro NEW dark theme

Tooltip new style

The last addition to JMetro version 4.4 is a new style for the Tooltip. This was a quick tweak of the old style. Both light and dark versions look the same:

Tooltip Java, JavaFX JMetro theme, inspired by Microsoft's Metro

Tooltip – JMetro OLD theme

Tooltip: Java, JavaFX theme JMetro style, inspired by Fluent Design System (previously named 'Metro').

Tooltip – JMetro NEW theme

Colors were slightly tweaked and the font was made bigger.

Conclusion

In this blog post I’ve expressed my opinion on how productive JavaFX can be. Particularly in the case of this new JMetro iteration that was started just a few weeks ago.

I’ve then mentioned what’s new in JMetro 4.4 version. This includes a new Button and ToggleButton dark and light style, with added CSS styleable animations. And a new tweaked Tooltip style.

Here’s what I’ll be updating next:

  • Text Field style;
  • Password Field style;
  • Progress Bar style;
  • Continue work to make it easy for developers to tweak JMetro colors in the future;
  • Somewhere down the line, probably around version 5, I’ll work on making JMetro also available through Maven Central. There are some particularities to this project that don’t make it as easy as it could be.

The documentation for JMetro is on the JavaFX theme JMetro page. It hasn’t been updated yet, with this last version additions.

As usual, follow me on twitter.

 

Fluent Design style Radio Button, Check Box, Menu and Choice Box for Java (JavaFX)

I have a big update for JMetro this time. Version 3.8 brings the following new Fluent Design (FDS) inspired styles (dark and light) and updates:

  • New Radio Button style;
  • New style for Check Box;
  • New style for Menus;
  • Updated style for Context Menu;
  • New style for Choice Box.

JMetro new version details

I decided to, for now, switch focus off on the JMetro samples. I still styled the controls to look good and have a distinct appearance when they are focused, though. I’ve done this because the focus ring functions a bit different in Windows 10 than it does, by default, in JavaFX applications.

In JavaFX applications the control gets focus (gets added the focused pseudo class) whenever you mouse press it, whereas in Windows you need to first press the Tab key or arrow keys (in some situations) to activate the focus system, making the focus ring appear, and then cycle through until you get to the control you want.

This makes sense since, with this, the focus ring is only shown when the user does indeed want to interact with the application through the use of the keyboard and thus it avoids this distraction, otherwise.

You can still have this behavior in JavaFX, you just need to code it. I don’t know yet how new versions of Mac OS work in this regard (I don’t have a recent Mac to test this), but it could be a feature to add to JMetro, in the future.

Radio Button new style

The following animations show the new style and old style of the Radio Button:

Radio Button JMetro light theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro').

Radio Button OLD JMetro light style

Radio Button JMetro light theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro').

Radio Button NEW JMetro light style

Radio Button JMetro dark theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro').

Radio Button OLD JMetro dark style

Radio Button JMetro dark theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro').

Radio Button NEW JMetro dark style

Check Box new style

The Check Box has seen a significant change:

Check Box control JMetro light theme, Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro').

Check Box OLD JMetro light style

Check Box control JMetro light theme, Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro').

Check Box NEW JMetro light style

Check Box control JMetro dark theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro')

Check Box OLD JMetro dark style

Check Box control JMetro light theme, Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro').

Check Box NEW JMetro dark style

Since I changed the Check Box, for consistency sake, I also needed to change every other control that used a check mark before delivering a new version. These controls are the Choice Box and Menu.

New Choice Box style

As I mentioned before this is not a control that exists in the Fluent Design specification. It only exists in JMetro.

Choice Box JMetro light theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro').

Choice Box OLD JMetro light style

Choice Box JMetro light theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro').

Choice Box NEW JMetro light style

Choice Box JMetro dark theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro').

Choice Box OLD JMetro style

Choice Box JMetro dark theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro').

Choice Box NEW JMetro dark style

New Menu style

This style is a new addition. It’s another one that only exists in JMetro. It doesn’t exist in the Fluent Design System specification, at least not yet.

This style comprises the Menu Bar and the Menu Items that show up when the Menu Bar is open, which themselves can be Menu Items of type “Check Box Menu Item” or “Radio Menu Item” (there can only be one RadioMenuItem selected in the same ToggleGroup).

In the sample below the “Picture Effect” sub-menu contains MenuItems of type RadioMenuItem, all belonging to the same ToggleGroup, and the “View” menu contains MenuItems of type CheckMenuItem which work pretty much like a CheckBox.

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

Menu JMetro light style

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

Menu JMetro dark style

New Context Menu style

The Menu and Context Menu are interlinked. Both use MenuItems for their content. So while creating the new Menu style, I toke the opportunity to also update the Context Menu style yet again.

I changed the pressed and hover styles and also made the MenuItems even more compact, by reducing their height. In previous versions of JMetro my intention was to have the touch targets big enough so the application could be used without change both in touch devices and mouse based devices (desktop and laptop).

This proved to not be the best strategy as users of mouse based devices ended up with applications that were not optimized for their system, with controls that occupied too much space and wasted screen real estate. This is especially important in productivity applications.

For these reasons JMetro is now optimized for mouse based systems with controls occupying just the space they need to occupy. Whenever application developers need to distribute their applications in touch based devices (phones, tablets, etc), they’ll need to just reconfigure the height through the CSS of each control (only the ones that need it) to be enough to conform with touch target sizes. This way they’ll get an application that is optimized for both touch based devices and mouse based devices with just a little bit more programming effort.

I may in the future add a “touch” style class that developers can easily toggle to switch controls to being touch based optimized or “mouse” optimized.

The following are animations of the new and old Context Menu style (before version 3). The old style only had one version:

Context Menu JMetro dark theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro')

Context Menu OLD JMetro dark style

And here are the new styles in this JMetro version:

ContextMenu JMetro light theme for Java (JavaFX). Java UI theme, inspired by Fluent Design System (previously name 'Metro')

Context Menu NEW JMetro light style

ContextMenu JMetro dark theme for Java (JavaFX). Java UI theme, inspired by Fluent Design System (previously name 'Metro').

Context Menu NEW JMetro dark style

Wrapping Up

This was a big update to JMetro, which added 5 styles in total, including dark and light versions. New styles have been added to: Radio Button, Check Box, Choice Box, Menu and Context Menu.

JMetro has now styles for almost all JavaFX controls that ship with the SDK. It also adds new styles and new controls that don’t exist by default.

The new versions focus on optimizing screen real estate for each platform. More compact in mouse based devices (laptops, desktops) and bigger controls in touch based devices. Developers still need to configure each control’s CSS (those that need it), but that may be even easier in future versions.

I still haven’t updated the documentation, I’ll be doing that in the upcoming days.

As always if you want to stay up-to-date and don’t miss out, subscribe to this blog and follow me on twitter.

Here’s what I have planned next:

  • New style for Toggle Switch;
  • New style for Slider;
  • New style (including new animations) for Button;
  • Easily specify colors of controls;
  • Etc.

JMetro “Metro” Tab, TreeView and ContextMenu for Java (JavaFX)

[Update: This article has been updated on 20 July, 2018]

I’ve just released a new update for JMetro, bumping the version up to 3.3.0.

In this update you’ll find:

  • New TreeView Fluent Design System (FDS for short, that was originally named ‘Metro’) inspired style;
  • New Tabs and TabPane FDS inspired style;
  • New Context Menu dark FDS inspired style and retouch of light style.

JMetro version 3.3.0 details

TreeView JMetro style

The following animations show the new TreeView JMetro style:

TreeView JMetro Light Style

TreeView JMetro light style

TreeView JMetro Dark Style

TreeView JMetro dark style

Tabs and TabPane JMetro style

A new JMetro style has been added for Tabs (and TabPane):

Tab JMetro light style

Tab JMetro light style

Tab JMetro Dark style

Tab JMetro dark style

You may notice a slight ghost effect when changing selected tabs in the light style (a white border surrounds the tab that was just unselected). I only noticed this recently when reading this post again. This issue doesn’t exist in JMetro itself but it’s actually a problem with the GIF image presented above.

I’d also like to mention that these styles for Tabs and TabPane don’t exist in Microsoft’s Fluent Design System (FDS) specification, they only exist in JMetro. I made them because this is a control that exists in the JavaFX SDK, it’s an often used control and it was also a feature request.

JMetro does not try to mimic FDS it is rather a Java (JavaFX) theme inspired by FDS.

ContextMenu dark style and light style update

Before this JMetro version the dark and light style of the Context Menu looked the same:

Context Menu - JMetro Theme

Context Menu – JMetro theme before version 3.3.0

With version 3.3.0, a dark theme has been added, and the light theme has been retouched, and made slightly more compact along with changes to color, etc:

ContextMenu JMetro light theme

ContextMenu JMetro light theme

ContextMenu JMetro dark theme

ContextMenu JMetro dark theme

Conclusion

That’s it for this post. 3 new styles have been added/retouched: TreeView, Tabs and ContextMenu. Follow me on twitter and subscribe to this blog if you want to stay up-to-date on the latest news. I’ll update the documentation in the next coming days.

Here’s what I have planned next for JMetro:

  • Retouch Radio Button style;
  • Add JMetro style for Menus;
  • Retouch Toggle Switch style;
  • Add capability to easily change colors of JMetro style;
  • Etc.