Fluent Design style Toggle Switch for Java, JavaFX

Hi, this time I’m going to talk about the new Toggle Switch style in the new version of JMetro.

Toggle Switch is a control that has become very popular in recent years. I added a JavaFX implementation some time ago to the ControlsFX library.

This new style is available in JMetro version 4.1 that has just been released.

What’s a Toggle Switch

In previous posts I’ve talked about the Toggle Switch control, what it is and a implementation I’ve done and added to ControlsFX library.

In short words, a Toggle Switch is like a Check Box or Toggle Button, with two states (on and off). It typically doesn’t have an indeterminate state like the Check Box can have and in some implementation its text may change when its state changes, to further illustrate the state it’s in.

The ControlsFX implementation has, by default, a look that fits with the default JavaFX Modena theme. Back then, I also added a Metro inspired style to JMetro that you can see below:

Toggle Switch control JMetro light theme, Java, JavaFX theme, inspired by Microsoft Metro (now named Fluent Design)

Toggle Switch OLD JMetro light style

Toggle Switch control JMetro dark theme, Java, JavaFX theme, inspired by Microsoft Metro (now named Fluent Design)

Toggle Switch OLD JMetro dark style

New Toggle Switch style

There were some issues I faced when creating the new JMetro style. First I encountered some bugs in the skin implementation that I fixed in a newly added MetroToggleSwitchSkin.

The JMetro stylesheet has changed to reference this new skin:

.toggle-switch {
    -fx-skin: "impl.jfxtras.styles.jmetro8.MetroToggleSwitchSkin";
}

It’s an implementation detail, so you don’t really, ordinarily, have to care about it. The skin is in the impl package to reflect that it’s not public API. If you use it in your code please be advised that things might change in a breaking way in the future.

Another problem I faced is that I now wanted the toggle to be on the left side, and its text on the right. Which is the opposite of the current implementation. For that I added a new CSS property: -toggle-display. which is similar to the Labeled -fx-content-display property.

-toggle-display has three possible values:

  • left: The toggle is displayed left, and the accompanying text on the right
  • right: Toggle is displayed to the right
  • thumb-only: Only the toggle is displayed with no text

The default value is right, which reflects the appearance in my first implementation of Toggle Switch. However, JMetro overrides this and sets it to left, by default:

.toggle-switch {

    -thumb-move-animation-time: 100;
    -toggle-display: left;
}

Another thing that has changed and you’ll notice in the previous code snippet is the duration of the toggle animation. That is, the time it takes for the toggle dot to go from the left to the right and vice-versa whenever it is turned off or on. This time has changed from 200ms to 100ms as indicated by the -thumb-move-animation-time CSS property.

Without further ado, here’s the new dark and light JMetro style for the Toggle Switch:

Toggle Switch control JMetro light theme, Java, JavaFX theme, inspired by Microsoft Fluent Design (previously named Metro)

Toggle Switch NEW JMetro light style

Toggle Switch control JMetro dark theme, Java, JavaFX theme, inspired by Microsoft Fluent Design (previously named Metro)

Toggle Switch NEW JMetro dark style

Wrapping up

Version 4.1 of JavaFX theme JMetro is out. This version add a new Toggle Switch style inspired by Fluent Design. The visuals have completely changed, including the animation speed.

A new skin has also been added which adds a new -toggle-display CSS property. Be advised that this skin is in the impl package as it is an implementation detail.

The documentation page for Java, JavaFX theme JMetro will be updated shortly.

As always follow me on twitter and subscribe to this blog.

Here’s what I have planned next:

  • New Button style with animation;
  • New Slider style;
  • New Progress Bar styles;
  • Possibility to change colors easily.

 

 

Fluent Design style Combo Box and Scroll Bar for Java, JavaFX

This time I’ll be describing version 4 of JMetro which has just been released.
JMetro is a Java, JavaFX theme inspired by Fluent Design. This version brings new styles to the following controls:

  • Combo Box;
  • Scroll Bar;
  • Scroll Pane.

These new styles are comprised of a new dark and light version.

JMetro 4.0 details

I first started by updating the Combo Box.

Combo Box new style

Colors have changed, and also the down arrow image:

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

Combo Box OLD JMetro Light Theme

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

Combo Box NEW JMetro Light Theme

The down arrow image has a thinner stroke and is wider.

One thing that doesn’t happen in Fluent Design but happens with JMetro is that when you mouse press the Combo Box it immediately starts to open up to key presses from the keyboard. This is indicated by the focus indicator: the border of the Combo Box turns black (white in the case of the dark theme). Pressing the down and up arrow keyboard keys will now change the selected item. This is the default behavior of JavaFX.

You’ll notice above that JavaFX adds scroll bars when the Combo Box has more content. The first Combo Box is fine without the scroll bars whereas the one below shows them for the user to be able to scroll through a larger content set.

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

Combo Box OLD JMetro Dark Theme

Combo Box JMetro dark theme for Java (JavaFX). Inspired by Microsoft Fluent Design System.

Combo Box NEW JMetro dark theme

Scroll Bar new style

Since I’ve changed the Combo Box style I took the opportunity to also update the Scroll Bar. I did this because, like I said, Scroll Bars can also be used inside Combo Box’s.

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

Scroll Bar OLD JMetro light theme

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

Scroll Bar NEW JMetro light theme

The colors are slightly different and the arrow has changed to one with a thinner stroke. The same is true of the dark style, with the arrow image color changing to white.

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

ScrollBar OLD JMetro Dark Theme

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

ScrollBar NEW JMetro Dark Theme

And the new Scroll Pane light and dark style:

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

ScrollPane NEW JMetro light theme

Scroll Pane JMetro dark theme for Java (JavaFX). Inspired by Microsoft Fluent Design System.

ScrollPane NEW JMetro dark theme

Wrapping up

Version 4.0 of JMetro brings new styles to the Scroll Bar and the Combo Box. These control’s arrow images were made thinner and wider.  Colors of light and dark theme have also changed, sometimes just slightly.

12 controls have been updated since version 3.0 came out, a few weeks ago. This included new styles for controls that didn’t have them as well as refreshing existing styles. Since there is a dark and light version for every control, that’s 24 new styles since the start of this last iteration!

With those 24 new styles there’s tons of small detail changes. They might seem tiny, but all of them added up is what can make an interface shine.

The versioning I’ve been adopting might seem a bit odd to you (and maybe it actually is) but my objective is, in version 5.0, to finish refreshing the looks of all the important controls. Also, maybe one or two additions of new styles for controls that don’t have them yet and possibly a new feature that would allow changing the colors of the theme with a method call or through a CSS variable override.

As usual follow me on twitter and subscribe to this blog to stay up-to-date.

 

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.