The latest addition in the Flamingo component suite is support for minimizing the ribbon. 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.
There are three ways to minimize and un-minimize the ribbon:
- Application code can use the new JRibbon.setMinimized API
- User double-clicking a task toggle button
- User pressing Ctrl+F1 key stroke
Here is a screenshot of a ribbon when it is not minimized:
When the ribbon is minimized in one of the three ways mentioned above, only the task bar and the task toggle button bar are shown. The ribbon bands of the currently selected ribbon task are hidden. Note how the main content of the frame (delineated with the Word-style ruler bands) gets expanded to occupy the area of the ribbon bands:
When a task toggle button is single-clicked, the ribbon bands of the clicked task are shown in a popup overlay without shifting the main content area down:
The ribbon tasks in the popup overlay have the same cascading popup support as the usual (non-minimized) ribbon tasks. Here is a extended popup menu of a Popup button from the first ribbon task:
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):
Your feedback is, as always, greatly appreciated.
As the name of this very blog implies, perhaps the most enjoyable part of my work on Substance and Flamingo is polishing the visuals of the different controls. And while the main emphasis of release 4.0 of Flamingo (code-named Fainnear) is to close the existing functional gaps, this will most certainly not come at the expense of the visuals.
First, here is a screenshot of an enhanced popup menu under Nimbus look-and-feel before:
And here are the new visuals:
In this specific example, the differences are somewhat unnoticeable. You can see that the insets of Format button and Apply Styles menu item are a little bigger, and that the ribbon gallery buttons (up / down / expand) are more consistent with the standalone buttons and have only one-pixel separator line between them.
This polishing is much more noticeable on command button strips, especially under look-and-feels that have non-zero padding around them (such as Nimbus). Let’s start with the Windows look-and-feel under Vista. This is before:
and this is after:
This is the same command buttons strips under Nimbus before:
and after:
And finally, the same command button strips under Synthetica Blue Steel before:
and after:
The new visuals also apply to vertical command button strips. A core example can be found in the ribbon galleries that show the up / down / expand strip on the right hand side. Here is how it now looks under Nimbus:
and Synthetica Blue Steel:
Applications that wish to use the “segmented” appearance for command buttons outside the command button strips (akin to the “JButton.segmentPosition” client property supported by Aqua look-and-feel) can use the new AbstractCommandButton.setLocationOrderKind API. When you’re placing buttons inside a command button strip component, there’s no need to use this API explicitly.
Finally, the latest 4.0dev drop provides even more control over scaling the inner layout gaps of command buttons. The new setHGapScaleFactor and setVGapScaleFactor APIs on the AbstractCommandButton and JCommandButtonStrip classes allow applications to fine tune the “density” of command buttons. This is especially relevant for command button strips.
By default, buttons in horizontal command button strips use hGapScaleFactor of 0.75, and the buttons in vertical command button strips use vGapScaleFactor of 0.75. This makes the “kerning” between the adjacent buttons 25% smaller, accounting for gaps on both sides of the inter-button separators.
The following screenshot illustrates the horizontal and vertical gap scale factors on two different command button strips under Nimbus look-and-feel:
The top three rows have the same vertical gap scaling, but the horizontal gap scaling is different. The bottom three rows have the same horizontal gap scaling, but the vertical gap scaling is different. The gap scaling is supported on vertical command button strips as well:
And finally, Substance plugin for Flamingo supports the new functionality as well. Here are the horizontal button strips under Substance Business skin:
and the vertical button strips:
Here, you would notice that in addition to one-pixel separator between the adjacent buttons (that was already present), there are also inner one-pixel lighter contours on both sides of the separator.
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):
Your feedback is, as always, greatly appreciated.
In the comment section on the last entry, Viswanath has asked whether the next release of Flamingo is nearing. I do not have definitive answer to this question, as the goal of release 4.0 of Flamingo is to close all the existing functionality gaps. The original internal plan was to allocate 20 weeks for this release cycle, placing the final release at the end of January 2009. For this release i will follow the same cutoff dates as for Substance releases: release candidate two weeks before the final release, and core feature freeze four weeks before the release candidate.
This would currently place the core feature freeze in mid December, and this may prove a little over optimistic. Instead of shrinking the cool-off period between the core feature freeze and release candidate, especially given significant amount of new functionality, the final release may shift a few weeks into February 2009. This should give enough time for both the development of the missing pieces, and community feedback on the new functionality.
On a related note, JIDE has regrettably decided to stop their work on ribbon component. Competition is always good, and not only for the potentials users. Substance has benefitted greatly not only from the prior work (especially Quaqua and Looks), but also from the ongoing development of Nimbus and Synthetica. While i might not have always agreed with the marketing pitches (especially the 56K number for Nimbus which is quite irrelevant since it cannot run outside 6u10), the competition has created a welcome and tangible pressure that ensured continued work on improving and evolving various aspects of Substance.
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 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.
