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.

ParallaxFX: parallax in Java version 2

I’ve added two new controls to FXParallax library. The first and most important one, ParallaxPane, creates the possibility of adding a parallax effect to any Node subclass. The second, AnimatedScrollPane extends ScrollPane by making the scroll animated.

In the FXParallax category you can check out my previous blog posts about this library.

In this post I’m going to describe the mentioned additions to FXParallax.

New version details

ParallaxPane

ParallaxPane is a new control that creates the ability to add a parallax effect to any Node subclass. The API is pretty simple all you have to do is set the Node you’d want to have a parallax effect added to, by calling setContent(Node).

ParallaxPane automatically takes care of what “position” of the clipped content to show depending on the ParallaxPane’s screen position.

The video above shows a demo of the ParallaxPane, two ParallaxPane’s exist in this scene, both containing an ImageView object. As you can see those two ImageView’s have a parallax effect.

These are the images that have been used:

The following code snippet shows an example of how you can define a ParallaxPane, in this case we’re setting an image (through the use of ImageView) as the ParallaxPane’s content:

VBox vBox = new VBox();
ParallaxPane parallaxPane = new ParallaxPane();
String url = ParallaxPaneWithImageTest.class.getResource("small-business.jpg").toExternalForm();
parallaxPane.setContent(new ImageView(url));
vBox.getChildren().add(parallaxPane);

ParallaxPane also has a convenience method that you can use when you simply want to set an Image as its contents. That method is conveniently called setImage, and receives an Image object. You can also use the constructor that receives a Node or the constructor that receives an Image object.

If we wanted to have it defined declaratively, in FXML, it could look like this (using the ParallaxPane convenience constructor with a @NamedArg Image parameter):

<VBox styleClass="main-container">
  <ParallaxPane styleClass="first-image">
    <image>
      <Image url="@small-business.jpg" />
    </image>
  </ParallaxPane>
</VBox>

AnimatedScrollPane

Another detail about the previous demo is that it’s using the new AnimatedScrollPane, a regular ScrollPane could also be used but AnimatedScrollPane adds an extra interesting effect by having the scroll be animated. You’ll also notice that modern applications, like for instance Google Chrome, usually scroll their contents through a subtle animation.

AnimatedScrollPane has the same API as ScrollPane, in fact it extends from ScrollPane. The current limitation is that, for now, it’s implemented with only vertical scroll in mind.

In the future there might be a ScrollPane skin that you can use, so you can add animated scroll to a regular ScrollPane.

Setting a different Node as content of ParallaxPane

As I said above, any Node can be set as the content of ParallaxPane, the following demo shows a video with a parallax effect (the second ParallaxPane contains a video), this is achieved by setting a MediaView as the contents of the ParallaxPane.

And the FXML code snippet that declares the ParallaxPane with the video:

<ParallaxPane styleClass="video">
  <MediaView>
    <mediaPlayer>
      <MediaPlayer autoPlay="true" mute="true">
        <media>
          <Media source="@Swimming_10835.mp4" />
        </media>
        <cycleCount>
          <MediaPlayer fx:constant="INDEFINITE" />
        </cycleCount>
      </MediaPlayer>
    </mediaPlayer>
  </MediaView>
</ParallaxPane>

These demos are all present in the repository, in the test folder.

Conclusion

ParallaxPane and AnimatedScrollPane have been added to the FXParallax library, the former adds the ability of adding a parallax effect to any Node and the other control adds a nice scrolling animation to a ScrollPane like control.

As usual the jar is available for download and through Maven, for details check the FXParallax documentation page, which has been updated.

FXParallax – Parallax library for Java (JavaFX)

I have just released FXParallax, a library for adding parallax effects to Java (JavaFX). In my first post I’ve started to explain what parallax is, where it’s being used and my first implementation of it.

Since my first post, I’ve changed several things: implementation, bugs, API, etc.

FXParallax is composed of a set of controls that are either already ready to use and have a parallax effect or are a general purpose control that makes it easy for you to add a parallax effect to a UI component.

Currently only one control exists in this library: ParallaxListView, it’s a ListView with a parallax effect.

I’ve added a page with documentation for this library, you should check it out here.

Future developments

I plan to add a general purpose control, probably named ParallaxPane. It will allow you to more easily create a UI component with a parallax effect. It will accept a collection of layers and will probably allow some way of defining the scroll speed.

Unless there is a high demand I won’t be doing this in the near future. There are other things I’d like to do first.

New Parallax control for Java (JavaFX)

Introduction

Parallax is a visual effect where you combine at least two layered images moving at different speeds to achieve a sense of depth.

Think about when you’re driving on the road and you see the trees close to you moving fast whereas the trees that are further away will move in the same direction but slower, the result is that you perceive the trees that are moving faster to be closer to you and the others to be further.

If you are a fan of video games you’ve certainly seen this effect before: two or more images are placed one over the other, the background moves slower, and the foreground, which could be the player’s avatar or the foreground where he stands moves faster.

This is an often used trick in the video games world. It started to be used quite long ago, an example is the Super Mario video game series.

Super Mario game using a parallax effect

This effect has been adopted in the user interface area, where you can see it used on web sites and also some applications.

Parallax on a web site – source: https://dribbble.com/shots/1378010–GIF-Parallax-Building-animation

My goal was to bring this to JavaFX in the form of a control, where you could, through a simple API, add a parallax effect.

Parallax in a ListView

My first objective was to bring this to the ListView, that is, have a control with an API similar to the ListView where you could set the background image and the list of items just like in the JavaFX ListView. This control would be named the ParallaxListView.

Implementing ParallaxListView

To have a parallax effect the items in the ListView, that is, the cells, need to scroll with the background but at a faster rate.

This new control will use the JavaFX ListView with a transparent background, layered in front of a background image. The background image will be inside a ScrollPane.

The first challenge is that the scroll of the JavaFX ListView is done through jumps, that is, when you do a scroll action the position will jump from the original position to the end position without going through the intermediate position values. This will break the effect, since there is no movement like in the real world, only a discrete set of positions. In the real world the objects in the foreground move faster through a translation animation, remember this is about mimicking real world phenomenon like the driving example I gave earlier, to give a sense of depth.

So to accomplish this I had to implement my own ListView scrolling as well as the background scrolling, which when scrolling animates through a set of positions. The following is a live capture turned into a GIF of an example application using the ParallaxListView, the live version image quality and animation is better:

ParallaxListView example (image quality and animation worse than live version)

Where to get it

For now you can get it here: https://github.com/dukke/fxparallax.

I decided to stick with Java 8 as Java 9 is still relatively new and some people might have not yet migrated. This way Java 8 and Java 9 programs can use it.

I’m using private API, namely VirtualFlow, but this has turned into public API in JavaFX 9 so it will be easy to migrate the ParallaxListView code.

The test folder has examples of how to use the control.

You have to scroll through the mouse wheel to see the effect.

Conclusion and Further Developments

The ParallaxListView can give a nice touch to your application, adding a bit of flair, however don’t overuse this effect.

In the next days I plan to add the following:

  • Add support for scrolling through the Scroll Bar.
  • Add API to change the height of the background image in relation with the foreground
  • Add the ability to specify the orientation of the ParallaxListView: Hoizontal or Vertical
  • Add a documentation page
  • Also provide a general purpose control that lets you specify a background and an arbitrary scrollable foreground control.

Update: This blog post has been updated in 16 April 2018.