Fluent Design Style Text Field And Password Field For Java, JavaFX

I’ve just released version 4.5 of Java, JavaFX theme JMetro. This version adds new styles for the Text Field and Password Field. Inspired, as usual, by Fluent Design.

In this post I’m going to go over the details about this new release.

JMetro version 4.5

Like I said in the introduction, JMetro 4.5 has just been released.

I’ll start by showing the old Text Field and Password Field styles, prior to JMetro 4.5:

Text Field JMetro light theme. Java, JavaFX style inspired by Microsoft's Metro (predecessor to Fluent Design)

TextField- JMetro OLD Light Theme

Text Field JMetro dark theme. Java, JavaFX style inspired by Microsoft's Metro (predecessor to Fluent Design)

Text Field – JMetro OLD Dark Theme

And the old light and dark style for the Password Field:

Password Field JMetro light theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Password Box – JMetro OLD Light Theme

Password Field JMetro dark theme, Java (JavaFX) style inspired by Microsoft Metro (predecessor of Fluent Design)

Password Field – JMetro OLD dark theme

These are some of the differences between the old styles and the new styles introduced in JMetro 4.5:

  • Colors have changed;
  • Accent color is used when the controls are focused (control is open for, and receives keyboard input);
  • Hover colors have changed;
  • Text has been made bigger by default;
  • Icons for clear and show password have been tweaked slightly (positioning and size).

And here are the new styles in action:

Text Field JMetro light theme. Java, JavaFX style inspired by Fluent Design (previously named Metro)

TextField – JMetro NEW light theme

Text Field JMetro dark theme. Java, JavaFX style inspired by Fluent Design (previously named Metro)

TextField – JMetro NEW dark theme

New Password Field styles look as follows:

Password Field JMetro light theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Password Field – JMetro NEW light theme

Password Field JMetro dark theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Password Field – JMetro NEW dark theme

There are differences between the new styles and Microsoft’s Fluent Design. Namely icons, I don’t like Fluent Design’s icon for the show password button on the Password Field. And colors, I’m also not fond of how in the dark version the color changes abruptly from black to white when the controls get focused.

Of course if you don’t agree you can easily add a stylesheet to override the JMetro looks after the call to applyTheme from the JMetro class.

In the future I plan to slightly update the show password icon and make its stroke thinner.

Wrapping up

JMetro version 4.5 is just out. With it new Password Field and Text Field styles are available.

As always if you want to look at the documentation you can check out Java, JavaFX theme JMetro page. Which will be updated soon with the details from this new version.

Next, I’ll probably be looking at, and updating the Progress controls.

Follow me on twitter. And enjoy.

Fluent Design Style Button, Toggle Button and Tooltip For Java, JavaFX

Hi again!

This weekend, during my spare time, I’ve continued work on JMetro. The end result is a new Button and ToggleButton dark and light style. These new styles include a new animation when the button is pressed. Which can be turned on and off through CSS.

Finally I’ve quickly tweaked the Tooltip style.

This bumps up JMetro version number to 4.4.

JMetro version 4.4

Sometimes I’m impressed with how much I can achieve with just a few hours working in JavaFX. I try to be as honest as possible and sure I’m biased since I’ve been working with it since it’s early start. Since JavaFX was still beta (before version 1). Had it’s own scripting language (JavaFX script). You had to recur to hacks to interface with Java, the language (?!). And it silenced NPEs (?!?!).

It’s impressive that with just a few hours of my spare time each weekend for the past few weeks I’m almost finished with this new iteration of JMetro. Which included re-styling practically all JavaFX controls (new animations, new colors, new overall styles). Including some which do not exist in the JavaFX framework. And all of that twice, since JMetro includes a light and dark version. Not to mention designing (code/API design as well as visual design and UX), testing and tweaking till I thought it was good enough. Personally, I’m impressed at how much I have achieved so far with the time I’ve spent.

I don’t try to sell any specific technology. Because like I used to hear Kirill Grouchnikov (now working at Google), former software engineer that blogged about Swing: “the customer doesn’t care about the technology”. The customer doesn’t care about the technology that was used. The customer cares whether the product works well or not.

I don’t mind working with other technologies. In fact, in the recent past I’ve been working in web development using javascript, html, etc. I always try to choose the best tool for the job, passions aside (of course, experience with a toolkit also counts).

In this blog I try to be as honest and unbiased as possible. Not trying to sell the readers on any particular technology. Right now, I’m not affiliated with Oracle or with any other company that sells JavaFX products or JavaFX consultancy. I don’t have any investment in JavaFX, other than the fact that I’ve been using it for very long. Usually, I first describe myself as a JavaFX consultant and freelancer, only because that’s what I have most experience with. There are maybe other technologies as productive as JavaFX out there (I don’t know them all, thoroughly enough, obviously). Still, I think it’s pretty impressive what you can achieve with just a few hours of work.

I’m planning to probably start blogging on other technologies. Technologies related to user interfaces.

Button and ToggleButton new style

Just a couple of hours was all it took for me to completely re-implement the button style with a new animation when clicked. And a new CSS property to turn on/off that animation.

First the old light and dark style of the Button:

Button JMetro light theme, Java, JavaFX theme, inspired by Microsoft's Metro.

Button – JMetro OLD light theme

Button JMetro dark theme, Java, JavaFX theme, inspired by Microsoft's Metro.

Button –  JMetro OLD dark theme

The “Default” that you see above, represents the style of the button when it is set as the default. Check out the API specification for more information.

The new style looks as follows:

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

Button – JMetro NEW light theme

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

Button – JMetro NEW dark theme

The colors for pressed, hover, etc and corresponding effects have changed. A new animation has also been added, which happens when the Button is clicked. The Button shrinks, when pressed, and then progressively comes back to normal size. You can turn this animation on or off with the -shrink-animate-on-press CSS property. By default, it is set to on, in the JMetro stylesheet:

.button, .toggle-button {

    -shrink-animate-on-press: true;
}

 

The Toggle Button style is highly based on the Button. Here’s the old style:

Toggle Button JMetro light theme, Java, JavaFX theme, inspired by Microsoft's Metro.

Toggle Button – JMetro OLD light theme

Toggle Button JMetro dark theme, Java, JavaFX theme, inspired by Microsoft's Metro.

Toggle Button – JMetro OLD dark theme

The new Toggle Button style now looks as follows:

Toggle Button JMetro light theme, Java, JavaFX theme, inspired by Fluent Design System (previous versions where named Metro)

Toggle Button – JMetro NEW light theme

Toggle Button JMetro dark theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro')

Toggle Button – JMetro NEW dark theme

Tooltip new style

The last addition to JMetro version 4.4 is a new style for the Tooltip. This was a quick tweak of the old style. Both light and dark versions look the same:

Tooltip Java, JavaFX JMetro theme, inspired by Microsoft's Metro

Tooltip – JMetro OLD theme

Tooltip: Java, JavaFX theme JMetro style, inspired by Fluent Design System (previously named 'Metro').

Tooltip – JMetro NEW theme

Colors were slightly tweaked and the font was made bigger.

Conclusion

In this blog post I’ve expressed my opinion on how productive JavaFX can be. Particularly in the case of this new JMetro iteration that was started just a few weeks ago.

I’ve then mentioned what’s new in JMetro 4.4 version. This includes a new Button and ToggleButton dark and light style, with added CSS styleable animations. And a new tweaked Tooltip style.

Here’s what I’ll be updating next:

  • Text Field style;
  • Password Field style;
  • Progress Bar style;
  • Continue work to make it easy for developers to tweak JMetro colors in the future;
  • Somewhere down the line, probably around version 5, I’ll work on making JMetro also available through Maven Central. There are some particularities to this project that don’t make it as easy as it could be.

The documentation for JMetro is on the JavaFX theme JMetro page. It hasn’t been updated yet, with this last version additions.

As usual, follow me on twitter.

 

Fluent Design Style Slider For Java, JavaFX

JMetro’s Java, JavaFX theme version has just been bumped up to version 4.2.  This version brings a new style to the Slider control. Besides this, you can also now see a popup showing you the current value of the Slider.

New Slider style

Following is the old JMetro Slider style:

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

Slider OLD JMetro light theme

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

Slider OLD JMetro dark theme

For this theme I had to create a new skin. This is because you can’t style the filling that goes from the beginning of the Slider track to the point where the thumb is. In version 4.2 of JMetro I’ve further enhanced this skin to add a new feature. I’ll discuss this feature next.

First, I’d like to show the new Slider style in action:

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

Slider NEW JMetro light theme

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

Slider NEW JMetro dark style

As you can see the Slider colors and overall style have changed. You’ll also notice the new feature I’ve mentioned. Whenever the user interacts with the Slider to change its value a popup appears to show exactly which value the Slider has. This is useful whenever you need to show an interface that allows for a more precise tuning. By showing a popup the user will know exactly the current Slider value while manipulating it.

This feature is on by default but can be turned off through the -show-value-on-interaction property. The following snippet shows how this is configured in JMetro by default:

.slider {

  -show-value-on-interaction: true;
}

To turn this feature off, all you need to do is add a stylesheet after the call to applyTheme(...) of JMetro class, with the following definition:

.slider {

  -show-value-on-interaction: false;
}

Or you can do it on a case by case situation by targeting the specific Slider, and setting its -show-value-on-interaction property to false.

Wrapping Up

Version 4.2 has just been released. This version brings a new style to the Slider control and enhances the previous Slider skin. It adds a new feature that allows to show the current modified Slider value through a popup.

You can check out the previous JMetro style Slider post if you want a bit more background information on the new Skin.

I’m planning on creating a new library that will have new enhanced skins like this one and other general enhancements. My understanding is that these enhancements are not only valuable for JMetro. So, I’ll make them available for others to use on different contexts. JMetro will then depend on this new library.

I’m not a fan of the rounded corners of the Slider thumb. I somehow feel they are a bit too rounded. Because of this, I may come up with an alternative style in another JMetro version and allow you to choose between the two.

As usual you can check out the JMetro Java, JavaFX theme page for detailed information on JMetro. I’ll try to update it in the coming days.

In the next update I plan to create a new style for the Button control, with an added animation whenever it is clicked.

Stay tuned, follow me on twitter and subscribe to this blog.

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.