Tag Archives: ribbon

Contextual Ribbon Tabs for the Ribbon

A small update to the Ribbon control: Contextual Ribbon Tabs.

Some controls should only appear when a particular object is selected because they only affect the configuration of that object. This is why Contextual Ribbon Tabs exist. They only appear when a particular object is selected and disappear when it looses its selection.

To differentiate themselves from regular Ribbon Tabs they appear with a different color, they can also be composed of more than one Tab. In the picture below the Contextual Ribbon Tab appears in blue.

contextualTab2

Gallery control for the Ribbon

This time an update to the ribbon control. I’ve done some tweaks to the UI as well as to the API and added a new control called a Gallery.

Below you can see an image of the updated Ribbon.

ribbon2

In the next picture you’ll see the new control which is called Gallery. Although you can use it by itself, I’ve never seen it being used outside the ribbon.

gallery

The up and down arrows allow you to navigate through the list of choices. The other button will open up a popup (picture below) which gives you a full view of the choices with each choice belonging to a category.

galleryPopup

All of this is CSS and FXML friendly meaning you can declare an instance of the ribbon using FXML and you can style the ribbon to your liking by overriding the existing CSS.

Ribbon for java using javafx

The ribbon is a control that was brought up with office and has since been getting progressively more important with its inclusion in windows built in apps like Windows Explorer or MS Paint.

It replaces the use of menus, occupies more space but favors discoverability.

And so I’ve decided to create this control in java, particularly by using javafx (image below).

ribbon

(Click the image above to see it in it’s original size)

It is FXML friendly, the demo above was in itself created using FXML.

The source code is available at https://github.com/dukke/FXRibbon (the icons in the figure above are not included). There are a couple of demo apps that show how the ribbon is used.

It’s a project that is under development and so the API is very likely to change with time.

Update (5 March 2018): Check out the new Ribbon documentation page for updated information. Some things have changed.