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 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:

And in another app from NASA:

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>3.0.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.

Update to FXRibbon (Ribbon for Java)

I’ve updated the Ribbon control and its documentation.

Here’s some of the relevant code changes (you can check the git log history for more details):

  • Cleaned up API
  • Cleaned up code into standard conventional packages
  • Fixed and cleaned up test apps (that also serve as documentation examples)
  • Added gradle build and configuration
  • Other refactors

Here’s the new page for the FXRibbon documentation: here.

Future developments for this library:

  • Add button controls: current javafx buttons don’t provide the best API for the ribbon use case, there’s also an issue where if you have a button with a multi line label, the label won’t be vertically aligned with the rest of the buttons.
  • Add other specialized controls, e.g. Ribbon gallery
  • Fix other issues in the issue tracker.

Javafx on mobile first impressions

I decided to give it a go at testing javafx in an android device. My android device might be considered a low end device, it’s a nexus 4 from LG. The result can be seen below in a video. The quality of the video isn’t the best, I had to scale down the quality because the video was occupying 2GB.

My conclusion is that java/javafx runs with a very good performance in a low end android device with a pretty decent start up time. There were just 2 problems with this test, the first was with a demo which tested multi touch but didn’t run with top notch responsiveness but that might be the demos fault and not an issue with javafx itself. The second problem were dialogs: they aren’t showing up well.

The demo took about 6 seconds to start which is more than the standard android app but not too much.

ToggleSwitch control revisited

ToggleSwitch - modena theme

ToggleSwitch – modena theme

Going through JMetro I just remembered the Toggle Switch control that I have created. It reminded me that this should be in a control repository next to other controls, publicly available for anyone to grab. I think this is one of those controls that should be part of the java sdk, it’s very popular especially on touch based devices. For more information read my previous blog post on the Toggle Switch control.

I have heard more than once people saying why a new control, why not simply style the Checkbox to appear the same way as a Toggle Switch. I think Toggle Switch merits being its own control the same way the Radio Button and Checkbox aren’t just skins of the Toggle Button, besides being conceptually a different control a Checkbox has the indeterminate state which doesn’t make sense in a Toggle Switch. Toggle Switch are usually also animated which can’t be achieved by skinning. And finally creating a Toggle Switch control makes it easier for others to style the control in different ways via css (styling a Checkbox to look like a Toggle Switch is difficult and hacky) .

So I decided to submit this control to the ControlsFX project.

One of the pertinent feedbacks I’ve received from the project members was that the default skin should be inline with the Modena theme.  And so I created a new css stylesheet that I think is inline with Modena and is the default look of the control (if you don’t override the default stylesheet).