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

A Better Java UI Theme

DZone's Guide to

A Better Java UI Theme

What are your thoughts on the JavaFX JMetro theme? Check out this developers opinion on the JMetro theme and why it is not dead.

· Java Zone ·
Free Resource

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

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

  • I’ll give my thoughts on why I think the 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 there is one that I’ve done for a client some time ago, and the other is a nice-looking app that 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 the JMetro library:

  • "Metro is dead?"

It is true that the word “Metro” was used to reference the new Windows user interface, which is now is dead.  But, this does not pertain to the design language itself. In fact, it is 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 criticized for its user experience, but not because of Metro itself. Metro received mostly positive feedback. 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.

Image titleFluent 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 with 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 used to say that themes like JMetro aren’t a good option.

It’s a valid point. I might be mistaken, but I personally disagree. The thing is that Metro, or more correctly Fluent Design System, is a set of guidelines that make up the design of the user interface, like Google’s Material Design. It is 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 percent like Microsoft’s Windows implementation or the Google Android. But, if they follow the guidelines and look good, they are still nice-looking interfaces with a UX that feels 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. Personally, I feel like this kind of library doesn’t have to be 100 percent 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.

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.

I find that the JavaFX official theme, Modena, which was created over five and a half years ago, served us well, but is starting to show its age. Five and a half years without re-touches is a lot for a user interface. I feel like we need to have a more modern JavaFX theme like Gerrit Grunwald’s mobile ios theme: https://harmoniccode.blogspot.com/2018/05/time-for-something-newios-fx.html and JMetro. However, I’m a little 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 is a long time coming. Due to some personal matters and work, my time has been very limited recently. Now that things have cleared up, I’ll try to finish up some ideas I had for JMetro.

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 lot of experience with those technologies, especially JavaFX. 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.

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 application using Java, JavaFX theme JMetro and FXRibbon can look like. Generally, I need to keep client’s confidentiality, but, for this one project who was 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. In my defense, this was done almost five years ago:

Image title

Image title

Image title

And, can you believe it? JMetro is a software that is 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 were clearly missing was a way to use JMetro as an external library. As mentioned previously, due to personal conflicts 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 need to call its constructor passing in the desired style: JMetro.Style.DARK or JMetro.Style.LIGHT. Then, you will call applyTheme(…), which receives a Sceneor 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 and why I don’t think the reference to the uncanny valley applies in this case. I’ve tried to clear up that Microsoft Metro Design isn’t dead by showing a few examples of JMetro applied to real-world apps. Lastly, 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 the Java, JavaFX theme JMetro has been updated. Check it out if you want to know how to use it.

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

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

Topics:
javafx ,java ,fluent design system ,metro ,theme ,jmetro

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}