Home » Java » Desktop Java » FXRibbon Version 1.2 Released

About Pedro Duque Vieira

Pedro Duque Vieira
JavaFX and Swing, Freelancer and Consultant specialized in creating User Interfaces. Has been working as a front end consultant and has been developing web, native and cross platform since 2006. Holder of a master degree in Computer Science, he's permanently studying and taking courses in User Interface Design and User Experience. Owner of the software company Pixel Duke.

FXRibbon Version 1.2 Released

This time, something different. An update to FXRibbon, Microsoft like ribbon control for Java (JavaFX). After an 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

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

  • 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 JMetroalong 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.

Published on Java Code Geeks with permission by Pedro Duque-Vieira, partner at our JCG program. See the original article here: FXRibbon Version 1.2 Released

Opinions expressed by Java Code Geeks contributors are their own.

(0 rating, 0 votes)
You need to be a registered member to rate this.
1 Comment Views Tweet it!
Do you want to know how to develop your skillset to become a Java Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. JPA Mini Book
2. JVM Troubleshooting Guide
3. JUnit Tutorial for Unit Testing
4. Java Annotations Tutorial
5. Java Interview Questions
6. Spring Interview Questions
7. Android UI Design
and many more ....
I agree to the Terms and Privacy Policy

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Malikoski Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Malikoski
Guest
Ricardo Malikoski

Very good.