Pushing Pixels

The latest addition in the Flamingo component suite is support for horizontal scrolling of collapsed ribbon tasks and shrinked task toggle buttons. This has been one of the items on the roadmap for version 4.0 (code named Fainnear), and is now available in the latest 4.0dev drop of Flamingo core and 5.1dev drop of Substance Flamingo plugin.

The new functionality kicks in when you start to shrink the ribbon frame horizontally. At a certain point, the content needs to be either shrinked or scrolled, depending on the minimum size of the corresponding ribbon components and the overall content of the frame. The first screenshot shows three first stages of the ribbon component at progressively smaller widths (all the screenshots in this entry are taken under the Substance Business skin):

The second step shows that the contextual task group header (in the title pane) does not overflow into the bounds of the min / max / close buttons. The third step shows what happens when there is not enough width to show the preferred content of all the task toggle buttons – they begin to shrink (note the last letters that are cut off on some of the buttons), and the area shows horizontal dividers between the buttons.

At a certain point, there is not enough space to show all the task toggle buttons under the minimum width (that is still able to show the first few letters). At this point, the area that hosts the task toggle buttons becomes a scrollable panel:

Clicking on the scroller buttons scrolls the task toggle buttons:

Finally, at some point there is not enough space to show the ribbon bands under the most restrictive resize policy. At that point, the area that hosts the ribbon bands becomes a scrollable panel as well:

As above, clicking the scroller buttons scrolls the ribbon bands:

There are a few usability points built in to this mechanism:

• When the task toggle buttons become shrinked, the left / right insets become gradually smaller to allow showing more text (compare with the first two steps).
• When the task toggle buttons become shrinked, they show the full title in the tooltip.
• You can mouse-wheel the task toggle button area to cycle through the tasks (as before). When you cycle to a task which button is not visible, it will be scrolled to and revealed.
• The content can be scrolled repeatedly by pressing and holding the mouse over a scroller button.
• Once the content reaches the edge, the corresponding button is disabled.

If you want to see the scrolling in action under the core look-and-feels, run the following WebStart demo:

If you want to see this functionality under Substance, run the following WebStart demo:

If you want to test the new functionality in your applications, you would need the following (the last two only for applications running under Substance look-and-feel):

• The latest 4.0dev drop of Flamingo (code-named Fainnear)
• The latest 5.1dev drop of Substance (code-named Panama)
• The latest 5.1dev drop of Substance Flamingo plugin

The latest 4.0dev drop of Flamingo also introduced a breaking API change. The support for help ribbon task has been removed. Instead (as in the screenshots above), you can place a help button on the far right side of the task toggle buttons using the new org.jvnet.flamingo.ribbon.JRibbon.configureHelp API. It gets two parameters – the icon and the action listener that will be invoked when the button is clicked.

Your feedback is, as always, greatly appreciated.

Related posts:

1. Flamingo ribbon component: minimizing the ribbon The latest addition in the Flamingo component suite is support for minimizing the ribbon. This...
2. Flamingo ribbon component: key tips The latest addition in the Flamingo component suite is support for key tips. This has...
3. Flamingo ribbon component: latest additions and future plans The last entry on Flamingo component suite talked about addition of contextual task groups, dynamic...
4. Flamingo component suite 3.0 – ribbon The ribbon component is one of the major parts of the Flamingo component suite. It...