FXRibbon

Introduction


Ribbon control for Java, implemented using JavaFX, based on the Microsoft Ribbon.

You can use this control to simplify the UI of applications with a significant number of actions.

This control is used all over Microsoft’s products, it started to be used on the office family of products, later Microsoft expanded its use to other products like Outlook, MSPaint, Windows Explorer, etc. Also other companies have adopted it in their products like for instance Autocad from Autodesk.

Real examples

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.

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:

JMetro Java, JavaFX theme real word example application JMetro Java, JavaFX theme real word example application JMetro Java, JavaFX theme real word example application

How to get it

It’s a free open source library.

The repo is available at this url: https://github.com/dukke/FXRibbon

You can download the library jar from here.

Alternatively FXRibbon is on Bintray and JCenter (replace version with the version number you want):

<dependency> 
  <groupId>com.pixelduke</groupId> 
  <artifactId>FXRibbon</artifact> 
  <version>1.0.1</version> 
  <type>pom</type> 
</dependency>

Send me pictures of your application if you have time, to get a better understanding of how it’s being used and also (if you allow) for example uses illustration: 

Details

The Ribbon is a very complex control, with several features and different specialized controls that go inside the Ribbon.

Goals for this control:

  • Customizable via CSS
  • FXML friendly
  • Look good, modern and simple

Look and Feel

For the controls inside the Ribbon, the current option is to use the JMetro style. For the most common controls, e.g. textfields, comboboxs, etc. The styles (skins, CSS and such) have been, for now, imported into the Ribbon control to avoid another dependency. The Modena style (that comes with the JavaFX SDK) could have been used but it can feel like an out of date/out of fashion theme right now, it still uses some skeuomorphism.

API

The main control is the Ribbon, typically you’ll had it to the top of a scene. The Ribbon contains RibbonTab instances which you’ll add to its RibbonTab collection.

RibbonTab

The RibbonTab has a collection of RibbonGroup instances. You cannot add controls directly into a RibbonTab, you must first add RibbonGroup’s. The RibbonTab has a title, which you can pass in the constructor or set through the text property.

Contextual Color

You can set a different color for the RibbonTab, through the ContextualColor property, this is used when the tab is temporary and only exists in the Ribbon when an object is present in the interface. Think for instance, a table in a Microsoft Word document, if the user adds a table then a new RibbonTab appears to edit the properties of that table, but the tab only exists while the table exists.

RibbonGroup

A RibbonGroup has a title (in this case “File”) and a collection of Nodes, which are the controls the user interacts with, this can be Buttons, ComboBox’s, etc.

RibbonItem

A RibbonItem can be used when you want to add a label and/or an icon next to the control. You typically create the RibbonItem, set the label and icon and add it to a RibbonGroup that’s part of a Ribbon.

QuickAccessBar

The QuickAccessBar sits on the top of the Ribbon and is useful to show commands that should always be accessible no matter what tab the user is on. Good candidates are Save, Undo, Redo, etc.

Commands are displayed horizontally next to each other.

Examples and further reading

The test folder has a couple of self-explanatory test examples that you can look into to further understand the API.

For the list of blog posts on the FXRibbon library, check out the FXRibbon blog post category.

Issues and contributing

If you want to support the development of this library consider a donation or sponsoring a feature or bug fix.

In case you want to contribute, you’re welcome to file a PR.

If you just want to make a request for a feature or a bug fix, you can file an issue in the issue tracker: https://github.com/dukke/FXRibbon/issues. You’re welcome to do it but in this case there is no guarantee of when I’ll be able to address it, it depends on how much free time I have and priorities, please be patient.

Icons in test apps

Kudos icons8 for the icons used in the test apps, visit https://icons8.com for more information.