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.

“Metro” Table For Java (JavaFX)

Hi again, this time the TableView “Metro” style gets added to the JMetro JavaFX theme. This amps up the JMetro version to 3.1.0.

The reason why I didn’t add the Table style before is because strangely there isn’t yet a definition for the Table in the Fluent Design System (previously Metro). There is a preview control, called DataGrid but is still in preview and will only be officially added later.

The JMetro Table style is a custom made style I’ve done based on the Fluent Design System’s other controls and guide lines.

As usual there is a Dark and Light theme.

JMetro Table View – Light Theme

JMetro Table View – Dark Theme

If you’re familiar with the standard JavaFX theme (Modena) you’ll also notice that the JMetro arrow that appears when sorting a column is different.

The border around the table in the dark and light themes are not part of the control style. It was added to the table in the sample app.

In the light theme there is a light border below the header row that is not visible in the GIF. It is visible in a PNG image:

Table View with the border below the header row

These are the relevant fixes that have been made in version 3.1.0:

  • Fix toggle switch style showing with rounded corners

As usual check out the JMetro documentation page for information on how to use JMetro theme.

Further Developments

In the next weeks my intention is to make the further improvements to the library:

  • Add TreeView style
  • Improve Radio Button style
  • Improve Check Box style
  • Improve Toggle Switch style
  • Add the ability to change the accent color and other colors easily through a code call or CSS definition
  • Etc

As usual follow me on twitter and subscribe to this blog if you want to stay up-to-date with the latest news.

Java’s “Metro” theme recap and new version

[Update: This article has been updated on 21 June, 2018]

This is what I’ll be covering in this post:

  • I’ll give my personal opinion on why I think Java, JavaFX theme JMetro, is a better option than the aging (more than 5 years old), default, Modena theme;
  • Show some applications that use JMetro: two NASA apps (!!), one I’ve done for a client some time ago, and a really nice-looking app I found on the internet;
  • JMetro has been updated, I’ll be detailing the new update;
  • I’ll clear up some things about “Metro” and JMetro.

Metro, JMetro and JMetro like libraries

First, I’d like to clear some things up about “Metro” and JMetro library:

  • Metro is dead?

It is true that the word “Metro”, as it was used to reference the new Windows user interface is dead, but not the design language itself, in fact, quite the opposite. I’ll explain:

In the release of Windows Phone 7, Microsoft introduced the Metro design language, based on previous work with Zune and Windows Media Center. It was later adopted in Windows 8, which was very criticized for its user experience, but not because of Metro itself, in fact Metro received mostly good feedback. Probably, due to trademark issues with one of Microsoft’s German retail partner companies (“Metro AG”), the name was dropped.  The term that Microsoft uses nowadays is “Fluent Design System“ (FDS)  – https://fluent.microsoft.com. If you look at FDS you’ll clearly notice it’s an iteration over the original “Metro”.

FDS is a design language that’s in continuous evolution.

Fluent Design System website

I thought about changing the name of the library from JMetro to something similar to Fluent Design System, but I think people still associate Microsoft’s new interface design to the word “Metro”.

  • “Themes like JMetro, that try to mimic the native look and feel of the platform aren’t a good option because the user will feel a strange feeling that something’s not quite right – the ‘uncanny valley’ of user interfaces”.

This is sometimes the argument to say that themes like JMetro aren’t a good option.

It’s a good point, I might be wrong, but I personally disagree. The thing is Metro or more correctly Fluent Design System, is a set of guidelines that make up the design of the user interface, much like Google’s Material Design, and not a set of rules that can only have one exact outcome. JMetro and other Material Design implementations (there are several out there) may not look 100% like Microsoft’s Windows implementation or Google Android, but if they follow the guidelines and look good they are still nice-looking interfaces with good UX, that feel good to use.

JMetro might not look exactly like the Windows Fluent Design System (FDS), there are even controls in JMetro that don’t exist in the FDS but exist in JavaFX and that I have skinned to try to make them look good with the rest, but I personally feel that this kind of libraries don’t have to be 100% the same as the originals to be a good option. You can look at JMetro as a theme that follows FDS and not one that tries to be an exact copy of the Windows native look and feel.

Another good option is to extend JMetro, retouching some of its aspects to fit your particular needs.

By the way JMetro is an ongoing project and I aim to recreate (hopefully making them better) some of the already existing JMetro controls.

This is another personal opinion: I feel the Javafx official theme, Modena, which was created 5 and a half years ago, served us well, but is starting to show its age. 5 and a half years, without re-touches, is a lot for a user interface. I feel we need to have more modern JavaFX themes like Gerrit Grunwald’s mobile ios theme: https://harmoniccode.blogspot.com/2018/05/time-for-something-newios-fx.html and JMetro, although I’m biased and might not be the best judge of JMetro 🙂

JMetro real app example

Unfortunately, it’s been a while since the last release of JMetro and there are things I want to add that are a long time coming. Due to some personal matters and work, my time has been very limited in the recent past. Now that things have cleared up I’ll try to finish up some ideas I had for JMetro.

By the way in case you don’t know I’m a JavaFX and Swing Freelancer and Consultant or more generally a front end freelancer and consultant, I say that because I have a long experience with those technologies, especially JavaFX, but I like to better classify myself as an overall front end freelancer and consultant since I also have experience with web technologies, building web apps, etc, and knowledge / experience with User Interface Design, User Experience, etc. As a computer engineer I obviously know back end, and other areas of computer science but I prefer and have a greater experience with front end, but anyway back to the point of this post, during this time as a freelancer and consultant I had the opportunity to use some of my open source work with some of my clients, I want to show you how a real JMetro and also FXRibbon app can look like. Generally, I need to keep client’s confidentiality, but for this one project, a big client from the U.S.A., I can reveal some screenshots. There are things I don’t like about it now and would have done differently, to my defense this was done almost 5 years ago:

And, can you believe it, JMetro is used in software used by NASA!? Thanks Sean Phillips (@SeanMiPhillips) for letting me know. Here in it’s well known application: Deep Space Trajectory Explorer, which was featured in Bloomberg:

And in another application from NASA, Trajectory Optimization Data Viewer:

And finally, a very nice application that I found on the internet using JMetro:

JMetro new release details

One of the things that was clearly missing was a way to use JMetro as an external library, like I mentioned before due to personal matters and work I didn’t have the time, before, to take this library to the place where I would have wanted it.

So, this library is now available as a Maven dependency, you can get it from bintray, it will most probably be later available through Maven Central in the usual Jfxtras place:

<dependency>
  <groupId>org.jfxtras</groupId>
  <artifactId>jmetro</artifactId>
  <version>4.0</version>
  <type>pom</type>
</dependency>

and you can also download the jar here if you prefer.

To set JMetro as the theme you can now use the JMetro class.

First you call its constructor passing in the desired style: JMetro.Style.DARK or JMetro.Style.LIGHT, then you call applyTheme(…), which receives a Scene or a Parent (base class of Control, Region, etc)

new JMetro(JMetro.Style.LIGHT).applyTheme(root);

Conclusion

In this post I expressed my personal opinion about why I think using themes like JMetro is a better option, why I don’t think the reference to the uncanny valley applies in this case. I’ve also tried to clear up that Microsoft Metro Design isn’t dead. Then I showed a few examples of JMetro applied to real world apps and finally what’s new in this recent release, namely, you can now use JMetro as an external library Jar (I know, shame on me for not making this possible before).

The documentation of JMetro has been updated, as always you can find it here.

I also want to thank Tom Eugelink (@tbeernot) for helping out.

Concerning the near future of JMetro, here’s what I have planned:

  • New TableView JMetro style
  • New TreeView JMetro style
  • Easily change the accent color in CSS by redefining a CSS variable or from code through a method call;
  • (…)

If you want to stay up on the latest news subscribe to this blog and follow me on twitter @P_Duke.