FXRibbon version 1.2 released

This time, something different. An update to FXRibbon, Microsoft like ribbon control for Java (JavaFX).

After a issue request to make FXRibbon better prepared to be updated to Java 9, and beyond, I took the opportunity to also add some features, make some aesthetic adjustments, fix some withstanding bugs, further clean up the project, and overall polish it.

The end result is version 1.2 which I’ll go into detail in this blog post.

FXRibbon version 1.2 details

List of changes

Here is the list of changes in this new version:

  1. Make FXRibbon better prepared to be updated to Java 9 and beyond. This includes replacing the use of classes that are no longer available on newer versions of JavaFX.
  2. Have CSS variables which can be easily overridden to tweak FXRibbon visuals.
  3. Fine tune aesthetics: combobox appearance inside the ribbon, tweak colors, font sizes, etc.
  4. Create two separate projects, one with the FXRibbon library (“FXRibbon”) and the other one with code samples for documentation purposes (“FXRibbon-samples”). Developers can check out the FXRibbon-samples project to see simple practical examples of FXRibbon usage.
  5. Make FXRibbon work better with JavaFX theme JMetro.
  6. RibbonGroup titles should be always aligned with each other, which didn’t always happen. This was fixed.
  7. Clean up code and Ribbon CSS file.

For detailed information check out the git log.

Tweaking FXRibbon through CSS

There were already some variables defined in the previous version, however they weren’t given enough proper consideration. In this new version I’ve cleaned up the variables and added some new ones.

Here’s the list of currently defined CSS variables:

  • ACCENT_COLOR: specifies the accent color. For instance, a possible usage is to use your brand color as the accent color.

The default accent color is blue. The following picture shows the ribbon with its default values for the CSS variables.

FXRibbon with default blue accent color

You can see color variations of the accent color in the selected “locked” button, the selected Ribbon tab title and the “Save” button, which has the mouse over it and is focused. This is just an example, it doesn’t show all the places where the accent color is used.

Let’s say you wanted to change the accent color to a green tone. For example the green color value: #10893E. Here’s how you could do it (check the ChangeAccentColorSample app in the samples project for a complete example):

ribbon.setStyle("ACCENT_COLOR: #10893e");

And here’s the end result:

FXRibbon with a green accent color defined

  • RIBBON_BUTTON_HIGHLIGHT_COLOR: Defines the color to be used in buttons throughout the Ribbon. This color is, by default, a variation of the ACCENT_COLOR.
  • RIBBON_BUTTON_SELECTED_COLOR: This variable defines the color to be used when buttons are selected, like the “locked” button in the previous example. This color is also, by default, a variation of the ACCENT_COLOR.
  • CONTROLS_LABEL_COLOR: Color of labels used on controls that are inside the ribbon. The default color is a black tone (with a value of #4b4b4b).

For now these are the CSS variables that are available. H1_COLOR and BUTTON_SELECTED_COLOR, from the previous version have been deprecated and will be removed in a later version. You are advised to replace them with the new ones.

Final considerations

For best results I would recommend developers to use the JavaFX theme JMetro along with FXRibbon. Currently FXRibbon is styled to look best when used with JMetro. JMetro is also, in my opinion, a more modern look and feel.

Wrapping up

In this post I’ve talked about the new FXRibbon 1.2 release. There are a considerable amount of changes, along with the addition of new CSS variables for you to fine tune the FXRibbon style to better fit your brand.

As usual check out the FXRibbon documentation page for more information.

Here’s what I’m planning to add next:

  • Add an FXRibbon dark theme
  • FXRibbon Modena look
  • Other missing Ribbon controls

I’ll probably continue developing the JavaFX theme JMetro in the next days.

As always, to stay up-to-date follow me on twitter.

Fluent Design Style Progress Bar For Java, JavaFX

As promised, the just released Java, JavaFX theme JMetro version 4.6 brings a new style for the Progress Bar.

The Progress Bar has two possible states: determinate and indeterminate and the new JMetro version has different styles for these two. In this post I’ll also go into a few details about some API design principles I abide by in JMetro.

JMetro API design principles

I have a few principles regarding the API of JMetro. One of them is that it should require a minimum setup and have a minimum required API. This means that, for instance, with only a few method calls you can have JMetro applied as the theme. Right now, only these two line of code are required (that can easily be collapsed into one):

JMetro jMetro = new JMetro(Style.LIGHT);
jMetro.applyTheme(root);

It also means that I try not to introduce new controls, except when they should absolutely be introduced. For example, with the new Text Field and Password Field style I could have introduced new controls, since both of these controls add new features like the clear and show password buttons. Instead, I’ve opted to add these new features by introducing new skin classes that you can use in the original controls.

This approach has two advantages:

  • The developer can easily change themes. From JMetro to a different theme and vice-versa. Since JMetro only introduces new controls when strictly necessary there is no strong coupling with JMetro. For instance you might decide to use a different theme when on mobile or on a different O.S. Or just simply you decide, you don’t want to use JMetro anymore. This is very easy with JMetro.
  • A shallow learning curve. It should be really easy to start using JMetro. At the very minimum, all you need to know are two lines of code that configure and apply JMetro. Most of the controls are already in the JavaFX SDK. New skins are applied to these controls behind the scenes.

You can also configure most of the controls new looks through CSS properties, which allows you to keep using the same Java code as before (when you were not using JMetro). In the future I might add new API to also configure these features through code (e.g. Java code) but I still plan to keep the minimal required API.

Old JMetro Progress Bar

As usual I’d first like to show how the Progress Bar used to look like in the previous version:

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

ProgressBar old JMetro light theme

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

ProgressBar old JMetro dark theme

This is a simple flat design style for the determinate state. There was no style for the indeterminate state in the older version.

New JMetro Progress Bar

Before continuing to show the new Progress Bar looks I’d like to explain why two possible states exist. When you can determine with some degree of certainty how much progress has been done in a particular task you’d use the determinate state. In this state you’ll show how much progress has been done. The amount of progress is determined by how “filled” the Progress Bar is. When the task is nearly done the Progress Bar will be “filled” or almost “filled”.

In contrast, when you can’t determine the amount of progress that has been done or, for some reason, you don’t want to calculate it, you’ll set the state to indeterminate. This won’t show how much progress has been done.  But it will at the very minimum show that some computation is underway.

Inspired by Fluent Design, you can see the new styles for the Progress Bar below. Now the two states are represented by two new different appearances. Since my last post on twitter, I’ve tweaked the indeterminate animation a little bit.

Progress Bar JMetro theme, Java, JavaFX theme, inspired by Fluent Design (previously was Metro)

ProgressBar new JMetro theme

The animation above might not look as smooth as in the live version. I didn’t have time to post a video instead of a GIF. That would possibly demonstrate the real result, better.

There is no difference between the dark and light versions.

Progress Bar details

I tried to make the CSS styling of the new Progress Bar as similar as possible to the original JavaFX Modena CSS.  You’ll still find a “track” and a “bar” CSS style class, that you can style, just like in the Modena stylesheet. This was not possible for the indeterminate state, since the appearance is completely different.

For the indeterminate state every “dot” is a Region with style classes: dot and dot_<number>. <Number> is the position of the dot, starting from 1. You can style every “dot” however you want since each one is a Region.

For example, if you wanted the dots to progressively be darker you could add in the following CSS:

.progress-bar:indeterminate .dot_1 {
    -fx-background-color: ACCENT_COLOR;
}

.progress-bar:indeterminate .dot_2 {
    -fx-background-color: derive(ACCENT_COLOR, -15%);
}

.progress-bar:indeterminate .dot_3 {
    -fx-background-color: derive(ACCENT_COLOR, -30%);
}

.progress-bar:indeterminate .dot_4 {
    -fx-background-color: derive(ACCENT_COLOR, -45%);
}

.progress-bar:indeterminate .dot_5 {
    -fx-background-color: derive(ACCENT_COLOR, -60%);
}

ACCENT_COLOR is a JavaFX CSS variable defined in JMetro that specifies the accent color for the JMetro theme. derive(..), is a JavaFX CSS helper function that darkens or lightens the given color depending on whether the passed in percentage is negative or positive.

This example would give the following result:

Progress Bar JMetro theme, Java, JavaFX theme. Custom CSS example.

Conclusion

A new style for the Progress Bar has been added, in JMetro version 4.6. In this post I also outlined some of the design principles behind JMetro.

Like before, you can check the JavaFX theme JMetro page for updated documentation (will be updated with this new version soon).

JMetro is quickly reaching version 5.0. All the most difficult controls I had planned to add till version 5 are done. In the next few releases I plan to clean up, re-tweak some styles and add the possibility to specify the accent color of controls. Possibly, I can also add a new control style, till then. Ahh.. and making JMetro available in Maven Central.

As usual follow me on twitter.

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.